{
  "schemaVersion": "1.0",
  "item": {
    "slug": "design-system-creation",
    "name": "Design System Creation",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/wpank/design-system-creation",
    "canonicalUrl": "https://clawhub.ai/wpank/design-system-creation",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/design-system-creation",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system-creation",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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-system-creation"
    },
    "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-system-creation",
    "agentPageUrl": "https://openagent3.xyz/skills/design-system-creation/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system-creation/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system-creation/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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Design System Creation (Meta-Skill)",
        "body": "Complete workflow for creating distinctive design systems with personality."
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install design-system-creation"
      },
      {
        "title": "When to Use",
        "body": "Starting a new product that needs visual identity\nRefactoring an existing design with scattered styles\nBuilding a component library with design tokens\nWant to go beyond generic Tailwind/Bootstrap aesthetics"
      },
      {
        "title": "Workflow Overview",
        "body": "1. Aesthetic Foundation   → Document the vibe before code\n2. Color Token System     → CSS variables + Tailwind + TypeScript\n3. Typography System      → Font stack + scale + patterns\n4. Surface Components     → Layered primitives with CVA\n5. Motion Tokens          → Consistent animation timing\n6. Loading States         → Skeleton + shimmer patterns"
      },
      {
        "title": "Step 1: Aesthetic Foundation",
        "body": "Read: ai/skills/design-systems/distinctive-design-systems\n\nBefore writing CSS, document the aesthetic:\n\n## The Vibe\n[1-2 sentences describing the visual feel]\n\n## Inspirations\n- [Reference 1 - what to take from it]\n- [Reference 2 - what to take from it]\n\n## Emotions to Evoke\n| Emotion | How It's Achieved |\n|---------|-------------------|\n| [X] | [specific technique] |\n| [Y] | [specific technique] |"
      },
      {
        "title": "Proven Directions to Consider",
        "body": "AestheticCharacteristicsRetro-futuristicCRT textures, glow effects, monospace fontsWarm cyberpunkTan/beige base, emerald accents, glass panelsMagazine financialBold typography, dark theme, gradient text"
      },
      {
        "title": "Step 2: Color Token Architecture",
        "body": "Read: ai/skills/design-systems/distinctive-design-systems\n\nCreate the three-layer token system:\n\n/* 1. CSS Variables (source of truth) */\n:root {\n  --tone-primary: 76, 204, 255;\n  --primary: 200 90% 65%;\n  --success: 154 80% 60%;\n  --destructive: 346 80% 62%;\n}\n\n// 2. Tailwind Config\ncolors: {\n  primary: 'hsl(var(--primary))',\n  tone: { primary: 'rgb(var(--tone-primary))' },\n}\n\n// 3. TypeScript Tokens (optional)\nexport const colors = {\n  primary: 'hsl(var(--primary))',\n};"
      },
      {
        "title": "Step 3: Typography System",
        "body": "Read: ai/skills/design-systems/distinctive-design-systems\n\nDefine fonts and scale:\n\n:root {\n  --font-display: 'Orbitron', system-ui;\n  --font-mono: 'Share Tech Mono', monospace;\n  --font-sans: 'Inter', system-ui;\n  \n  --typo-scale: 0.88;  /* Mobile */\n}\n\n@media (min-width: 640px) {\n  :root { --typo-scale: 1; }\n}"
      },
      {
        "title": "Typography Patterns",
        "body": "/* Magazine-style numbers */\n.metric { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }\n\n/* Labels */\n.label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }"
      },
      {
        "title": "Step 4: Surface Components",
        "body": "Read: ai/skills/design-systems/design-system-components\n\nBuild layered surface primitives with CVA:\n\nconst surfaceVariants = cva(\n  'rounded-lg backdrop-blur-sm transition-colors',\n  {\n    variants: {\n      layer: {\n        panel: 'bg-tone-cadet/40 border border-tone-jordy/10',\n        tile: 'bg-tone-midnight/60 border border-tone-jordy/5',\n        chip: 'bg-tone-cyan/10 border border-tone-cyan/20 rounded-full',\n      },\n    },\n  }\n);\n\nexport function Surface({ layer, children }: SurfaceProps) {\n  return <div className={surfaceVariants({ layer })}>{children}</div>;\n}"
      },
      {
        "title": "Step 5: Motion Tokens",
        "body": "Read: ai/skills/design-systems/distinctive-design-systems\n\nDefine consistent animation timing:\n\n// tailwind.config.ts\nkeyframes: {\n  'shimmer': { '0%': { backgroundPosition: '200% 0' }, '100%': { backgroundPosition: '-200% 0' } },\n  'pulse-glow': { '0%, 100%': { opacity: '1' }, '50%': { opacity: '0.5' } },\n  'slide-in': { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },\n},\nanimation: {\n  'shimmer': 'shimmer 1.5s ease-in-out infinite',\n  'pulse-glow': 'pulse-glow 1.8s ease-in-out infinite',\n  'slide-in': 'slide-in 0.2s ease-out',\n}"
      },
      {
        "title": "Step 6: Loading States",
        "body": "Read: ai/skills/design-systems/loading-state-patterns\n\nCreate skeleton components that match your aesthetic:\n\nexport function Skeleton({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        'rounded-md bg-muted animate-shimmer',\n        'bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%]',\n        className\n      )}\n    />\n  );\n}"
      },
      {
        "title": "Component Skills Reference",
        "body": "SkillPurposedistinctive-design-systemsAesthetic foundation, tokensdesign-system-componentsSurface primitives, CVAanimated-financial-displayNumber animationsloading-state-patternsSkeletons, shimmerfinancial-data-visualizationChart theming"
      },
      {
        "title": "File Structure",
        "body": "styles/\n├── globals.css          # CSS variables, base styles\n├── design-tokens.ts     # TypeScript exports\n└── theme.css            # Component patterns\n\ntailwind.config.ts       # Token integration\n\ncomponents/\n├── ui/\n│   ├── surface.tsx      # Surface primitive\n│   ├── skeleton.tsx     # Loading states\n│   └── button.tsx       # Variant components"
      },
      {
        "title": "NEVER Do",
        "body": "Never start with code before documenting aesthetic — Vibes before CSS\nNever use pure black (#000) as base — Always use tinted blacks for depth\nNever use pure white (#fff) for text — Use tinted whites that match the palette\nNever skip design tokens in favor of hardcoded values — Tokens prevent drift\nNever create components without variant system — Use CVA or similar for consistency\nNever use Inter/Roboto for headings — Display fonts create distinctiveness\nNever use default Tailwind colors — Define your own palette\nNever skip backdrop-filter blur on glass — Glass panels need blur to work\nNever apply decorative patterns to readable content — Background decoration only\nNever use high-saturation colors without opacity — Modulate with rgba()"
      },
      {
        "title": "Checklist",
        "body": "Document aesthetic foundation (vibe, inspirations, emotions)\n Create color token system (CSS + Tailwind + TS)\n Define typography stack and scale\n Build Surface primitive component\n Add motion tokens and animations\n Create loading state components\n Document anti-patterns (what NOT to do)"
      }
    ],
    "body": "Design System Creation (Meta-Skill)\n\nComplete workflow for creating distinctive design systems with personality.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install design-system-creation\n\nWhen to Use\nStarting a new product that needs visual identity\nRefactoring an existing design with scattered styles\nBuilding a component library with design tokens\nWant to go beyond generic Tailwind/Bootstrap aesthetics\nWorkflow Overview\n1. Aesthetic Foundation   → Document the vibe before code\n2. Color Token System     → CSS variables + Tailwind + TypeScript\n3. Typography System      → Font stack + scale + patterns\n4. Surface Components     → Layered primitives with CVA\n5. Motion Tokens          → Consistent animation timing\n6. Loading States         → Skeleton + shimmer patterns\n\nStep 1: Aesthetic Foundation\n\nRead: ai/skills/design-systems/distinctive-design-systems\n\nBefore writing CSS, document the aesthetic:\n\n## The Vibe\n[1-2 sentences describing the visual feel]\n\n## Inspirations\n- [Reference 1 - what to take from it]\n- [Reference 2 - what to take from it]\n\n## Emotions to Evoke\n| Emotion | How It's Achieved |\n|---------|-------------------|\n| [X] | [specific technique] |\n| [Y] | [specific technique] |\n\nProven Directions to Consider\nAesthetic\tCharacteristics\nRetro-futuristic\tCRT textures, glow effects, monospace fonts\nWarm cyberpunk\tTan/beige base, emerald accents, glass panels\nMagazine financial\tBold typography, dark theme, gradient text\nStep 2: Color Token Architecture\n\nRead: ai/skills/design-systems/distinctive-design-systems\n\nCreate the three-layer token system:\n\n/* 1. CSS Variables (source of truth) */\n:root {\n  --tone-primary: 76, 204, 255;\n  --primary: 200 90% 65%;\n  --success: 154 80% 60%;\n  --destructive: 346 80% 62%;\n}\n\n// 2. Tailwind Config\ncolors: {\n  primary: 'hsl(var(--primary))',\n  tone: { primary: 'rgb(var(--tone-primary))' },\n}\n\n// 3. TypeScript Tokens (optional)\nexport const colors = {\n  primary: 'hsl(var(--primary))',\n};\n\nStep 3: Typography System\n\nRead: ai/skills/design-systems/distinctive-design-systems\n\nDefine fonts and scale:\n\n:root {\n  --font-display: 'Orbitron', system-ui;\n  --font-mono: 'Share Tech Mono', monospace;\n  --font-sans: 'Inter', system-ui;\n  \n  --typo-scale: 0.88;  /* Mobile */\n}\n\n@media (min-width: 640px) {\n  :root { --typo-scale: 1; }\n}\n\nTypography Patterns\n/* Magazine-style numbers */\n.metric { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }\n\n/* Labels */\n.label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }\n\nStep 4: Surface Components\n\nRead: ai/skills/design-systems/design-system-components\n\nBuild layered surface primitives with CVA:\n\nconst surfaceVariants = cva(\n  'rounded-lg backdrop-blur-sm transition-colors',\n  {\n    variants: {\n      layer: {\n        panel: 'bg-tone-cadet/40 border border-tone-jordy/10',\n        tile: 'bg-tone-midnight/60 border border-tone-jordy/5',\n        chip: 'bg-tone-cyan/10 border border-tone-cyan/20 rounded-full',\n      },\n    },\n  }\n);\n\nexport function Surface({ layer, children }: SurfaceProps) {\n  return <div className={surfaceVariants({ layer })}>{children}</div>;\n}\n\nStep 5: Motion Tokens\n\nRead: ai/skills/design-systems/distinctive-design-systems\n\nDefine consistent animation timing:\n\n// tailwind.config.ts\nkeyframes: {\n  'shimmer': { '0%': { backgroundPosition: '200% 0' }, '100%': { backgroundPosition: '-200% 0' } },\n  'pulse-glow': { '0%, 100%': { opacity: '1' }, '50%': { opacity: '0.5' } },\n  'slide-in': { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },\n},\nanimation: {\n  'shimmer': 'shimmer 1.5s ease-in-out infinite',\n  'pulse-glow': 'pulse-glow 1.8s ease-in-out infinite',\n  'slide-in': 'slide-in 0.2s ease-out',\n}\n\nStep 6: Loading States\n\nRead: ai/skills/design-systems/loading-state-patterns\n\nCreate skeleton components that match your aesthetic:\n\nexport function Skeleton({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        'rounded-md bg-muted animate-shimmer',\n        'bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%]',\n        className\n      )}\n    />\n  );\n}\n\nComponent Skills Reference\nSkill\tPurpose\ndistinctive-design-systems\tAesthetic foundation, tokens\ndesign-system-components\tSurface primitives, CVA\nanimated-financial-display\tNumber animations\nloading-state-patterns\tSkeletons, shimmer\nfinancial-data-visualization\tChart theming\nFile Structure\nstyles/\n├── globals.css          # CSS variables, base styles\n├── design-tokens.ts     # TypeScript exports\n└── theme.css            # Component patterns\n\ntailwind.config.ts       # Token integration\n\ncomponents/\n├── ui/\n│   ├── surface.tsx      # Surface primitive\n│   ├── skeleton.tsx     # Loading states\n│   └── button.tsx       # Variant components\n\nNEVER Do\nNever start with code before documenting aesthetic — Vibes before CSS\nNever use pure black (#000) as base — Always use tinted blacks for depth\nNever use pure white (#fff) for text — Use tinted whites that match the palette\nNever skip design tokens in favor of hardcoded values — Tokens prevent drift\nNever create components without variant system — Use CVA or similar for consistency\nNever use Inter/Roboto for headings — Display fonts create distinctiveness\nNever use default Tailwind colors — Define your own palette\nNever skip backdrop-filter blur on glass — Glass panels need blur to work\nNever apply decorative patterns to readable content — Background decoration only\nNever use high-saturation colors without opacity — Modulate with rgba()\nChecklist\n Document aesthetic foundation (vibe, inspirations, emotions)\n Create color token system (CSS + Tailwind + TS)\n Define typography stack and scale\n Build Surface primitive component\n Add motion tokens and animations\n Create loading state components\n Document anti-patterns (what NOT to do)"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/design-system-creation",
    "publisherUrl": "https://clawhub.ai/wpank/design-system-creation",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/design-system-creation",
    "downloadUrl": "https://openagent3.xyz/downloads/design-system-creation",
    "agentUrl": "https://openagent3.xyz/skills/design-system-creation/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system-creation/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system-creation/agent.md"
  }
}