cf-design

Solid

UI 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.

Web & Frontend 3 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 82/100

Stars 20%
20
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# /cf-design > **CLI Requirement:** NONE — Works without `coding-friend-cli`. See [CLI requirements](../../../docs/cli-requirements.md) for the full matrix. Design UI with intent and consistency: **$ARGUMENTS** ## Modes Three modes, triggered by the first word of `$ARGUMENTS`: | Invocation | Mode | Purpose | | ----------------------------------- | ---------- | ------------------------------------------------------------------------------- | | `/cf-design scan [path]` | **Scan** | Read existing UI files → extract design patterns → save to `docs/DESIGN.md` | | `/cf-design [description]` | **Design** | Implement new UI from the user's description, using existing patterns as a base | | `/cf-design modify [what] -- [how]` | **Modify** | Change a specific UI element, enforcing consistency with existing patterns | If `$ARGUMENTS` is empty, ask the user which mode they want and what their goal is. --- ## Step 0: Custom Guide Custom guide — auto-loaded below (if the raw command shows instead of its output, run it yourself): ```! bash "${CLAUDE_PLUGIN_ROOT}/lib/load-custom-guide.sh" cf-design ``` If output is non-empty, integrate returned sections: `## Before` → before first step, `## Rules` → apply throughout, `## After` → after final step. ## Step 0.5: Load Existing Design Context Run: `bash "${CLAUDE_PLUGIN_ROOT}/skills/cf-design/scripts/...

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

Web & Frontend Solid

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).

6 Updated today
greglas75
Web & Frontend Listed

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).

12 Updated today
pigorv
AI & Automation Listed

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.

2 Updated today
jasonm4130