📦 Design For Beauty — 设计参考助手

技能文档

使用此技能将真实世界的设计参考转化为可实施的 UI 方向。绑定的参考来自 awesome-design-md，位于 references/design-md/。不要一次全部读取。从目录开始，筛选后再加载最相关的文件。

从这里开始

• 阅读 references/catalog.md。
• 选择 1-3 个参考品牌。
• 只打开匹配的 references/design-md//DESIGN.md 文件。
• 将选定的参考转化为项目特定的决策，而不是盲目克隆。

何时使用此技能

• 用户指定品牌或产品风格：Stripe、Apple、Linear、Notion、Airbnb、Tesla。
• 用户想要视觉方向但不指定品牌：premium minimal、editorial、developer-first、playful productivity、enterprise clean。
• 用户请求重新设计、改版、落地页、仪表盘、设计系统或前端优化。
• 用户想要多个设计方向和实施前的权衡。

路由规则

如果用户指定了品牌

• 将该品牌作为主要参考。
• 直接加载其 DESIGN.md。
• 如果用户指定多个品牌，保留一个主要参考用于字体、间距和布局节奏。
• 最多使用一个辅助参考用于强调色、动效或组件氛围，除非用户明确要求更广泛的混合。

如果用户只给出氛围

• 首先搜索 references/catalog.md。
• 按类别、 tone、密度、对比度和交互风格筛选 2-4 个参考。
• 然后只读取最匹配的 1-3 个 DESIGN.md 文件。

如果项目已有设计系统

• 保留现有产品模式，除非用户明确要求重新品牌。
• 借用氛围、间距、对比度或层级，而不是覆盖整个系统。

合成工作流

1. 提取参考系统

提取对实施真正重要的部分：

• 视觉氛围
• 颜色角色和对比度模式
• 字体层级和字体特征
• 间距、圆角、边框和层级
• 组件行为
• 布局密度和页面节奏
• 做/不做的约束

2. 适配到真实项目

• 保持产品的内容模型、信息架构和可访问性要求。
• 如果参考使用了专有字体或艺术方向，用可用的替代品模拟节奏并说明。
• 保留焦点状态、语义 HTML、可读对比度和合理的触摸目标。
• 适合项目优于像素模仿。

3. 生成可实施的输出

根据任务，将参考转化为以下一项或多项：

• 简洁的设计简报
• 带有权衡的方向简选
• CSS 变量 / 设计令牌
• 组件样式规则
• 实际的前端代码

多参考混合的冲突解决

• 主要参考拥有字体、间距和结构节奏。
• 辅助参考可以影响颜色、图像或动效。
• 第三次要影响应该很小且明确。
• 如果混合开始感觉不协调，简化为一个主要方向。

交付清单

在完成之前，确保你：

• 命名你使用的参考
• 指出主要参考
• 指出任何字体或资源替代
• 保持输出可访问且适合产品
• 保留参考中最强的「做」并避免最大的「不做」

文件地图

• references/catalog.md - 所有参考的人类可读索引
• references/catalog.json - 机器可读索引
• references/design-md//DESIGN.md - 完整设计参考文件

搜索技巧

rg -n "monochrome|gradient|editorial|premium|dashboard|developer|playful" references/catalog.md

示例请求

• "Use Stripe as the base direction for this pricing page."
• "Give me 3 directions for an AI developer tool: one like Linear, one like Vercel, one like Apple."
• "参考 Notion 和 Airtable，做一个更温和的 B2B 数据产品首页。"