关于 design-router
design-router 是面向网站、应用和界面工作的技能，会依据项目类型、领域和审美意图选择设计技能。它通过路由矩阵组合主要与辅助技能，并提供通用规则和执行步骤。
主要功能
- 01识别项目类型、领域与审美
- 02按选择矩阵路由至技能
- 03组合主要与辅助技能
- 04应用通用设计技能规则
- 05定义分步执行流程
适用场景
- 01为 SaaS 仪表盘选择技能
- 02为作品集选择设计方向
- 03为改版工作路由相关技能
- 04规划移动应用界面的技能组合
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-router确认已加载。
详细介绍
Design Router — 智能技能调度器
用途
构建任何网站、应用或界面时，此技能会分析项目上下文，并从技能集合中自动选择最相关的设计技能。
工作原理
编写任何设计代码之前：
- 确定项目类型（落地页、仪表板、作品集、SaaS 等）
- 确定行业／领域（科技、奢侈品、健康、金融、创意等）
- 确定美学意图（极简、大胆、编辑风、原生、高端等）
- 根据下表选择正确的技能组合
路由矩阵
按项目类型
| 项目类型 | 主要技能 | 次要技能 | 选择理由 |
|---|---|---|---|
| SaaS／仪表板 | taste-skill | mrgoonie-design-system、mrgoonie-ui-styling | 变化度 8 + 令牌架构 + shadcn 组件 |
| 落地页 | frontend-design | taste-skill、soft-skill | 大胆的创意方向 + 反平庸规则 + 奢华质感 |
| 作品集／代理机构 | soft-skill | taste-skill、frontend-slides | 15 万美元级代理机构美学 + 反平庸 + 演示文稿 |
| 电子商务 | mrgoonie-ui-ux-pro-max | taste-skill、mrgoonie-brand | UX 指南 + 反平庸 + 品牌一致性 |
| 博客／编辑出版 | minimalist-skill | taste-skill | Notion／Linear 编辑风格 + 注重排版 |
| 数据仪表板 | brutalist-skill | taste-skill、d3js-viz | 工业风数据密度 + 反平庸 + D3 图表 |
| 企业网站 | taste-skill | mrgoonie-brand、mrgoonie-design-system | 简洁专业 + 品牌指南 + 设计令牌 |
| 创意／艺术 | frontend-design | algorithmic-art、canvas-design | 最大创作自由度 + 生成式艺术 + 高端字体 |
| 演示文稿／幻灯片 | mrgoonie-slides | frontend-slides、mrgoonie-design | 幻灯片策略 + HTML 演示文稿 + 设计路由 |
| 移动应用 UI | mrgoonie-ui-ux-pro-max | mrgoonie-ui-styling | 支持 10 种技术栈 + shadcn + 无障碍设计 |
| 开发者工具 | brutalist-skill | taste-skill、minimalist-skill | 终端美学 + 等宽字体 + 简洁 UI |
| 初创公司 MVP | taste-skill | mrgoonie-ui-ux-pro-max、redesign-skill | 快速打造高端效果 + UX 规则 + 升级路径 |
按行业／领域
| 行业 | 美学方向 | 要加载的技能 |
|---|---|---|
| 科技／AI／SaaS | 深色、玻璃质感、精准 | taste-skill（空灵玻璃质感）+ mrgoonie-design-system |
| 奢侈品／时尚 | 编辑风、衬线字体、暖色调 | soft-skill（编辑式奢华风格）+ mrgoonie-brand |
| 健康／养生 | 柔和、通透、粉彩 | soft-skill（柔和结构主义）+ minimalist-skill |
| 金融／金融科技 | 简洁、数据密集、值得信赖 | minimalist-skill + mrgoonie-ui-ux-pro-max + d3js-viz |
| 创意代理机构 | 大胆、不对称、动效丰富 | frontend-design + soft-skill + taste-skill |
| 开发者／开发工具 | 粗粝、等宽字体、终端风 | brutalist-skill + taste-skill |
| 房地产／房地产科技 | 专业、温暖、数据导向 | taste-skill + mrgoonie-design-system + d3js-viz |
| 教育 | 清晰、易访问、结构化 | minimalist-skill + mrgoonie-ui-ux-pro-max |
| 游戏 | 深色、沉浸式、动画丰富 | frontend-design + taste-skill（动效强度 8+） |
| 食品／餐厅 | 温暖、编辑风、摄影 | soft-skill + frontend-design |
按审美意图分类
| 意图 | 技能 | 关键设置 |
|---|---|---|
| “让它看起来很贵” | soft-skill | 双层边框卡片、弹簧物理效果、衬线标题 |
| “让它简洁极简” | minimalist-skill | 暖色单色调、便当盒网格、零渐变 |
| “让它大胆且独特” | frontend-design | 最大程度的创意自由、出人意料的选择 |
| “让它原始且技术感十足” | brutalist-skill | 瑞士排版、CRT 效果、以等宽字体为主 |
| “让它显得专业” | taste-skill | 差异度 6、密度 4、中性色调 |
| “让它具有现代 SaaS 风格” | taste-skill + mrgoonie-design-system | 设计令牌架构、组件规范 |
| “重新设计／升级这个” | redesign-skill | 审查现有设计 → 定向修复 → 润色 |
通用规则（始终适用）
无论路由到哪些技能：
- 始终加载
taste-skill，作为基础的反俗套保护（禁用字体、颜色和设计模式） - 始终加载
output-skill，以避免输出敷衍或截断 - 如果要升级现有项目，检查
redesign-skill - 检查
mrgoonie-ui-ux-pro-max，进行无障碍和 UX 验证 - 为外部工具（Stitch、Figma 提示词）生成 DESIGN.md 时，使用
stitch-skill
执行协议
1. READ the user's request
2. IDENTIFY project type + industry + aesthetic
3. MATCH against routing matrix
4. LOAD the primary skill's full SKILL.md
5. SCAN secondary skills for relevant sections only
6. APPLY universal rules (taste-skill baseline + output-skill)
7. BUILD with the combined intelligence
技能位置
所有技能均位于此仓库的 skills/ 目录中：
- Leon：
taste-skill/、redesign-skill/、soft-skill/、minimalist-skill/、brutalist-skill/、stitch-skill/、output-skill/ - mrgoonie：
mrgoonie-ui-ux-pro-max/、mrgoonie-design/、mrgoonie-design-system/、mrgoonie-ui-styling/、mrgoonie-brand/、mrgoonie-slides/、mrgoonie-banner-design/ - Anthropic：
frontend-design/、canvas-design/、theme-factory/、algorithmic-art/ - 社区：
frontend-slides/、d3js-viz/、web-asset-generator/
评论
支持 Markdown