Back to Details

tool-design-style-selector

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Style Selector

设计风格选择器

Scan project, identify intent, recommend and deploy the most suitable design system style.
扫描项目，明确需求意图，推荐并部署最合适的design system风格。

Style Presets

风格预设

This skill can either:
  1. Preserve existing style and extract it into 
    design-system.md
    (recommended when the project already looks “mature”), or
  2. Apply one of 30 preset styles and generate 
    design-system.md
    .
Style files live in 
styles/
and are indexed in:
  • styles-index.md
     (ID → filename → theme)
Quick examples of presets:
  • 05-saas
    (B2B tools, dashboards)
  • 08-swiss-minimalist
    (clean hierarchy, corporate)
  • 13-neo-brutalism
    (bold, indie/creative)
  • 19-minimal-dark
    (focus mode, dev tools)
本技能支持两种模式：
  1. 保留现有风格并将其提取至
    design-system.md
    （当项目视觉风格已趋于成熟时推荐使用），或
  2. 应用30种预设风格之一并生成
    design-system.md
    。
风格文件存储于
styles/
目录，索引信息见：
  • styles-index.md
    （ID → 文件名 → 主题）
预设风格快速示例：
  • 05-saas
    （B2B工具、仪表盘）
  • 08-swiss-minimalist
    （简洁层级、企业风）
  • 13-neo-brutalism
    （大胆醒目、独立创意风）
  • 19-minimal-dark
    （专注模式、开发工具）

Execution Flow

执行流程

Step 1: Scan Project

步骤1：扫描项目

Scan the following files to identify project intent:
- README.md / README
- package.json / pyproject.toml / Cargo.toml
- Existing Claude.md / agent.md / AGENTS.md
- src/ or app/ directory structure
- Existing style files (tailwind.config, globals.css)
- Brand assets (logo, favicon)
扫描以下文件以明确项目需求意图：
- README.md / README
- package.json / pyproject.toml / Cargo.toml
- 现有Claude.md / agent.md / AGENTS.md
- src/ 或 app/ 目录结构
- 现有样式文件（tailwind.config、globals.css）
- 品牌资产（logo、favicon）

Step 2: Analyze Intent

步骤2：分析意图

Extract the following information:
  • Project Type: SaaS/corporate site/e-commerce/blog/tool/game/...
  • Target Users: Developers/enterprises/consumers/children/professionals/...
  • Brand Tone: Professional/playful/luxury/minimal/bold/...
  • Tech Stack: React/Vue/Next.js/static site/...
  • Existing Design Constraints: Current colors/fonts/component libraries
提取以下信息：
  • 项目类型：SaaS/企业官网/电商/博客/工具/游戏/...
  • 目标用户：开发者/企业/消费者/儿童/专业人士/...
  • 品牌调性：专业/活泼/奢华/极简/大胆/...
  • 技术栈：React/Vue/Next.js/静态站点/...
  • 现有设计约束：当前色彩/字体/组件库

Step 2.5: Existing Style Gate (For existing projects, first determine whether to "preserve style")

步骤2.5：现有风格判断节点（针对已有项目，先判断是否“保留现有风格”）

Purpose: Avoid forcing a reskin on projects that are "already good-looking/already branded", preventing unnecessary UI rework and cognitive costs.
When a repo already has UI, first do a quick "style maturity" assessment and write out evidence (don't be purely subjective):
Signals of mature style (meeting multiple criteria is sufficient):
  • Has clear design tokens: 
    tailwind.config.*
    has fairly complete color/font/radius/shadow/spacing config, or 
    :root
    CSS variables form a system
  • Component library/component style is consistent (buttons/inputs/cards etc. semantic components have high reuse)
  • Layout and spacing are basically consistent across pages (rarely see hardcoded color values/pixels/inline styles)
  • Has brand assets (logo, favicon, brand colors) consistently reflected in UI
Signals of immature/inconsistent style:
  • Same type of components appear in multiple styles (buttons/forms/cards inconsistent)
  • Mixed use of multiple UI libraries/multiple sets of tokens (e.g., multiple Tailwind color schemes + multiple globals.css)
  • Lots of scattered hex values/inline styles/random spacing
Gate Output (required):
  • If you judge "style is mature": default recommend preserve style and extract to design-system.md (don't force switch to preset)
  • If you judge "not mature": proceed to Step 3, recommend from presets and replace
Ask only one question (multiple choice) for user to select strategy:
I've scanned the current project style as [fairly mature / not very unified]. What would you like:
  1. Preserve existing style: I'll reverse-extract current UI into 
    design-system.md
    (document only + light unification, no major reskin)
  2. Use this repo's preset: Select one from 30 styles, replace with unified style (requires more significant UI changes)
  3. Hybrid: Keep the general direction, but use design tokens/component specs to converge inconsistencies (moderate changes)
If selecting 1): Step 3 doesn't need "recommend 30 styles", instead do "extract and generate design-system.md".
目的：避免对已具备良好视觉效果或已完成品牌塑造的项目强行重制风格，减少不必要的UI返工和认知成本。
当仓库已有UI时，先快速进行“风格成熟度”评估并列出依据（避免纯主观判断）：
风格成熟的信号（满足多项即可）：
  • 具备清晰的design tokens：
    tailwind.config.*
    包含完整的色彩/字体/圆角/阴影/间距配置，或
    :root
    CSS变量形成体系
  • 组件库/组件风格一致（按钮/输入框/卡片等语义化组件复用率高）
  • 各页面布局和间距基本统一（极少出现硬编码颜色值/像素值/内联样式）
  • 品牌资产（logo、favicon、品牌色）在UI中得到一致体现
风格不成熟/不一致的信号：
  • 同类组件呈现多种风格（按钮/表单/卡片样式不一致）
  • 混用多个UI库/多套tokens（例如：多套Tailwind配色方案 + 多份globals.css）
  • 存在大量零散的十六进制颜色值/内联样式/随机间距
判断节点输出（必填）：
  • 若判断“风格成熟”：默认推荐保留现有风格并提取至design-system.md（不强制切换为预设风格）
  • 若判断“风格不成熟”：进入步骤3，从预设风格中推荐并替换
仅需向用户提出一个选择题以选择策略：
我已扫描当前项目风格，评估结果为[较为成熟 / 不够统一]。请问你希望：
  1. 保留现有风格：我会将当前UI反向提取至
    design-system.md
    （仅文档化 + 轻度统一，无大规模重制）
  2. 使用仓库预设风格：从30种风格中选择一种，替换为统一风格（需要较大幅度的UI修改）
  3. 混合模式：保留整体方向，但使用design tokens/组件规范统一不一致的地方（中等幅度修改）
若选择1)：步骤3无需“推荐30种风格”，改为“提取并生成design-system.md”。

Step 3: Recommend Styles

步骤3：推荐风格

Based on analysis results, recommend Top 3 best matching styles:
Recommendation #1: [Style Name] ⭐ Best Match
- Match Score: 95%
- Reason: ...
- Fit Points: ...

Recommendation #2: [Style Name]
- Match Score: 85%
- Reason: ...

Recommendation #3: [Style Name]
- Match Score: 75%
- Reason: ...
基于分析结果，推荐Top3最匹配的风格：
推荐1：[风格名称] ⭐ 最佳匹配
- 匹配度：95%
- 理由：...
- 适配点：...

推荐2：[风格名称]
- 匹配度：85%
- 理由：...

推荐3：[风格名称]
- 匹配度：75%
- 理由：...

Step 3.5 (Default when installed): Enrich tokens via 
tool-ui-ux-pro-max

步骤3.5（默认安装后执行）：通过
tool-ui-ux-pro-max
丰富tokens

If 
tool-ui-ux-pro-max
is installed, run it by default to make 
design-system.md
more concrete (palette + typography + UX constraints), instead of relying on a single preset text blob. Only skip if the user explicitly asks to keep the spec minimal, and record the reason.
Recommended searches (pick 1–3 results per category, then synthesize into 
design-system.md
):
bash
undefined
若已安装
tool-ui-ux-pro-max
，默认运行该工具使
design-system.md
更具体（包含调色板 + 排版 + UX约束），而非仅依赖单一预设文本内容。仅当用户明确要求保持规范极简时跳过此步骤，并记录原因。
推荐搜索（每个类别选择1-3个结果，然后整合到
design-system.md
中）：
bash
undefined

Typography pairing (heading + body + CSS import)

排版搭配（标题 + 正文 + CSS导入）

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<brand tone keywords>" --domain typography
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<品牌调性关键词>" --domain typography

Color palette (primary/secondary/CTA/background/text/border)

调色板（主色/辅助色/CTA色/背景色/文本色/边框色）

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<product type keywords>" --domain color
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<产品类型关键词>" --domain color

UX / accessibility guardrails (avoid common “looks good but feels broken” issues)

UX / 无障碍设计准则（避免常见“看起来不错但体验糟糕”的问题）

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "accessibility" --domain ux python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "accessibility" --domain ux python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "animation" --domain ux

Stack-specific implementation constraints (pick the actual project stack)

技术栈特定实现约束（选择项目实际使用的技术栈）

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "layout responsive" --stack nextjs
undefined
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "layout responsive" --stack nextjs
undefined

Step 4: User Confirmation

步骤4：用户确认

  • Present recommendation reasons
  • Allow user to select or request more options
  • Proceed to deployment after confirmation
  • 展示推荐理由
  • 允许用户选择或请求更多选项
  • 确认后进入部署环节

Step 5: Deploy Design System

步骤5：部署Design System

1. Copy selected style file to project
2. Rename to design-system.md
3. Placement location:
   - Primary: Project root directory
   - Alternative: docs/ or .cursor/ or .claude/
4. If Claude.md / agent.md exists:
   - Add reference at the top of that file
   - Explain that design-system.md is the unified design constraint
If "preserve existing style" was selected in Step 2.5: "deployment" here is not copying a preset, but writing the tokens, typography rules, component style constraints you extracted from code/styles into 
design-system.md
(also placed at root).
1. 将选定的风格文件复制到项目中
2. 重命名为design-system.md
3. 放置位置：
   - 首选：项目根目录
   - 备选：docs/ 或 .cursor/ 或 .claude/
4. 若Claude.md / agent.md已存在：
   - 在该文件顶部添加引用
   - 说明design-system.md是统一的设计约束文件
若在步骤2.5中选择了“保留现有风格”：此处的“部署”并非复制预设文件，而是将你从代码/样式中提取的tokens、排版规则、组件风格约束写入
design-system.md
（同样放置在根目录）。

Step 6: Implement UI/UX According to design-system.md (Execute by Default)

步骤6：依据design-system.md实现UI/UX（默认执行）

The goal of this step is: Make design-system.md actually "live in the UI", not just generate a document and stop.
Execution requirements:
  • First produce an executable UI/UX transformation plan (clearly specify which pages/components, scope of changes, acceptance criteria, how to rollback).
  • Then implement according to plan (when involving large-scale visual/layout/interaction changes, must have confirmation points).
Recommended implementation order (start from "where it can best align the style"):
  1. Design tokens / global style entry: Fonts, colors, spacing, radius, shadows, basic typography (prioritize centralizing in one place, avoid scattering).
  2. Component layer: Unify style for buttons, inputs, cards, dialogs and other base components (to be reused by all pages later).
  3. Page layer: Prioritize changing "first impression pages" and "core flow pages" to ensure overall consistency.
Note:
  • If user explicitly states "don't want to change UI, just want documentation", skip this step and record the reason (e.g., write to run's notes/summary).
本步骤目标：让design-system.md真正“落地到UI中”，而非仅生成文档就结束。
执行要求：
  • 先产出可执行的UI/UX改造计划（明确指定哪些页面/组件、修改范围、验收标准、回滚方式）。
  • 然后依据计划实施（涉及大规模视觉/布局/交互修改时，必须设置确认节点）。
推荐实施顺序（从“最能快速对齐风格的部分”开始）：
  1. Design tokens / 全局样式入口：字体、颜色、间距、圆角、阴影、基础排版（优先集中管理，避免分散）。
  2. 组件层：统一按钮、输入框、卡片、对话框等基础组件的风格（供后续所有页面复用）。
  3. 页面层：优先修改“第一印象页面”和“核心流程页面”，确保整体一致性。
注意：
  • 若用户明确表示“不想修改UI，仅需要文档”，则跳过此步骤并记录原因（例如：写入运行笔记/总结）。

Output Format

输出格式

Scan Report

扫描报告

📁 Project Scan Complete

Project Name: [name]
Project Type: [type]
Tech Stack: [stack]
Target Users: [audience]
Brand Tone: [tone]

Existing Design Assets:
- ✅ tailwind.config.js (has color config)
- ❌ No design system documentation
- ⚠️ Claude.md exists (needs integration)
📁 项目扫描完成

项目名称：[名称]
项目类型：[类型]
技术栈：[栈]
目标用户：[受众]
品牌调性：[调性]

现有设计资产：
- ✅ tailwind.config.js（包含色彩配置）
- ❌ 无设计系统文档
- ⚠️ Claude.md已存在（需要集成）

Deployment Confirmation

部署确认

✅ Design System Deployed

File: /design-system.md
Style: [selected style]

Completed:
1. Created design-system.md
2. Added reference in Claude.md

Next Steps (execute by default):
- Generate UI/UX transformation plan based on design-system.md (clarify page/component scope and acceptance criteria)
- After user confirmation, redo UI/UX according to plan to implement design specs (avoid "document exists but UI unchanged")
✅ Design System部署完成

文件：/design-system.md
风格：[选定风格]

已完成：
1. 创建design-system.md
2. 在Claude.md中添加引用

下一步（默认执行）：
- 依据design-system.md生成UI/UX改造计划（明确页面/组件范围和验收标准）
- 用户确认后，依据计划重新设计UI/UX以落实设计规范（避免“文档存在但UI未更新”的情况）

Integration Rules

集成规则

When Claude.md / agent.md Exists

当Claude.md / agent.md已存在时

Add at the top of the file:
markdown
undefined
在文件顶部添加：
markdown
undefined

Design System

Design System

This project uses a unified design system, see design-system.md.
All UI development must follow the design-system.md for:
  • Color specifications
  • Typography rules
  • Component styles
  • Spacing system
undefined
本项目采用统一的设计系统，请参阅design-system.md。
所有UI开发必须遵循design-system.md中的以下规范：
  • 色彩规范
  • 排版规则
  • 组件样式
  • 间距系统
undefined

When No Existing Config Files

当无现有配置文件时

Create design-system.md directly in root directory.
直接在根目录创建design-system.md。

Style File Location

风格文件位置

All style prompt files are located at: 
styles/
File naming: 
[id]-[name].md
(e.g., 
01-monochrome.md
)
所有风格提示文件位于：
styles/
文件命名规则：
[id]-[name].md
（例如：
01-monochrome.md
）

Notes

注意事项

  1. Don't overwrite existing files: If design-system.md already exists, ask whether to replace
  2. Preserve user choice: Recommendation doesn't mean mandatory, user can choose any style
  3. Explain integration method: Clearly explain how to use after deployment
  4. Tech stack adaptation: Adjust specific implementation suggestions based on project tech stack
  1. 不要覆盖现有文件：若design-system.md已存在，询问用户是否替换
  2. 尊重用户选择：推荐不代表强制，用户可选择任意风格
  3. 说明集成方式：明确部署后的使用方法
  4. 适配技术栈：根据项目技术栈调整具体实现建议