Home / All Skills / Design & Motion / design-style-picker
Design & Motion · daymade/claude-code-skills

design-style-picker

Batch-generate and compare visual design directions so a user can choose the style they actually want. Use when the user says they cannot describe an abstract visual style, asks for many style options, wants to choose from generated UI/design-system images, rejects outputs as too colorful/too dead/too generic, or needs an existing UI/design system evolved without discarding current assets.

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessWrite FileDual-pass Audit
Author daymadeGitHub daymade/claude-code-skills ↗Stars 1385License MIT(仓库根 LICENSE;GitHub API spdx MIT)Commit d5c4678cb5
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Pure prompt-orchestration skill: No scripts, files, or dependencies. The entire mechanism consists of the workflow and prompt templates provided to the agent in SKILL.md and references/selection-playbook.md, executed via the host's existing image generation and file reading capabilities.

daymade-codex/design-style-picker/SKILL.md
Use this skill to turn vague taste into concrete visual choices.
The directory contains only SKILL.md + agents/openai.yaml + references/selection-playbook.md. 'Generating images' is performed by the agent invoking host image tools; the SKILL solely enforces prompt patterns and process discipline.

Core rule: When the user cannot clearly describe an abstract style, stop probing and instead generate a set of structured visual artifacts (a matrix) for the user to identify—trading 'visible choices' for 'descriptive vocabulary'.

daymade-codex/design-style-picker/SKILL.md
Do not ask the user to describe an abstract style if they already said they cannot. Generate comparable visual evidence, let them pick, then implement from the selected references.
'Generate A Matrix, Not Minor Variants' is the methodological backbone (expanded in the next point).

Dual-axis matrix design: Vertical ladder = large single-dimension step changes (e.g., color intensity 20/35/50/65/80); Horizontal axis = distinct organization strategies (data-driven color, brand spine, warm product imagery, scenario modules, governance-led layout). If two images look like siblings, one must be regenerated.

daymade-codex/design-style-picker/SKILL.md
Vertical ladder: one dimension changes by large steps, such as color intensity 20/35/50/65/80.
selection-playbook.md specifies the exact initial round composition: 5 vertical ladder images + 5 horizontal strategy images + 1–2 boundary samples (overload/underload).

Treat color as a system: 'Less colorful' does not mean desaturation, but reducing equal-weighted focal points—assigning colors to distinct roles (broad architectural zones / data visualization semantics / high-signal brand accents / neutral baseline components); create boundary samples to make 'too much' visible.

daymade-codex/design-style-picker/SKILL.md
"Less colorful" does not mean black-and-white. It usually means fewer competing focal points.
The playbook provides organization rule examples: 'Data colors live in charts, legends...', 'Brand red lives in logo, active spine, must-block governance...', contrasting them with Bad organization anti-patterns (one saturated color per tag/row/icon, etc.).

Implementation extracts 'principles, not pixels' from selected images: Color roles, layout density, focal hierarchy, component treatments, imagery usage, and governance placements are explicitly decoupled and merged using file naming conventions ('Use H02 for color placement and V04 for palette intensity'), preserving existing UI scope.

daymade-codex/design-style-picker/SKILL.md
Extract principles, not pixels: color roles, layout density, focal hierarchy, component treatment, image use, governance/data placement.
The playbook's Implementation Handoff mandates writing a fusion declaration ('I will take <file A> for <specific attribute> and <file B> for...') prior to execution, followed by post-render visual QA.

An 'evolutionary' stance that reuses existing assets: First collect existing UI, screenshots, tokens, CSS variables, component names, and brand cues as the baseline vocabulary; fabricating unrelated fresh concepts from scratch that overwrite the current state is forbidden; preserve everything unless the user explicitly asks to discard it.

daymade-codex/design-style-picker/SKILL.md
Preserve any existing UI, assets, tokens, layout, brand cues, and domain context unless the user explicitly asks to discard them.
The generation prompt pattern opens with: 'This is an evolution of the existing UI/design system, not a replacement. Preserve these assets: ...'.

2Core Capabilities

01Translating ambiguous aesthetic tastes into a structured multi-option matrix for user selection
02Dual-axis comparison across a vertical ladder (large single-dimension steps) and horizontal organizational strategies
03Systematic color role allocation along with 'underloaded / just right / overloaded' boundary samples
04Pre-generation asset harvesting (inspecting screenshots/tokens/component names/branding) encapsulated into an evolutionary generation prompt pattern
05Candidate self-critique (annotated as too dead / too colorful / too generic / closest) presented with file paths and decision notes
06Explicit merge-based implementation of selected designs (attributing specific properties by file name) plus post-render visual QA

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
  • 网络端点: Declared external network access: None (the skill itself contains zero network code; image generation relies on host tools/APIs within the host capability surface, not packaged within this skill)
  • 本地工作目录: File read/write and artifact output: None (only instructs the agent to read existing UI/screenshots and execute generation/implementation; defines no write paths)
Audit Notes: Pure prompt orchestration: No script execution, no outbound network access, no credential retrieval, and no local disk writes (zero code files in the skill itself). Image generation runs via host-provided tools whose network/API key surface is determined by the host environment, not this skill. Considerations are limited to conversational steering (sample evaluation labels may anchor user choices) and host tool permission boundaries.

5Second-Pass Verification

  • [ok] 无脚本/可执行代码 — 目录仅 3 文件:SKILL.md、agents/openai.yaml、references/selection-playbook.md,无 scripts/。
  • [ok] SKILL 与 playbook 一致性 — playbook Session Pattern 8 步与 SKILL Workflow 1-6 对应;色彩阶梯 20/35/50/65/80/Overload 与 SKILL 'color intensity 20/35/50/65/80' 一致。
  • [ok] 无网络/凭证/写盘代码 — 三文件均为 markdown/yaml 文本,token 扫描零网络与密钥模式。
  • [unlocatable] 图像生成实现位置 — SKILL 只说 'Generate comparable visual evidence' 与给 prompt pattern,不声明用哪个生成后端——实现落在宿主工具,源码内无法定位生成 API。
  • [ok] 流程有效性(矩阵是否真能逼出口味边界) — 属方法论主张,无法代码验证;SKILL 内嵌 Lessons 与反例显示其基于真实迭代沉淀。

6Verdict & Scenarios

  • Counter-intuitive design: Avoids interrogating users when they cannot articulate visual styles, opting for batch options to point and identify instead
  • Matrix discipline (large steps + regenerating siblings) ensures candidates are visually distinct at a glance
  • Color role architecture and boundary samples visualize 'too much', reducing back-and-forth revisions
  • Evolutionary implementation (preserve by default + explicit merge naming) protects existing design systems from being discarded
  • Best for: Ideal for rapid convergence during periods of visual style ambiguity: when a design system, landing page, business UI, or component library requires multiple visually distinct directions; when evolving an existing UI (preserving assets while refining color, density, or focal hierarchy) rather than starting from scratch; and in host environments supporting batch image output (Codex image output, concurrent generation).
    Not for: Not suitable for interaction problems where decisions hinge on click behaviors or state transitions (use interaction-design-board instead); not suitable for text-only environments where the host lacks image generation capabilities; not suitable for implementation tasks that already have precise style specs and only require execution (over-generation); not suitable when the final deliverable requires a single deterministic design rather than multi-option selection.
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload design-style-picker.tar.gz
    sha256: 7a6d0b59f417923b…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d5c4678cb5.