claude-design
Claude Design
Use this skill as the single entry point for design-related requests. Route the request to the most relevant reference prompt instead of asking the user to invoke separate design skills. Keep the reference prompts as the source of detailed guidance; this file only decides which reference(s) to load and which tool path to lock.
Tool selection rules
- If the user explicitly chooses a tool, lock to that tool and do not fall back automatically.
- If the user specifies Figma or Pencil, execute design operations through the Pencil MCP toolchain.
- Treat Figma as a design source/context and Pencil MCP as the execution interface.
- If the user explicitly chooses HTML, stay in HTML mode and do not switch back to a design-tool flow.
- If no design-tool connection is available, ask the user before using HTML mode.
Use this exact confirmation when there is no available design-tool connection:
There is no available design-tool connection right now. Do you want me to continue in HTML design mode?
Read references/CONNECTORS.md whenever you need to interpret ~~design tool semantics for this skill.
Routing rules
Default to one best-matching reference. Only combine multiple references when the user request clearly spans multiple design stages. If the request is ambiguous, ask one minimal clarifying question before loading references. Do not expand scope implicitly.
Route mapping
- Design review, critique, screen feedback, mockup feedback →
references/design-critique.md - Accessibility, a11y, WCAG, contrast, keyboard review →
references/accessibility-review.md - Developer handoff, implementation specs, tokens, responsive states →
references/design-handoff.md - Design system audit, documentation, or extension →
references/design-system.md - CTA copy, error messages, empty states, dialog wording, onboarding copy →
references/ux-copy.md - User interviews, research plans, survey design, usability-test planning →
references/user-research.md - Research synthesis, transcript synthesis, support-feedback synthesis, NPS analysis →
references/research-synthesis.md
Combination rules
Default to a single reference. Combine multiple references when the user request clearly spans multiple design stages.
Examples:
- Review + accessibility →
references/design-critique.md+references/accessibility-review.md - Review + handoff →
references/design-critique.md+references/design-handoff.md - Research synthesis + next-round planning →
references/research-synthesis.md+references/user-research.md
Other multi-stage pairings follow the same pattern when the request warrants it.
When combining, keep this order:
- Evaluate or synthesize first
- Apply focused secondary review next
- Produce the delivery artifact last
More from jsonlee12138/prompts
design-patterns-principles
Use when a request asks for software design patterns or design principles, including explanations, comparisons, summaries, or quick reference grounded in local docs.
16vite-tanstack
TanStack (Router/Query/Form/Table) configuration guide for Vite + React projects. Covers Vite plugin setup, main.tsx registration, DevTools configuration, and editor settings. Use when setting up or reviewing TanStack config in a Vite project. Triggers on: vite-tanstack, tanstack config, tanstack router setup, tanstack query setup, tanstack form setup, tanstack table setup.
15eslint-config
Use when configuring ESLint with @antfu/eslint-config for a single project or a monorepo workspace, including flat config setup, shared config packages, commit quality hooks, or migrations from legacy ESLint configs.
10unocss-shadcn
Configure UnoCSS with unocss-preset-shadcn using a semi-automatic, framework-agnostic workflow. Use when setting up or updating UnoCSS + shadcn integration, deciding monorepo vs single-project component destinations, enforcing peerDependencies in monorepos, and requiring shadcn MCP + manual component creation mode.
9brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Turn rough ideas into validated brainstorming/design docs through one-question-at-a-time dialogue, role-based analysis, and explicit user approval. Use when users ask to brainstorm, shape requirements, compare approaches, or produce a planning/design document before implementation.
4solo-ops
>
1