cf-designlisted

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.
dinhanhthi/coding-friend · ★ 2 · Web & Frontend · score 71

Install: claude install-skill dinhanhthi/coding-friend

# /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 Run: `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/load-design-context.sh"` - If `DESIGN.md` exists: read it now and keep it in working memory for all su