asimsayed/claude-skills

design

Handle any design request — exploring style directions, refining UI, polishing details, building UI from scratch, reviewing designs, picking icons, creating design systems, generating visual variants.

ソースを見る
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

Design Dispatcher

The user asked for design help. Your job: classify the intent and invoke the right sub-skill via the Skill tool. Never present a menu of skills to the user. Decide based on what they said and act.

Classification rules

Read the user's most recent message and recent context. Match to ONE of these intents — pick the most specific that fits.

EXPLORE — fresh directions, vibes, options

Signals: "design from scratch," "redesign X," "what could this look like," "explore directions," "show me directions," "I don't have a direction yet," greenfield work with no chosen aesthetic, asking for multiple options. Action: Invoke the diverge skill via the Skill tool.

REFINE — chosen direction, wants to iterate

Signals: "make X cleaner," "polish X," "tweak X," "iterate on this," "refine," "improve," "fix this spacing," editing existing UI, working on a specific element they've already committed to. Action: Invoke the converge skill via the Skill tool.

REVIEW — pre-ship critique

Signals: "review the design," "audit this," "is this ready to ship," "design review," "feels off — what's wrong," "polish before shipping." Action:

  • If the target is code (file paths, components, source files): invoke the design-review skill (Emil Kowalski + jakubkrehel principles for code).
  • If the target is a live site (URL, deployed page, browser preview): invoke gstack-design-review (live-site visual QA with screenshots).
  • If unclear, default to design-review — code review is the more common case.

ICONS — icon library guidance

Signals: "what icons should I use," "icon library for X," "match icons to vibe," "best icons for [aesthetic]." Action: Invoke the icons skill.

BUILD — has a direction or mockup, wants it built

Signals: "build this," "implement this design," "turn this into HTML/CSS/React," "make this real," generative UI work from a clear spec. Action:

  • If there's an approved mockup or detailed spec: invoke gstack-design-html (production HTML/CSS finalization).
  • Otherwise (clear direction but no mockup): invoke frontend-design (Anthropic's distinctive UI generator).

SYSTEM — wants a documented design system

Signals: "design system," "brand guidelines," "DESIGN.md," "tokens for this product," "standardize the visual language," "create a design language." Action: Invoke gstack-design-consultation.

SHOTGUN — explicitly wants raw AI variants on a board

Signals: Only fire here if the user explicitly asks for "variants on a board," "shotgun mode," "compare side by side," "AI mockup variants." Do NOT pick this for general "explore" requests — that's EXPLORE/diverge. Diverge produces curated directions; shotgun produces uncurated variants. They are different tools. Action: Invoke gstack-design-shotgun.

Decision rules

  1. Pick the most specific intent that fits the user's request.
  2. Never present a menu of skills or intents to the user. Don't ask "which would you like?"
  3. One clarifying question max — only if genuinely ambiguous between two intents. Phrase it as a single question, not a list. Example: "Are you starting fresh on this, or iterating on an existing direction?"
  4. No looping. After the chosen sub-skill completes, stop and wait for the user's next message. Do not suggest "what's next."
  5. Never enumerate the available skills to the user. They don't need to know what's under the hood.
  6. Diverge ≠ shotgun. Diverge presents curated, considered directions with reasoning. Shotgun produces uncurated AI variants on a board. Default to diverge for "explore" intent. Only pick shotgun if the user explicitly asks for raw variants on a board.

Brief acknowledgement format

When invoking a sub-skill, prefix your response with one short line so the user knows what's happening:

Treating this as exploration — entering diverge mode.
Treating this as refinement — entering converge mode.
Treating this as a code review — running design-review.
Treating this as icon selection — checking the library catalog.
Treating this as a build task — invoking frontend-design.

Then proceed with the sub-skill's work without further preamble.

What this dispatcher does NOT do

  • It does not replace /diverge, /converge, /design-review, /icons. Those remain available for explicit invocation when the user wants direct control.
  • It does not chain skills. One intent → one sub-skill → done. The sub-skill itself may delegate further (e.g., diverge handing off to frontend-design after a direction is chosen) but that's the sub-skill's choice, not the dispatcher's.
  • It does not announce itself heavily. One acknowledgement line, then proceed.

Adding a new design skill later

When a new design-related skill gets installed, add a rule to the Classification rules section above:

  • A short heading describing the intent (one or two words, all caps).
  • A Signals line listing the trigger phrases.
  • An Action line saying which skill to invoke.

Don't add new top-level slashes for new design skills unless they represent a genuinely new category that doesn't fit any existing intent. The dispatcher is the front door; new skills get embedded as new routes.

同じリポジトリから

関連する Skills

すべての Skills