Help us improve
Share bugs, ideas, or general feedback.
From cm
Extracts design tokens from existing sites and generates consistent UI design systems using Shadcn UI, Halo, Lunaris, or Nitro kits with MCP servers.
npx claudepluginhub tody-agent/codymaster --plugin cmHow this skill is triggered — by the user, by Claude, or both
Slash command
/cm:cm-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Establish a robust, stable, and consistent UI Design System by either extracting tokens from an existing source (Harvester mode) or scaffolding a fresh system based on premium Kits (Shadcn, Halo, Lunaris, Nitro). Output a strictly formatted `DESIGN.md` artifact ready for UI generation.
Creates or extracts DESIGN.md visual design systems from scratch, a URL, or a codebase — documenting tokens, components, and style rules for AI agents to reproduce.
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"
Designs UI/UX systems with style guides, design tokens, component specs, and page layouts. Collects product type, stack, and deliverables before producing recommendations.
Share bugs, ideas, or general feedback.
Establish a robust, stable, and consistent UI Design System by either extracting tokens from an existing source (Harvester mode) or scaffolding a fresh system based on premium Kits (Shadcn, Halo, Lunaris, Nitro). Output a strictly formatted DESIGN.md artifact ready for UI generation.
Load Design Taste (if .cm/design-taste.json exists): Before proposing tokens, call topTaste(cwd, 'color'), topTaste(cwd, 'font'), topTaste(cwd, 'layout') from src/utils/design-taste.ts. Bias selections toward approved entries; avoid rejected. Decay is 5 %/week so stale taste fades — trust live weights. After the user accepts or rejects a palette, call recordTaste(cwd, { dimension, value, verdict }) so future runs improve.
Clarify Intent: Determine if the user wants to extract an existing design from a URL/Image or create a new system from a specific UI Kit.
Harvester Extraction (If applicable):
Pre-built UI Kits (Default Mode):
skills/cm-design-system/resources/ into the project's .stitch/DESIGN.md or continue directly in cm-design-system:
shadcn-default.md (Use this as the absolute DEFAULT if no style is specified)halo-modern.md (Premium dark mode, glowing accents)lunaris-advanced.md (Tech-focused, monospaced fonts)nitro-enterprise.md (High-contrast, data-dense enterprise)Pencil.dev & Google Stitch MCP:
DESIGN.md with <!-- STITCH_TOKENS_START --> JSON block to feed design tokens into Google Stitch's AI generator via cm-design-system..pen design files directly:Pencil.dev Workflow:
1. open_document() → Create/open a .pen file
2. get_guidelines("web-app") → Load design rules for target platform
3. get_style_guide_tags() → Browse available style tags
4. get_style_guide(tags) → Get color palette, typography, spacing
5. set_variables() → Apply design tokens as .pen variables
6. batch_get(reusable:true)→ Read existing design system components
7. batch_design() → Insert/update components and screens
8. get_screenshot() → Verify visual output
Mapping DESIGN.md tokens to .pen variables:
mcp_pencil_set_variables({
filePath: "design-system.pen",
variables: {
"primary": { "type": "color", "value": "#3B82F6" },
"secondary": { "type": "color", "value": "#10B981" },
"surface": { "type": "color", "value": "#FFFFFF" },
"text-primary": { "type": "color", "value": "#0F172A" },
"border-radius": { "type": "number", "value": 8 },
"spacing-sm": { "type": "number", "value": 8 },
"spacing-md": { "type": "number", "value": 16 },
"spacing-lg": { "type": "number", "value": 32 }
}
})
cm-design-system.view_file or grep_search on .pen files. Always use mcp_pencil_batch_get.Export Custom DESIGN.md (Extraction Mode):
DESIGN.md document.<!-- STITCH_TOKENS_START --> and <!-- STITCH_TOKENS_END -->.Input: "Can you extract the design system from stripe.com to use in our project?" Action:
DESIGN.md including the Stitch STITCH_TOKENS JSON block with these tokens.DESIGN.md. Would you like me to continue the cm-design-system flow to generate components?"Input: "Create a modern dark-mode design system using Halo UI kit." Action:
DESIGN.md with STITCH_TOKENS.Input: "Create a design system for our SaaS dashboard directly in Pencil.dev." Action:
.pen file: mcp_pencil_open_document({ filePathOrTemplate: "new" }).mcp_pencil_get_guidelines({ topic: "design-system" }).mcp_pencil_get_style_guide_tags() → mcp_pencil_get_style_guide({ tags: ["saas", "dashboard", "modern", "website", "clean"] }).mcp_pencil_set_variables() using the style guide's recommendations.mcp_pencil_batch_design().mcp_pencil_get_screenshot().design-system.pen. Would you like me to build screens using these components?"cm-design-system flow.<!-- STITCH_TOKENS_START --> wrapper in DESIGN.md. It is critical for Stitch MCP parsing.cm-ux-master heuristics).view_file or grep_search on .pen files. Always use Pencil MCP tools (batch_get, batch_design, etc.).