cf-design
SolidUI design workflow — scan existing UI patterns, design new UI from a description, or modify existing UI while keeping it visually consistent with the rest of the project. Use when the user wants to: design or redesign a component, page, or section; change colors, typography, spacing, or visual style; understand the project's current design system; add new UI that should match existing patterns; or ensure a UI change doesn't look out of place. Use when the user says things like "make it look like", "update the styling", "redesign this", "match the existing style", "what design patterns does this project use", "extract the design system", "add a dark mode", "make it more minimal/bold/clean", or describes a desired visual outcome. Invoke via /cf-design — helps Claude produce intentional, consistent UI.
Install
Quality Score: 82/100
Skill Content
Details
- Author
- dinhanhthi
- Repository
- dinhanhthi/coding-friend
- Created
- 5 months ago
- Last Updated
- today
- Language
- TypeScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
design
Intent-first UI design with conscious, traceable design decisions. Persists decisions in .interface-design/ for cross-session consistency. Includes domain exploration, design system generation (system.md + system.json), per-component construction with mandatory checkpoints, and craft validation tests. Modes: init, [component], improve [path], extract [path], status, --quick, --dry-run. NOT for auditing existing UI (use zuvo:design-review).
cm-design
Design-System Engineer for claude-monitor. Use whenever a change affects how the UI LOOKS — adding or restyling a component, introducing a badge/pill/tag/chart color, editing any frontend/src/styles/*.css or inline style= colors, or questions like "what color should X be", "style this to match", "add a tag for tool Y". Other skills (cm-pm) defer the styling layer to this skill. Does NOT trigger on non-visual frontend logic (data fetching, routing, state).
claude-design
Use when the user wants to build or prototype something visual with Claude Design — Anthropic's claude.ai/design tool — and needs a strong prompt or spec: a prototype, dashboard, slide deck, landing page, marketing page, or internal-tool UI. Covers both writing a paste-ready design brief to build in the browser and driving Claude Design from Claude Code (the /design and /design-sync commands and the Claude Design MCP server). Do NOT use for building the UI yourself in the repo (that is frontend-design's light path), backend/API/data-model work, or generic Claude API / chat prompt engineering.