tool-design-style-selector

设计风格选择器

扫描项目，识别意图，推荐并部署最合适的设计系统风格。

风格预设

此技能可以：

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（专注模式、开发工具）

执行流程

步骤 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)

步骤 2：分析意图

提取以下信息：

• 项目类型：SaaS/企业网站/电商/博客/工具/游戏/...
• 目标用户：开发者/企业/消费者/儿童/专业人士/...
• 品牌调性：专业/活泼/奢华/简约/醒目/...
• 技术栈：React/Vue/Next.js/静态网站/...
• 现有设计约束：当前的颜色/字体/组件库

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

目的：避免对“外观已经不错/已有品牌风格”的项目强行换肤，防止不必要的 UI 改造和认知成本。

如果仓库已有 UI，先快速评估其“风格成熟度”，并列出依据（不要仅凭主观判断）：

成熟风格的信号（符合多项即可）：

• 具有清晰的设计令牌：tailwind.config.* 中有较完整的颜色/字体/圆角/阴影/间距配置，或 :root CSS 变量构成了一套系统
• 组件库/组件风格一致（按钮/输入框/卡片等语义化组件的复用率较高）
• 各页面的布局和间距基本一致（很少出现硬编码的颜色值/像素/内联样式）
• 有品牌素材（徽标、网站图标、品牌色），并在 UI 中保持一致

风格不成熟/不一致的信号：

• 同类组件出现多种风格（按钮/表单/卡片不一致）
• 混用多个 UI 库/多套令牌（例如，多套 Tailwind 配色方案 + 多个 globals.css）
• 存在大量零散的十六进制颜色值/内联样式/随意的间距

判断结果（必需）：

• 如果你判断“风格成熟”：默认推荐 保留风格并提取到 design-system.md（不要强行切换到预设风格）
• 如果你判断“风格不成熟”：继续执行步骤 3，从预设中推荐并替换

只向用户提一个问题（多选），让用户选择策略：

我扫描后认为当前项目风格[相当成熟 / 不太统一]。你希望如何处理：

1. 保留现有风格：我会从当前 UI 反向提取并整理到 design-system.md（仅文档记录 + 轻度统一，不进行大幅换肤）
2. 使用此仓库的预设：从 30 种风格中选择一种，并替换为统一风格（需要更大幅度的 UI 改动）
3. 混合方案：保留整体方向，但通过设计令牌/组件规范来统一不一致之处（适度改动）

如果选择 1)：步骤 3 无需“推荐 30 种风格”，而是“提取并生成 design-system.md”。

步骤 3：推荐风格

根据分析结果，推荐最匹配的 3 种风格：

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: ...

步骤 3.5（默认启用）：通过 tool-ui-ux-pro-max 丰富令牌

如果已安装 tool-ui-ux-pro-max，默认运行它，让 design-system.md 的内容更具体（调色板 + 字体排版 + UX 约束），而不是依赖单一的预设文本块。只有用户明确要求保持规范精简时才跳过，并记录原因。

推荐的搜索（每个类别选择 1–3 个结果，然后综合整理到 design-system.md）：

# Typography pairing (heading + body + CSS import)
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<brand tone keywords>" --domain typography

# Color palette (primary/secondary/CTA/background/text/border)
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<product type keywords>" --domain color

# UX / accessibility guardrails (avoid common “looks good but feels broken” issues)
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

步骤 4：用户确认

• 展示推荐理由
• 允许用户选择或要求提供更多选项
• 确认后再进行部署

步骤 5：部署设计系统

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

如果在步骤 2.5 中选择了“保留现有风格”：此处的“部署”不是复制预设，而是将从代码/样式中提取的令牌、排版规则和组件样式约束写入 design-system.md（同样放在根目录下）。

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

此步骤的目标是：让 design-system.md 真正“融入 UI”，而不是只生成文档就停止。

执行要求：

• 首先制定可执行的 UI/UX 改造计划（明确说明涉及哪些页面/组件、改动范围、验收标准以及如何回滚）。
• 然后根据计划实施（涉及大规模视觉/布局/交互改动时，必须设置确认环节）。

建议的实施顺序（从“最适合统一风格的部分”开始）：

1. 设计令牌/全局样式入口：字体、颜色、间距、圆角、阴影、基础排版（优先集中到一处，避免分散）。
2. 组件层：统一按钮、输入框、卡片、对话框及其他基础组件的样式（供之后所有页面复用）。
3. 页面层：优先改造“第一印象页面”和“核心流程页面”，确保整体一致性。

注意：

• 如果用户明确表示“不想改 UI，只想要文档”，则跳过此步骤并记录原因（例如，写入本次运行的 notes/summary）。

输出格式

扫描报告

📁 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)

部署确认

✅ 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")

集成规则

存在 Claude.md / agent.md 时

在文件顶部添加：

## Design System

This project uses a unified design system, see [design-system.md](./design-system.md).

All UI development must follow the design-system.md for:
- Color specifications
- Typography rules
- Component styles
- Spacing system

不存在现有配置文件时

直接在根目录创建 design-system.md。

样式文件位置

所有样式提示词文件都位于：styles/

文件命名格式：[id]-[name].md（例如，01-monochrome.md）

注意事项

1. 不要覆盖现有文件：如果 design-system.md 已存在，请询问是否替换
2. 尊重用户选择：推荐不代表强制要求，用户可以选择任何风格
3. 说明集成方式：明确说明部署后如何使用
4. 适配技术栈：根据项目技术栈调整具体的实现建议