Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Design Style Picker

Turns vague visual taste into a batch of comparable design options so the user can point at what they actually want.

Design & UIIntermediate★ 1,323⑂ 212AI score 7/10Last updated: Aug 8, 2026

What it does

  • Stops the guessing game: instead of asking for an abstract style description, it generates a structured matrix of visual options for the user to pick from.
  • Uses two axes — a vertical ladder (e.g. color intensity 20/35/50/65/80) and horizontal directions (data-driven color, brand spine, warm product imagery, scenario modules, governance-led layout).
  • Collects existing assets first (design tokens, CSS variables, component names, screenshots, brand cues) and treats the work as an evolution, not a replacement.
  • Manages color by role — zones, data viz, rare brand/risk accents, neutral components — plus deliberate overload-boundary samples so "too much" becomes visible.
  • Self-reviews generated images, labels which are too dead / too colorful / too generic, then implements the chosen direction by extracting principles and fusing references.

Who it's for

  • Product designers and frontend developers choosing a direction for a design system, landing page, or dashboard.
  • Anyone who keeps getting fuzzy feedback like "too colorful" or "needs more weight".
  • Teams with an image-generation tool wired into Claude Code who want fast style exploration.

Examples

  1. "I can't describe the style I want" → generate 5 intensity steps × 4 organization directions and choose from the grid.
  2. Make an existing UI feel more authoritative without discarding current tokens → compare evolution variants that preserve components.
  3. After selection: "use H02 for color placement and V04 for palette intensity", implement in the real UI, then run rendered visual QA.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/daymade/claude-code-skills/HEAD/design-style-picker/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the design-style-picker folder from the GitHub repo daymade/claude-code-skills into my ~/.claude/skills/design-style-picker/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/daymade/claude-code-skills.git && mkdir -p ~/.claude/skills && cp -r claude-code-skills/design-style-picker ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/daymade/claude-code-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r claude-code-skills/design-style-picker ~/.claude/skills/
  5. Confirm references/selection-playbook.md came along with it.
  6. Make sure an image-generation tool or MCP server is connected in Claude Code — the workflow depends on batch image generation.
  7. Restart Claude Code and try: "Generate several visual style options for our UI so I can pick one."
View source on GitHub ↗License: MIT