Aesthetic Starter Kits

美学启动套件（Aesthetic Starter Kits）

触发时机

• 优先触发：用户没有提供品牌资料，且需要快速启动设计时，本技能优先于 frontend-aesthetic-direction 触发
• 用户主动询问"有没有现成的风格/模板/套件可选"
• 用户想快速看到结果，不想走完整的 ConceptRoutes 流程

执行内容

提供 10 个预制美学模板，每个都是完整的设计系统。用户选定后直接生成 DesignSystemManifest，跳过 ConceptRoutes 阶段。

10 个预制美学模板

模板 1：编辑极简风（Editorial Minimal）

主张：克制的深色底，纤细的蓝紫强调线，信息密度高但不拥挤。参考 Linear 和 Vercel 的视觉语言。

模板 2：电影感深空（Cinematic Deep Space）

主张：纯黑底，大面积留白，品红与青色对撞。参考 Runway 和 Active Theory 的视觉语言。

模板 3：暖纸手作（Warm Paper Handcraft）

主张：奶油底，手写感衬线，温润但不甜腻。参考 Aesop 和 Stripe Press 的视觉语言。

模板 4：数据密集终端（Data-Dense Terminal）

主张：深色仪表盘，高信息密度，荧光色标注关键数据。参考 Bloomberg Terminal 和 ClickHouse 的视觉语言。

模板 5：粗野撞色（Brutalist Clash）

主张：大胆撞色，零圆角，粗边框，信息爆炸但有秩序。参考 The Verge 和 Balenciaga 的视觉语言。

模板 6：液态玻璃（Liquid Glass）

主张：半透明叠层，柔和模糊，彩色光晕透过玻璃面。参考 Apple Fluid and Glows 和 Arc Browser 的视觉语言。

模板 7：杂志编辑（Magazine Editorial）

主张：多栏排版，大标题压版，衬线与无衬线混排，印刷感。参考 Monocle 和 NYT Magazine 的视觉语言。

模板 8：游戏化活泼（Playful Gamified）

主张：圆润形状，饱和撞色，微动效，手绘涂鸦元素。参考 Headspace 和 Mailchimp Freddie 的视觉语言。

模板 9：日式禅意（Japanese Zen）

主张：大面积留白，灰阶为主，一点朱红，物哀感。参考无印良品和 Kenya Hara 的设计哲学。

模板 10：复古未来（Retrofuture Y2K）

主张：Y2K 美学，霓虹紫绿，像素感，CRT 扫描线，早期互联网怀旧。参考 Y2K Retrofuturism 和早期 PlayStation UI 的视觉语言。

使用规则

1. 优先展示：用户没有明确美学偏好时，展示这 10 个模板让用户选
2. 选定即跳过：用户选定后，直接基于模板生成 DesignSystemManifest，跳过 ConceptRoutes 阶段
3. 支持微调：用户可以基于模板微调（换配色、换字体、调间距），微调后更新 DesignSystemManifest
4. 降级机制：如果 10 个模板都不满足，再降级到 frontend-aesthetic-direction 从零定制
5. 追溯标记：每次使用模板时，在 DesignBrief 中注明"基于 XX 模板"，方便追溯

输出格式

展示阶段

向用户展示 10 个模板的摘要，每个模板包含：模板编号、名称、一句话主张、配色预览、适用场景。

# Aesthetic Starter Kits

以下 10 个预制美学模板，每个都是完整的设计系统。选定后直接进入设计系统生成，跳过方向探索阶段。

| # | 模板名 | 主张 | 适用场景 |
|---|--------|------|---------|
| 1 | 编辑极简风 | 克制深色底，蓝紫强调线 | SaaS 后台、开发者工具 |
| 2 | 电影感深空 | 纯黑底，品红青色对撞 | 创意工作室、影视作品 |
| 3 | 暖纸手作 | 奶油底，手写衬线 | 品牌官网、内容出版 |
| 4 | 数据密集终端 | 深色仪表盘，荧光标注 | 金融数据、监控面板 |
| 5 | 粗野撞色 | 大胆撞色，零圆角 | 媒体出版、潮流品牌 |
| 6 | 液态玻璃 | 半透明叠层，毛玻璃 | 科技产品、Apple 生态 |
| 7 | 杂志编辑 | 多栏排版，大标题压版 | 新闻媒体、长文阅读 |
| 8 | 游戏化活泼 | 圆润撞色，手绘涂鸦 | 教育产品、儿童应用 |
| 9 | 日式禅意 | 大留白，灰阶朱红 | 生活方式、高端品牌 |
| 10 | 复古未来 | Y2K 霓虹，CRT 扫描线 | 游戏产品、复古品牌 |

请选择一个模板（输入编号），或说"都不满意"进入自定义方向探索。

选定后

用户选定模板后，直接生成基于该模板的 DesignSystemManifest：

# DesignSystemManifest

> 来源：美学启动套件 - 模板{N}：{模板名}
> 微调：{如有微调，列出变更项}

## 1. 配色方案
{从模板提取的完整配色，补充 oklch 标注}

## 2. 字体
{从模板提取的字体配对}

## 3. 间距标尺
{从模板提取的间距系统}

## 4. 圆角
{从模板提取的圆角规范}

## 5. 阴影
{根据模板风格推导阴影层级}

## 6. 卡片样式
{根据模板风格推导卡片规范}

## 7. 组件清单
{初步组件清单，交给 design-system-extract 第二部分细化}

同时在 DesignBrief 中追加：

## 美学模板来源
- 使用模板：模板{N} - {模板名}
- 微调项：{如有}

微调处理

用户选定模板后可以要求微调，常见微调维度：

微调后更新 DesignSystemManifest，并在 PatchLog 中记录变更。

注意事项

• 本技能优先于 frontend-aesthetic-direction 触发——只有用户明确说"都不满意"或"我要自定义"时才降级
• 模板中的字体需要从 Google Fonts 或 CDN 引入，确保可加载
• 模板 6（液态玻璃）的 backdrop-filter 在部分浏览器需要 -webkit- 前缀
• 模板 10（复古未来）的 CRT 扫描线效果用 CSS repeating-linear-gradient 实现，不影响性能
• 模板选定后仍需继续用 design-system-extract 细化组件规范
• 模板选定后仍需走完整的 QA 流程（触发 qa-review 一次完成五道检查）
• 重要：模板 3（暖纸手作）的奶油底 + 赤陶橙组合与强禁止清单第 10 条相关，但本模板是有意识的风格选择（参考 Aesop 和 Stripe Press），在使用时必须在 DesignBrief 中注明"基于暖纸手作模板，赤陶橙为有意识选择而非模型惯性"