ui-design-master

v2.1.0

Published

15 days ago

一键安装式 TRAE 视觉设计技能——让 AI 交付惊艳的 UI 界面

0High
0Medium
0Low

lzdml

trae skill ui-design frontend design-system landing-page dashboard

UI Design Master

一个专为 TRAE AI 编程助手设计的视觉设计 Skill——将 Agent 定位为顶级视觉设计工程师，以 HTML/CSS/JavaScript/React 为载体，交付"惊艳"而非仅仅"可用"的界面。
v2.0 重大更新：npx 一键安装 · 智能诊断 · 零门槛上手

快速开始（30 秒上手）

# 第一步：一键安装
npx ui-design-master install

# 第二步：验证安装
npx ui-design-master doctor

# 第三步：重启 TRAE，然后在对话中说：
"帮我设计一个 SaaS 落地页"

就这么简单。 不需要 git clone，不需要手动 cp，不需要理解目录结构。

首次使用？ 直接跳到 5 分钟快速上手指南

安装指南

方式一：npx 一键安装（推荐）

零依赖、零配置、即装即用。 npx 会自动下载并执行安装脚本，无需提前安装任何全局包。

# 全局安装（所有项目可用）
npx ui-design-master install

# 安装到当前项目（仅当前项目可用）
npx ui-design-master install --local

# 强制覆盖已有安装
npx ui-design-master install --force

安装逻辑：

自动检测 TRAE 全局配置目录 (~/.trae/skills/)
将 SKILL.md 复制到目标位置
验证文件完整性
输出安装结果和使用提示

国内用户加速：

# 使用淘宝镜像
npx --registry=https://registry.npmmirror.com ui-design-master install

方式二：npm 全局安装

适合希望离线使用或保持版本管理的用户。

# 安装
npm install -g ui-design-master

# 然后执行安装
ui-design-master install

更新到最新版本：

npm update -g ui-design-master

方式三：手动安装（备选）

当 npx/npm 不可用时使用。

| 平台 | 命令 | |------|------| | macOS / Linux | cp -r .trae/skills/ui-design-master ~/.trae/skills/ui-design-master | | Windows (PowerShell) | Copy-Item -Recurse .trae/skills/ui-design-master $env:USERPROFILE\.trae\skills\ui-design-master |

安装后验证

# 全面诊断
npx ui-design-master doctor

# 快速检查
npx ui-design-master check

5 分钟快速上手指南

第 1 分钟：确认安装成功

在终端执行：

npx ui-design-master doctor

看到 ✓ 一切正常！ 即表示安装成功。重启 TRAE，让技能生效。

第 2 分钟：触发你的第一个设计

在 TRAE 对话框中输入：

帮我设计一个精品咖啡品牌落地页

Skill 会自动走完 7 步工作流，你只需在检查点确认方向。

第 3 分钟：试试方向顾问

如果你不确定想要什么风格，输入：

我不知道要什么风格，帮我推荐几个方向

AI 会从 6 个不同流派中推荐 3 个有对比度的方向供你选择。

第 4 分钟：改进已有设计

贴入你的 HTML 代码或截图，说：

这个页面的设计太普通了，帮我改进

AI 会基于 13 章设计规则进行全面优化。

第 5 分钟：调整配置（可选）

复制配置模板：

cp ui-design-master.config.example.json ui-design-master.config.json

按需修改，比如设置品牌主色、默认风格偏好。详见配置指南。

至此，你已经掌握了 80% 的日常使用场景。

常用场景示例

品牌落地页

帮我设计一个 SaaS 落地页，面向开发者，风格参考 Linear

产品仪表盘

帮我设计一个电商后台仪表盘，数据密集但有呼吸感

幻灯片 / 演示文稿

帮我做一份 10 页的产品发布幻灯片，品牌色是深蓝

交互原型

把这个 Figma 截图转成交互原型，带 hover 和页面切换

设计系统

帮我整理这个页面的设计系统，输出颜色/排版/间距/阴影的 CSS 变量

快速改进

这个 Hero 区域太普通了，帮我重新设计 3 个变体，要大胆一点

CLI 命令参考

| 命令 | 简写 | 说明 | |------|------|------| | npx ui-design-master install | - | 全局安装技能 | | npx ui-design-master install --local | - | 安装到当前项目 | | npx ui-design-master install --force | - | 强制覆盖安装 | | npx ui-design-master check | - | 检查安装状态 | | npx ui-design-master doctor | - | 全面诊断并给出修复建议 | | npx ui-design-master update | - | 查看更新指引 | | npx ui-design-master uninstall | - | 卸载全局安装 | | npx ui-design-master uninstall --local | - | 卸载项目安装 | | npx ui-design-master uninstall --all | - | 卸载所有安装 | | npx ui-design-master config | - | 查看当前配置 | | npx ui-design-master help | - | 显示帮助 | | ui-design-master <cmd> | - | npm 全局安装后使用 |

配置指南

配置文件位置（按优先级）

项目根目录: ./ui-design-master.config.json
全局目录: ~/.trae/ui-design-master.config.json
内置默认值（不配置也完全可用）

主要配置项

| 配置项 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | design.default_color_strategy | string | committed | 色彩策略：restrained / committed / full-palette / drenched | | design.default_register | string | brand | 默认注册表：brand / product | | design.max_fonts | number | 2 | 字体数量上限 | | design.base_spacing | number | 4 | 基础间距单位 (px) | | design.preferred_style | string | null | 偏好风格，如 linear、muji | | design.dark_mode_default | boolean | false | 默认暗色模式 | | brand.primary_color | string | null | 品牌主色（oklch 格式） | | brand.heading_font | string | null | 标题字体 | | brand.body_font | string | null | 正文字体 | | quality.auto_critique | boolean | true | 交付前自动设计批评 | | quality.ai_slop_test | boolean | true | 执行 AI Slop 测试 |

完整配置模板见 ui-design-master.config.example.json。

术语表

掌握这 10 个核心术语，就能流畅使用本技能：

| 术语 | 解释 | 类比 | |------|------|------| | 注册表 (Register) | 设计模式分类：Brand（品牌落地页）vs Product（产品 UI） | 像选餐厅 vs 选厨房——一个是体验，一个是效率 | | 色彩策略 | 颜色的使用激进程度，从 Restrained（克制）到 Drenched（浸透） | 像穿衣——正式场合克制，派对可以大胆 | | 反射拒绝字体 | AI 训练数据中过度使用的 22 种字体（如 Inter、Fraunces） | 像 PPT 默认字体——用的人太多，失去辨识度 | | AI Slop 测试 | 检测设计是否带 AI 生成的"塑料感" | 像图灵测试——看不出来是 AI 做的才算及格 | | 设计批评 | 从 5 个维度对设计打分（哲学对齐/视觉层次/工艺品质/功能性/原创性） | 像代码 Review——不是为了批评，是为了更好 | | 7 步工作流 | 核实事实→理解需求→收集上下文→声明系统→v0 草稿→完整构建→验证批评 | 像盖房子——地基不平后面全歪 | | 方向顾问 | 从 6 个流派中推荐 3 个供选择 | 像请设计师朋友帮你挑风格 | | Color 着色中性色 | 中性色略偏向品牌色而不是纯灰 | 像室内灯光——纯白太冷，加点暖色才舒适 | | 眯眼测试 | 模糊视野下检查层次是否清晰 | 像近视摘掉眼镜——还能分清主次就是好设计 | | 揭示安全 | JS 动效失效时内容仍可见 | 像电梯断电——门至少能手动打开 |

常见问题排查

安装类

A: 三步排查：

确认 TRAE 已完全重启（关闭→重新打开）
运行 npx ui-design-master doctor 诊断
确认文件存在：ls ~/.trae/skills/ui-design-master/SKILL.md

A: 使用淘宝镜像：

npx --registry=https://registry.npmmirror.com ui-design-master install

A: 你的 Node.js 版本过低。升级到 v16+：

# macOS
brew install node
# 或下载安装包: https://nodejs.org

A: 全局安装一次即可，所有项目共用。如果特定项目需要隔离版本，在该项目内执行 npx ui-design-master install --local。

使用类

A: 观察 AI 回复是否包含"设计决策"声明（包含注册表、色彩策略、色板等），如果是，说明技能已激活。

A: 在提示中明确指定风格锚点，如 "参考 Linear 风格"、"MUJI 克制的日式美学"。或使用方向顾问模式："我不知道要什么风格，推荐 3 个"。

A: 创建 ui-design-master.config.json，填入品牌色、字体、Logo URL 等配置。AI 会优先读取配置。

A: 可以。将你的 HTML/CSS 代码贴给 AI，说"帮我校准这个页面的排版系统"或"检查这个页面的色彩对比度"，技能会针对性优化，不会重建。

升级类

npx ui-design-master@latest install --force

npx ui-design-master uninstall          # 卸载全局
npx ui-design-master uninstall --all    # 卸载全部

能力速览

| 维度 | 说明 | |------|------| | 双注册表系统 | Brand（品牌落地页）& Product（产品 UI）两套完整设计规则 | | 四阶色彩策略 | Restrained → Committed → Full palette → Drenched | | 5 个动效配方 | clip-path 文字揭示 / 滚动渐入 / staggered 交错 / 悬停迁移 / CSS scroll-driven | | 15+ 项绝对禁令 | 杜绝 AI 陈词滥调——渐变文字、暖色底、等大卡片网格、幽灵卡片... | | 22 个反射拒绝字体 | 禁止 Fraunces/Inter/DM Sans/Space Grotesk 等训练数据饱和字体 | | AI Slop 两级测试 | 类别反射 + 审美车道反射——确保设计无法被猜出来自 AI | | 27 项交付前检查清单 | 覆盖对比度、行高、CLS、a11y、noscript 回退等 |

设计哲学

这个 Skill 蒸馏了五个来源的精华：

pbakaus/impeccable（22k+ stars, 2026 最先进的 AI 设计 Skill）— Brand/Product 双注册表、字体选择程序、AI Slop 测试
TRAE 内置 frontend-skill — 工作模型（三件事）、精美默认值、Hero 规则
TRAE 内置 frontend-design — 设计思维、远离 AI 塑料感
TRAE 内置 shadcn — shadcn/ui 组件使用纪律
web-design-engineer — 7 步工作流、方向顾问模式、设计批评模板

效果预览

打开 demo/ 目录下的 HTML 文件即可在浏览器中查看 Skill 的输出质量：

| 文件 | 注册表 | 色彩策略 | 风格 | |------|--------|----------|------| | demo/craft.html | Brand | Committed（酸橙绿暗底） | Linear 式克制工具感 | | demo/index.html | Brand | Committed（锈橙红暗底） | 粗野建筑美学 |

技能章节速查

| 章节 | 核心内容 | |------|---------| | 一、设计哲学 | 构建前写三件事 / 核心 6 原则 | | 二、注册表系统 | Brand vs Product 两套规则 | | 三、工作流程 | 7 步 + 3 检查点 / 方向顾问（6 流派） | | 四、色彩系统 | 四阶策略 / 反奶油规则 / 着色中性色 / 物理场景选暗亮 | | 五、排版系统 | 4 步字体选择程序 / 22 个反射拒绝字体 / 标题行高规范 | | 六、布局系统 | 4pt 网格 / Flexbox vs Grid / z-index 语义化 / 卡片规则 | | 七、绝对禁令 | 8 条通用 + 5 条模型特定 = 匹配即拒绝 | | 八、AI Slop 测试 | 一级类别反射 + 二级审美车道反射 | | 九、图像系统 | Unsplash 工作流 / 物理物件搜索法 / alt 文本 | | 十、动效与交互 | 5 个 CSS 配方 / 揭示安全 / 减少动效 / 材质调色板 | | 十一、组件纪律 | shadcn/ui 样式 / 表单 / 组件结构规则 | | 十二、技术规范 | React JSX / CSS a11y / noscript 回退 / 移动端导航 | | 十三、质量保障 | AI Slop 测试 / 石蕊测试 / 眯眼测试 / 27 项检查清单 |

未来优化路线图

v2.0 已完成：npx 安装/doctor 诊断/配置系统/术语表/FAQ。

以下是未来迭代方向：

短期（v2.1 - v2.3）

| 优先级 | 方向 | 描述 | 预期收益 | |--------|------|------|----------| | P0 | 安装进度可视化 | spinner + 进度条 + 彩色输出，替代纯文本 CLI | 降低"是否卡住了"的焦虑 | | P0 | 错误码系统 | 统一错误码（E001-E099），每个码对应明确修复方案 | 排查效率提升 80% | | P1 | 离线安装包 | 打包为 .tgz，支持 npm pack + npm install ./ui-design-master.tgz | 内网/无网络环境下可用 | | P1 | Web 版配置向导 | 交互式网页问卷 → 自动生成 config.json | 非技术用户也能配好 | | P2 | 多语言支持 | SKILL.md 英文版 + i18n 切换 | 覆盖非中文用户 | | P2 | VSCode 扩展 | 边栏面板：一键安装/诊断/触发技能 | IDE 内零切换体验 |

中期（v2.4 - v2.6）

| 优先级 | 方向 | 描述 | 预期收益 | |--------|------|------|----------| | P1 | 性能分析工具 | 检测输出页面的 Core Web Vitals，给出优化建议 | 交付页面即生产可用 | | P1 | 设计令牌导出 | 将 AI 生成的设计系统导出为 Figma Variables / CSS / Token JSON | 设计师可直接使用 | | P2 | 版本快照 | ui-design-master snapshot save/restore 备份/恢复技能版本 | 升级无忧 | | P2 | 兼容性检测矩阵 | 自动检测产出在 Chrome/Firefox/Safari 差异 | 减少浏览器兼容 Bug | | P2 | 交互式 Demo 区 | 在 npx 启动后提供交互式选择：试哪个 demo？用哪个配置？ | 降低选择困难 |

长期（v3.0+）

| 方向 | 描述 | |------|------| | AI 设计配对 | 生成 2-3 个方案供用户 A/B 选择，像真实设计评审 | | 设计债检测 | 扫描已有页面，输出"设计债报告"：哪些颜色/间距/字体偏离系统 | | 组件市场 | 社区贡献符合技能规范的组件（Hero、Pricing、Feature Grid...） | | CLI → GUI | 桌面应用：可视化配置、一键安装、demo 预览、版本管理 | | CI/CD 集成 | GitHub Action：PR 中自动运行设计批评作为质量门禁 |

目录结构

ui-design-master/
├── README.md                          # ← 你在看的文件
├── SKILL.md                           # 技能核心文件（619 行）
├── package.json                       # npm/npx 包配置
├── ui-design-master.config.example.json  # 用户配置模板
├── .gitignore
├── src/
│   ├── cli.js                         # CLI 主入口
│   ├── utils.js                       # 工具函数
│   └── commands/
│       ├── install.js                 # 安装命令
│       ├── check.js                   # 检查命令
│       ├── doctor.js                  # 诊断命令
│       ├── uninstall.js               # 卸载命令
│       ├── update.js                  # 更新命令
│       └── config.js                  # 配置命令
├── .trae/
│   └── skills/
│       └── ui-design-master/
│           └── SKILL.md               # 安装目标文件
├── demo/
│   ├── craft.html                     # Brand 注册表示例
│   └── index.html                     # Brand 注册表示例
└── web-design-engineer/               # 参考风格配方库
    └── references/style-recipes/
        ├── INDEX.md                   # 风格配方索引（26 个配方）
        ├── linear.md
        ├── muji-kenya-hara.md
        └── ...                        # 更多风格配方

致谢

本 Skill 蒸馏融合了以下优秀项目的设计哲学：

pbakaus/impeccable — 反 AI 陈词滥调的标准制定者
TRAE 内置 frontend-skill — 精美默认值的典范
TRAE 内置 frontend-design — 大胆美学方向的倡导者
TRAE 内置 shadcn — shadcn/ui 组件纪律
web-design-engineer — 系统化设计工程方法论