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 1 forks Updated yesterday 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
6 months ago
Last Updated
yesterday
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

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.

5 Updated yesterday
atretyak1985
Web & Frontend Listed

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 4 days ago
greglas75
Web & Frontend Listed

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.

5 Updated 5 days ago
jasonm4130