Skip to content

README.md

Latest commit

 

History

History
120 lines (82 loc) · 3.68 KB

README.md

File metadata and controls

120 lines (82 loc) · 3.68 KB
Raw

Claude Design Skill

A Claude Code skill that brings golden-ratio design principles to your workflow. Generate wireframes, mockups, color palettes, and design audits — all rendered in Excalidraw, directly in your terminal.

Built on LiftKit's mathematical design system (phi = 1.618), encoded as knowledge rather than a dependency.

Commands

Command What it does
/design [description] Generate wireframes or hi-fi mockups in Excalidraw
/design-review [file] Audit existing code for design system compliance
/design-palette [color] Generate OKLCH color palettes with MD3 tokens
/design-tokens [category] Quick-reference tables for spacing, typography, colors

Requirements

  • Claude Code CLI
  • Excalidraw MCP server (included with Claude Code's built-in MCP servers)

Installation

Clone this repo, then copy the three directories into your project's .claude/ folder:

git clone https://github.com/BFondue/claude-design-skill.git
cp -r claude-design-skill/commands claude-design-skill/agents claude-design-skill/docs your-project/.claude/

Or as a one-liner:

git clone https://github.com/BFondue/claude-design-skill.git /tmp/cds && cp -r /tmp/cds/{commands,agents,docs} .claude/ && rm -rf /tmp/cds

Your project structure should look like:

your-project/
└── .claude/
    ├── commands/
    │   ├── design.md
    │   ├── design-review.md
    │   ├── design-palette.md
    │   └── design-tokens.md
    ├── agents/
    │   └── design-architect.md
    └── docs/design/
        ├── golden-ratio-system.md
        └── excalidraw-patterns.md

That's it. The commands will appear in Claude Code's / menu.

Usage Examples

Generate a wireframe

/design dark login page with email and Google sign-in

Renders a phi-spaced wireframe in Excalidraw with spacing annotations. Add --mockup or say "mockup" for full-color hi-fi output.

Generate a mockup

/design mockup bright SaaS pricing page with 3 tiers

Full-color design with realistic content, proper typography hierarchy, and material effects.

Audit existing code

/design-review src/app/page.tsx

Analyzes your component's spacing, typography, colors, and contrast. Outputs a 0-100 compliance score with specific fix suggestions and an annotated Excalidraw diagram.

Generate a color palette

/design-palette ocean blue

Generates a full MD3 palette (Primary, Secondary, Tertiary, Error, Surface) with phi-derived lightness curves in OKLCH. Renders swatches in Excalidraw and outputs copy-pasteable CSS custom properties.

Quick token reference

/design-tokens spacing
/design-tokens typography
/design-tokens all

Outputs formatted tables with phi scale values, font sizes, line heights, and component dimensions.

Design Principles

Everything derives from phi (1.618):

  • Spacing: 11-step scale from 2px to 110px, each step multiplied by phi
  • Typography: Font sizes step by phi, line heights at 1.0 / 1.272 / 1.618
  • Layout: Golden-ratio column splits (61.8% / 38.2%)
  • Color: OKLCH lightness curves using phi^(-0.35) decay
  • Optical corrections: Asymmetric card padding, icon alignment shifts, circle scaling

Multi-Screen Flows

For complex requests (3+ screens, full user journeys), the skill automatically delegates to the design-architect agent, which:

  1. Creates a user journey flowchart first
  2. Designs each screen with consistent phi spacing
  3. Uses camera panning to walk through the flow
  4. Zooms out for a final overview

License

MIT