DESIGN.md generation — creates plain-text design system documents that AI agents (Stitch, v0, Lovable, Cursor) read to generate consistent UI. Extracts brand identity from websites, Canva kits, or guided Q&A and produces a standardized 9-section DESIGN.md. Use when: "design system", "DESIGN.md", "generate design tokens", "brand to design system", "UI consistency", "design language", or when the user wants AI tools to produce visually consistent interfaces.
From cksnpx claudepluginhub cardinalconseils/claude-starter --plugin cksThis skill is limited to using the following tools:
references/design-md-examples.mdreferences/design-md-template.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
DESIGN.md is to design agents what CLAUDE.md is to coding agents: a plain-text constitution that ensures visual consistency across AI-generated UI.
A markdown file placed at project root containing a complete design system specification. AI design tools (Google Stitch, v0, Lovable, Cursor) read it to generate consistent components, layouts, and pages without drifting from brand guidelines.
Every DESIGN.md MUST contain these sections in order:
| # | Section | Purpose |
|---|---|---|
| 1 | Visual Theme & Atmosphere | Overall aesthetic direction, mood, metaphors |
| 2 | Color Palette & Roles | Named colors with hex values AND semantic roles (primary, surface, text, accent, status) |
| 3 | Typography Rules | Font families, weight scale, size hierarchy with px/rem, line-heights |
| 4 | Component Stylings | Buttons, cards, inputs, badges, navigation — with specific token values |
| 5 | Layout Principles | Spacing unit, grid, max-width, whitespace philosophy |
| 6 | Depth & Elevation | Shadow scale, border treatments, layering approach |
| 7 | Do's and Don'ts | Concrete guardrails — at least 8 rules per list |
| 8 | Responsive Behavior | Breakpoints, collapsing strategies, mobile-first or not |
| 9 | Agent Prompt Guide | Quick reference for AI tools: example prompts, iteration checklist |
A good DESIGN.md:
When generating a DESIGN.md, use sources in this order:
.kickstart/brand.md — if exists, extract and expand tokens from CKS brand phaseDESIGN.md at project root