Design Style Picker Skill: Choose by Comparing

What is the design-style-picker skill?

Its core rule is a polite refusal: do not ask someone to describe an abstract style if they already said they cannot. The agent produces comparable visual evidence instead, and the person points at what they like.

The skill sits in the Codex Suite of daymade's marketplace, next to an image gallery, a local Codex helper and an interaction design board. It is invoked by name and has one reference playbook.

The six step workflow

1. Restate what is really being chosen, and keep existing UI, tokens and brand cues.
2. Collect current assets first: rendered screens, design tokens, CSS variables and component names.
3. Generate a matrix with a vertical ladder, such as color intensity at 20, 35, 50, 65 and 80, plus horizontal directions.
4. Treat color as a system with roles, and include safe, middle, high and overload boundary samples.
5. Open the generated images and mark which are too dead, too colorful or closest to the target.
6. Implement from the selection by extracting principles, fusing references explicitly and running visual QA.

Lessons the skill preserves

• Not colorful may mean fewer equal weight color chips, not removing color.
• More weight may mean visual authority and hierarchy, not a dark control room.
• For design system work, do not replace the system with a business dashboard.
• Deliberate boundary samples make too much visible and speed up selection.

Who the design-style-picker skill is for

Best for

• Owners who reject output as too generic or too colorful but cannot say what they want. See also critique.
• Evolving an existing UI or design system without discarding its assets. See also theme-factory.
• Running a selection session where each image gets a short decision note.

Not for

• Building a new artifact from scratch. The final step implements within your existing UI and runs rendered visual QA, but the skill is built around the choosing steps before it.
• Skipping the choosing step. If you would rather the agent decide, see design-taste-frontend.
• Setups with no way to produce images. The skill does not name an image tool, so your agent needs its own.

Use it with UiChemy

Use the skill to settle the look first. Take the chosen direction into Figma, convert the design with UiChemy Figma to WordPress, then refine in Composer. Click Get Started. Keep the fused references, such as which image sets color placement, as your brief.

How to install Design Style Picker Skill: Choose by Comparing

claude plugin install daymade-codex@daymade-skills

1. Add the marketplace

   In Claude Code, run /plugin marketplace add daymade/claude-code-skills. From a terminal, the README gives claude plugin marketplace add https://github.com/daymade/claude-code-skills.

2. Install the Codex Suite

   Run claude plugin install daymade-codex@daymade-skills. The marketplace name is daymade-skills, so use that suffix and not the repository path. The skill is bundle only, with no separate plugin.

3. Invoke it

   Use /daymade-codex:design-style-picker.

4. Codex route

   The README says Codex users can run codex plugin marketplace add daymade/claude-code-skills and then codex plugin add daymade-codex@daymade-skills.

Check that it loaded

Ask your agent to help you pick a style for a dashboard when you cannot describe what you want. With the skill loaded it should restate the target, collect your existing assets and propose a matrix of options.

Read the official instructions on GitHub

Key features

• Generate, do not interrogateWhen a user cannot describe a style, the agent creates comparable options and lets them choose, then implements from the selected references.
• Two axis matrixA vertical ladder changes one dimension by large steps, and horizontal directions change the organizing strategy. Options must look visibly different or one gets regenerated.
• Preserve existing assetsTokens, imagery, sections, components and brand cues are collected first and treated as the starting vocabulary, not discarded for a fresh concept.
• Color as a systemBroad zones carry architecture, data visualization carries multi-color meaning, brand and risk colors are rare emphasis, and routine UI stays neutral.
• Boundary samplesSafe, middle, high and overload samples show exactly where too much begins when the user is tuning color.
• Batch generationThe skill prefers generating many options at once, because the user is waiting to select and not to watch one image at a time.
• Review before presentingThe agent opens the images itself, marks which are likely too dead, too generic or closest to the target, and presents file paths with a short decision note.
• Prompt patternA fixed template states that this is an evolution, lists preserved assets, the axis, a variant name, a color rule, one focal point and what to avoid.
• Fuse the picksAfter selection the agent extracts principles rather than pixels and names what each reference contributes, for example one image for color placement and another for intensity.
• Playbook referenceA selection playbook covers full sessions and the taste corrections users give during image exploration.

Frequently asked questions