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
- 6 months ago
- Last Updated
- yesterday
- Language
- TypeScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
design-implement
Use when a finished visual design has to be re-expressed in this project's stack pixel-accurately — the user says "implement this design", "here's a design handoff", "make this screen match the mockup", "design-implement", pastes a design-tool handoff prompt, or attaches an exported design HTML/zip. Runs a measured workflow: token inventory from a real headless render, reuse-vs-create recon against the project's own components, an approval gate before any code, and a pixel diff against the design as the completion criterion. NOT for ordinary styling requests (tweak a padding, change a colour, fix a hover state), NOT for building UI from a written description with no design artefact, and NOT for visual QA of an already-implemented screen.
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).
frontend-design
Guidance for distinctive, intentional frontend/UI design — aesthetic direction, typography, layout, motion, and copy — when building new UI or reshaping existing UI. Gates by scope before designing: a light/surgical change (one component, one page section, extending an existing design system) gets inline design principles; a wide-sweeping or highly-detailed design (a new page, a new flow, a visual identity, an ambiguous "make it look better") gets a paste-ready goal/layout/content/audience brief to build in Claude Design at claude.ai/design instead of being designed blind in a terminal. Do NOT use for backend/API/data-model work, copy-only edits with no visual change, or a design the user has already fully specified (exact tokens/brand guide supplied) — apply those directly. Do NOT use when the user wants a visual mockup, wireframe, canvas, or artboard to tweak by hand rather than code they will ship — that is the built-in `design` skill. This skill applies design decisions to real code in the repo.