Building Design Systems

Package your visual language as an installable design system. Token sets, component specs, and style rules that make Claude Code generate consistent, on-brand UI from the first line.

Design systems are one of the highest-value products you can publish on MyClaude. The problem they solve is universal: every time a developer asks Claude Code to build UI, they get something technically correct but visually generic. Your design system changes that. Install it once, and every component Claude Code produces follows your spacing, your color palette, your typographic scale — automatically.

You don't need to be a developer to build one. If you've defined a brand, maintained a style guide, or made decisions about how a product should look and feel, you already have the raw material.

What is a Design System?

A Design System is a collection of token files, component specs, and usage rules installed into ./myclaude-products/. When a buyer installs your system, Claude Code reads it and applies your visual decisions whenever it generates UI code.

The difference between a Design System and a Style guide PDF: a PDF sits in a folder and gets ignored. A Design System gets read by Claude Code on every generation — it becomes the default.

Who creates Design Systems?

You don't need to write code. You need to have made visual decisions worth repeating.

• Brand managers — encode the brand's complete visual identity for AI-generated assets
• Design leads — translate Figma variables into a format Claude Code understands
• Product designers — package a design language for teams who use Claude Code to build
• Agency owners — create reusable systems for every client project
• Design educators — build pedagogical systems that teach good visual principles
• Indie creators — sell a distinctive aesthetic as an installable visual style

If you can answer "this is our blue, this is our spacing unit, this is how our buttons look" — you can build a Design System.

Create your first Design System

Let's build a minimal but complete design system. Concrete, immediately usable.

Scaffold the project

$ myclaude init brand-core --type design-systems
$ cd brand-core

You now have a starter structure with tokens.yaml, an optional components/ directory, and vault.yaml.

Write your tokens file

Tokens are the foundation. They encode every visual decision as a named value. Here is a complete example using tokens.yaml:

# tokens.yaml — the canonical values for your design system

colors:
  primary: "#1a1a2e"
  primary-hover: "#16213e"
  accent: "#e94560"
  accent-hover: "#c73652"
  surface: "#0f3460"
  background: "#0a0a1a"
  text-primary: "#eaeaea"
  text-secondary: "#9a9ab0"
  text-muted: "#5a5a7a"
  border: "#2a2a4a"
  success: "#2ecc71"
  warning: "#f39c12"
  error: "#e74c3c"

spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

typography:
  family-display: "Inter, sans-serif"
  family-mono: "JetBrains Mono, monospace"
  scale:
    xs: "12px"
    sm: "14px"
    base: "16px"
    lg: "18px"
    xl: "20px"
    2xl: "24px"
    3xl: "30px"
  weight-regular: 400
  weight-medium: 500
  weight-semibold: 600
  weight-bold: 700
  line-height-tight: 1.25
  line-height-normal: 1.5
  line-height-relaxed: 1.75

radii:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px

shadows:
  sm: "0 1px 2px rgba(0,0,0,0.3)"
  md: "0 4px 6px rgba(0,0,0,0.4)"
  lg: "0 10px 15px rgba(0,0,0,0.5)"
  glow: "0 0 20px rgba(233,69,96,0.3)"

Write component specs (optional but powerful)

Token files define the vocabulary. Component specs define the grammar — how to combine tokens into specific UI patterns.

Create a components/ directory and add spec files for your key components:

# components/button.md

## Button

### Variants
- **primary**: bg=accent, text=white, hover=accent-hover
- **secondary**: bg=transparent, border=border, text=text-primary, hover=surface
- **ghost**: bg=transparent, text=text-secondary, hover=surface

### Anatomy
- Padding: sm (vertical) × md (horizontal)
- Border radius: md
- Font: sm, weight-medium
- Transition: all 150ms ease

### States
- Default: as described above
- Hover: shift to hover color
- Focus: 2px outline using accent at 50% opacity
- Disabled: opacity 40%, no pointer events
- Loading: replace label with spinner, maintain dimensions

### Never
- Never use text-primary on accent background (contrast failure)
- Never scale below 32px height (touch target minimum)
- Never omit focus state for accessibility

Write usage rules

A short RULES.md file transforms tokens into decisions:

# RULES.md

## Non-negotiables
- Always use spacing tokens — never hardcode px values
- Primary action per page: accent color only
- Body text: always text-primary or text-secondary, never custom values
- Minimum contrast ratio: 4.5:1 for body text, 3:1 for large text

## Typography
- Display headings: font-display, weight-semibold, 2xl+
- Body copy: font-display, weight-regular, base
- Code and technical content: font-mono always

## Spacing rhythm
- Section gaps: 3xl
- Component gaps: xl
- Element gaps: md or lg
- Fine details: xs or sm

## Color application
- Backgrounds layer: background → surface → card (never skip layers)
- Accent is for primary CTAs and active states only
- Success/warning/error: only for status indicators, never decoration

Wire vault.yaml

name: brand-core
version: 1.0.0
type: design-systems
title: "Brand Core — Dark UI Design System"
description: "A complete dark UI design system with color tokens, spacing scale, typography, and component specs. Install once — Claude Code generates on-brand UI from that moment forward."
price: 19.99
tags:
  - design-system
  - dark-ui
  - tokens
  - components
  - brand

Test locally

Place the package in your ./myclaude-products/ directory and start a new Claude Code session:

$ mkdir -p ./myclaude-products/brand-core
$ cp -r . ./myclaude-products/brand-core/

Ask Claude Code to build a card component. Does it use your accent color? Your spacing scale? Your border radius tokens? If yes, your system is working. If Claude reaches for arbitrary values, review your token file for clarity.

Publish

$ myclaude validate
$ myclaude publish

Your Design System is now live on MyClaude.

What makes a great Design System

The difference between a mediocre system and one that earns 5-star reviews:

The most valuable design systems have opinions. Buyers aren't paying for another generic neutral palette — they're paying for a decision-making framework they can trust. Make choices. Explain them. Stand behind them.

Advanced: Dark and light mode tokens

Structure your tokens file with explicit mode support:

colors:
  modes:
    dark:
      background: "#0a0a1a"
      surface: "#1a1a2e"
      text-primary: "#eaeaea"
    light:
      background: "#fafafa"
      surface: "#ffffff"
      text-primary: "#1a1a1a"

  # Semantic aliases (referenced in components — never the raw values)
  semantic:
    page-background: "modes.background"
    card-surface: "modes.surface"
    body-text: "modes.text-primary"

This structure lets Claude Code generate mode-aware components that switch correctly.

Common questions

Do I need to know CSS to build a Design System?

No. Token files and component specs are written in plain YAML and Markdown. If you know what your brand colors are and how your buttons should look, you have everything you need.

What file formats does Claude Code understand best?

YAML and Markdown work excellently. JSON is also supported. The key is clarity and consistent naming — Claude Code reads for meaning, not syntax.

Can I sell a design system based on an existing framework like Tailwind?

Yes. A Tailwind-based design system that maps your brand decisions to Tailwind classes is a legitimate and useful product. Be clear in your description what the buyer needs installed.

How often should I update my system?

Version your tokens. Buyers expect 1.0.0 → 1.1.0 upgrades to be non-breaking. Reserve 2.0.0 for breaking changes and document them clearly in your changelog.

Related pages

• Product Categories — all 12 categories compared
• Publishing Guide — the basics of publishing any product type
• vault.yaml Reference — every field explained
• Monetization — pricing strategies for paid products