{
  "schemaVersion": "1.0",
  "item": {
    "slug": "design-style",
    "name": "Design Style",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/BenAngel65/design-style",
    "canonicalUrl": "https://clawhub.ai/BenAngel65/design-style",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/design-style",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-style",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "prompts/Academia.md",
      "prompts/ArtDeco.md",
      "prompts/Bauhaus.md",
      "prompts/BoldTypography.md",
      "prompts/Botanical.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/design-style"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/design-style",
    "agentPageUrl": "https://openagent3.xyz/skills/design-style/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-style/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-style/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Purpose",
        "body": "This skill helps Claude Code create beautiful, distinctive frontend interfaces by automatically retrieving design system prompts from the prompts/ directory. Instead of producing generic UI, this skill enables Claude to build interfaces with specific design aesthetics like Neo-brutalism, Modern Dark, Luxury, Cyberpunk, and more."
      },
      {
        "title": "When to Use",
        "body": "This skill is automatically invoked when:\n\nUser asks to build a web page, landing page, or web application\nUser requests a UI component with a specific design style\nUser mentions frontend, React, Vue, or web development\nUser asks for a specific aesthetic (e.g., \"make it look modern and dark\" or \"use a brutalist style\")"
      },
      {
        "title": "Available Design Styles",
        "body": "The following design systems are available in the prompts/ directory:\n\nAcademia - Scholarly, classic, refined\nArtDeco - Luxurious 1920s glamour\nBauhaus - Functionalist, geometric minimalism\nBoldTypography - Type-driven design\nBotanical - Nature-inspired, organic\nClaymorphism - Soft, clay-like 3D elements\nCyberpunk - Futuristic, neon, high-tech\nEnterprise - Professional, corporate, scalable\nFlatDesign - Clean, minimal, 2D\nFluent2 - Microsoft Fluent 2 Design System\nHumanistLiterary - Warm, literary, conversational (Claude aesthetic)\nIndustrial - Raw, mechanical, utilitarian\nKinetic - Dynamic, motion-focused\nLuxury - Premium, elegant, sophisticated\nMaterial - Google Material Design\nMaximalism - Bold, expressive, abundant\nMinimalDrak - Minimal dark theme (note: typo in original)\nModernDark - Contemporary dark UI with depth\nMonochrome - Black and white, high contrast\nNeo-brutalism - Bold, raw, colorful brutalism\nNeumorphism - Soft UI, skeuomorphic\nNewsprint - Newspaper-inspired\nOrganic - Natural, flowing forms\nPlayfulGeometric - Fun geometric shapes\nProfessional - Clean, business-focused\nRetro - Vintage, nostalgic\nSaas - Modern SaaS aesthetic\nSketch - Hand-drawn, artistic\nSwiss - International Typographic Style\nTerminalCLI - Command-line interface aesthetic\nVaporwave - 80s/90s aesthetic, nostalgic\nWeb3 - Decentralized, crypto-inspired"
      },
      {
        "title": "Step 1: Understand User Intent",
        "body": "When the user requests frontend work, first determine:\n\nTech stack - What framework are they using? (React, Vue, Next.js, etc.)\nDesign preference - Did they mention a specific style or aesthetic?\nComponent scope - Single component, full page, or entire application?"
      },
      {
        "title": "Step 2: Select Design Style",
        "body": "If user specifies a style:\n\nMatch their request to available styles (e.g., \"brutalist\" → Neo-brutalism)\nCase-insensitive matching (brutalism, Brutalism, BRUTALISM all work)\n\nIf user doesn't specify:\n\nFor modern, professional projects → ModernDark or Professional\nFor creative, bold projects → Neo-brutalism or BoldTypography\nFor minimal, clean projects → FlatDesign or Swiss\nFor enterprise/corporate → Enterprise\n\nAsk the user if you're uncertain about which style fits their needs."
      },
      {
        "title": "Step 3: Retrieve Design System",
        "body": "Use the Read tool to load the appropriate prompt file:\n\nRead: prompts/<StyleName>.md\n\nFor example:\n\nprompts/Neo-brutalism.md\nprompts/ModernDark.md\nprompts/Cyberpunk.md"
      },
      {
        "title": "Step 4: Apply Design System",
        "body": "Once you've loaded the design system prompt:\n\nInternalize the design philosophy - Understand the core principles, visual signatures, and differentiation factors\nExtract design tokens - Colors, typography, spacing, shadows, borders\nFollow component patterns - Use the specified button styles, card layouts, etc.\nApply the \"Bold Factor\" - Implement signature elements that make the design authentic\nAvoid anti-patterns - Don't use techniques that break the aesthetic"
      },
      {
        "title": "Step 5: Build with Context",
        "body": "Before writing code:\n\nIdentify the user's existing tech stack\nUnderstand their component architecture\nNote any constraints (CSS frameworks, design libraries, etc.)\n\nWhen writing code:\n\nMatch their existing patterns and conventions\nCentralize design tokens in CSS variables or a config file\nCreate reusable, composable components\nExplain your architectural choices briefly\n\nQuality standards:\n\nPreserve or improve accessibility\nEnsure responsive design across devices\nMake deliberate, creative design choices (not generic boilerplate)\nLeave the codebase cleaner than you found it"
      },
      {
        "title": "Example 1: User Specifies Style",
        "body": "User: \"Create a landing page for my SaaS product with a neo-brutalist design\"\n\nSkill Actions:\n\nDetect keywords: \"landing page\", \"neo-brutalist\"\nMap \"neo-brutalist\" → prompts/Neo-brutalism.md\nRead the design system prompt\nAsk clarifying questions: \"What tech stack are you using? React, Vue, or plain HTML/CSS?\"\nBuild the landing page following Neo-brutalism principles (thick borders, hard shadows, bold colors, etc.)"
      },
      {
        "title": "Example 2: User Doesn't Specify Style",
        "body": "User: \"Help me build a portfolio website\"\n\nSkill Actions:\n\nDetect: \"portfolio website\" (creative context)\nSuggest options: \"Would you like a specific design style? I can create it in Modern Dark (sophisticated), Neo-brutalism (bold and creative), or Swiss (minimal and clean).\"\nUser responds with preference\nLoad appropriate prompt and build"
      },
      {
        "title": "Example 3: Component Request",
        "body": "User: \"Add a contact form to my Next.js app. Make it look modern and professional.\"\n\nSkill Actions:\n\nKeywords: \"Next.js\", \"modern and professional\"\nSelect: ModernDark.md (modern) or Professional.md (professional)\nRead design system\nBuild form component matching their Next.js patterns\nUse design tokens from the prompt (colors, typography, shadows, etc.)"
      },
      {
        "title": "Quick Reference Commands",
        "body": "When implementing, you can quickly reference specific sections:\n\nColors:\n\nGrep: pattern \"Token|Value|Usage\" path \"prompts/<Style>.md\"\n\nTypography:\n\nGrep: pattern \"Font|Weight|Size\" path \"prompts/<Style>.md\"\n\nComponent Patterns:\n\nGrep: pattern \"Button|Card|Input\" path \"prompts/<Style>.md\""
      },
      {
        "title": "Tips for Best Results",
        "body": "Read the full prompt - Don't just skim. The design philosophy and differentiation sections are critical.\nImplement signature elements - Every design system has a \"Bold Factor\" section. These elements are what make it authentic.\nAvoid anti-patterns - Each prompt lists what NOT to do. Follow these rules strictly.\nAsk questions - If the user's needs are unclear, ask before building.\nMatch existing code - Don't fight their tech stack. Integrate the design system into their existing patterns."
      },
      {
        "title": "Notes",
        "body": "All design system prompts follow the same structure: <role> and <design-system> sections\nPrompts include detailed color palettes, typography scales, component patterns, and implementation examples\nEach style is production-ready and has been carefully crafted for visual distinctiveness\nThe prompts are designed to prevent generic, AI-looking interfaces"
      },
      {
        "title": "Future Enhancements",
        "body": "Potential improvements to this skill:\n\nStyle combination support (e.g., \"Cyberpunk + Minimal\")\nCustom style creation workflow\nDesign token extraction to JSON/CSS\nComponent library generation from prompts"
      }
    ],
    "body": "Design Style Skill\nPurpose\n\nThis skill helps Claude Code create beautiful, distinctive frontend interfaces by automatically retrieving design system prompts from the prompts/ directory. Instead of producing generic UI, this skill enables Claude to build interfaces with specific design aesthetics like Neo-brutalism, Modern Dark, Luxury, Cyberpunk, and more.\n\nWhen to Use\n\nThis skill is automatically invoked when:\n\nUser asks to build a web page, landing page, or web application\nUser requests a UI component with a specific design style\nUser mentions frontend, React, Vue, or web development\nUser asks for a specific aesthetic (e.g., \"make it look modern and dark\" or \"use a brutalist style\")\nAvailable Design Styles\n\nThe following design systems are available in the prompts/ directory:\n\nAcademia - Scholarly, classic, refined\nArtDeco - Luxurious 1920s glamour\nBauhaus - Functionalist, geometric minimalism\nBoldTypography - Type-driven design\nBotanical - Nature-inspired, organic\nClaymorphism - Soft, clay-like 3D elements\nCyberpunk - Futuristic, neon, high-tech\nEnterprise - Professional, corporate, scalable\nFlatDesign - Clean, minimal, 2D\nFluent2 - Microsoft Fluent 2 Design System\nHumanistLiterary - Warm, literary, conversational (Claude aesthetic)\nIndustrial - Raw, mechanical, utilitarian\nKinetic - Dynamic, motion-focused\nLuxury - Premium, elegant, sophisticated\nMaterial - Google Material Design\nMaximalism - Bold, expressive, abundant\nMinimalDrak - Minimal dark theme (note: typo in original)\nModernDark - Contemporary dark UI with depth\nMonochrome - Black and white, high contrast\nNeo-brutalism - Bold, raw, colorful brutalism\nNeumorphism - Soft UI, skeuomorphic\nNewsprint - Newspaper-inspired\nOrganic - Natural, flowing forms\nPlayfulGeometric - Fun geometric shapes\nProfessional - Clean, business-focused\nRetro - Vintage, nostalgic\nSaas - Modern SaaS aesthetic\nSketch - Hand-drawn, artistic\nSwiss - International Typographic Style\nTerminalCLI - Command-line interface aesthetic\nVaporwave - 80s/90s aesthetic, nostalgic\nWeb3 - Decentralized, crypto-inspired\nHow It Works\nStep 1: Understand User Intent\n\nWhen the user requests frontend work, first determine:\n\nTech stack - What framework are they using? (React, Vue, Next.js, etc.)\nDesign preference - Did they mention a specific style or aesthetic?\nComponent scope - Single component, full page, or entire application?\nStep 2: Select Design Style\n\nIf user specifies a style:\n\nMatch their request to available styles (e.g., \"brutalist\" → Neo-brutalism)\nCase-insensitive matching (brutalism, Brutalism, BRUTALISM all work)\n\nIf user doesn't specify:\n\nFor modern, professional projects → ModernDark or Professional\nFor creative, bold projects → Neo-brutalism or BoldTypography\nFor minimal, clean projects → FlatDesign or Swiss\nFor enterprise/corporate → Enterprise\n\nAsk the user if you're uncertain about which style fits their needs.\n\nStep 3: Retrieve Design System\n\nUse the Read tool to load the appropriate prompt file:\n\nRead: prompts/<StyleName>.md\n\n\nFor example:\n\nprompts/Neo-brutalism.md\nprompts/ModernDark.md\nprompts/Cyberpunk.md\nStep 4: Apply Design System\n\nOnce you've loaded the design system prompt:\n\nInternalize the design philosophy - Understand the core principles, visual signatures, and differentiation factors\nExtract design tokens - Colors, typography, spacing, shadows, borders\nFollow component patterns - Use the specified button styles, card layouts, etc.\nApply the \"Bold Factor\" - Implement signature elements that make the design authentic\nAvoid anti-patterns - Don't use techniques that break the aesthetic\nStep 5: Build with Context\n\nBefore writing code:\n\nIdentify the user's existing tech stack\nUnderstand their component architecture\nNote any constraints (CSS frameworks, design libraries, etc.)\n\nWhen writing code:\n\nMatch their existing patterns and conventions\nCentralize design tokens in CSS variables or a config file\nCreate reusable, composable components\nExplain your architectural choices briefly\n\nQuality standards:\n\nPreserve or improve accessibility\nEnsure responsive design across devices\nMake deliberate, creative design choices (not generic boilerplate)\nLeave the codebase cleaner than you found it\nExamples\nExample 1: User Specifies Style\n\nUser: \"Create a landing page for my SaaS product with a neo-brutalist design\"\n\nSkill Actions:\n\nDetect keywords: \"landing page\", \"neo-brutalist\"\nMap \"neo-brutalist\" → prompts/Neo-brutalism.md\nRead the design system prompt\nAsk clarifying questions: \"What tech stack are you using? React, Vue, or plain HTML/CSS?\"\nBuild the landing page following Neo-brutalism principles (thick borders, hard shadows, bold colors, etc.)\nExample 2: User Doesn't Specify Style\n\nUser: \"Help me build a portfolio website\"\n\nSkill Actions:\n\nDetect: \"portfolio website\" (creative context)\nSuggest options: \"Would you like a specific design style? I can create it in Modern Dark (sophisticated), Neo-brutalism (bold and creative), or Swiss (minimal and clean).\"\nUser responds with preference\nLoad appropriate prompt and build\nExample 3: Component Request\n\nUser: \"Add a contact form to my Next.js app. Make it look modern and professional.\"\n\nSkill Actions:\n\nKeywords: \"Next.js\", \"modern and professional\"\nSelect: ModernDark.md (modern) or Professional.md (professional)\nRead design system\nBuild form component matching their Next.js patterns\nUse design tokens from the prompt (colors, typography, shadows, etc.)\nQuick Reference Commands\n\nWhen implementing, you can quickly reference specific sections:\n\nColors:\n\nGrep: pattern \"Token|Value|Usage\" path \"prompts/<Style>.md\"\n\n\nTypography:\n\nGrep: pattern \"Font|Weight|Size\" path \"prompts/<Style>.md\"\n\n\nComponent Patterns:\n\nGrep: pattern \"Button|Card|Input\" path \"prompts/<Style>.md\"\n\nTips for Best Results\nRead the full prompt - Don't just skim. The design philosophy and differentiation sections are critical.\nImplement signature elements - Every design system has a \"Bold Factor\" section. These elements are what make it authentic.\nAvoid anti-patterns - Each prompt lists what NOT to do. Follow these rules strictly.\nAsk questions - If the user's needs are unclear, ask before building.\nMatch existing code - Don't fight their tech stack. Integrate the design system into their existing patterns.\nNotes\nAll design system prompts follow the same structure: <role> and <design-system> sections\nPrompts include detailed color palettes, typography scales, component patterns, and implementation examples\nEach style is production-ready and has been carefully crafted for visual distinctiveness\nThe prompts are designed to prevent generic, AI-looking interfaces\nFuture Enhancements\n\nPotential improvements to this skill:\n\nStyle combination support (e.g., \"Cyberpunk + Minimal\")\nCustom style creation workflow\nDesign token extraction to JSON/CSS\nComponent library generation from prompts"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/BenAngel65/design-style",
    "publisherUrl": "https://clawhub.ai/BenAngel65/design-style",
    "owner": "BenAngel65",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/design-style",
    "downloadUrl": "https://openagent3.xyz/downloads/design-style",
    "agentUrl": "https://openagent3.xyz/skills/design-style/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-style/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-style/agent.md"
  }
}