铁律
在完成设计思维阶段之前，不得输出任何UI代码——先在目的、基调（单一方向）和差异化锚点定义清楚后，才能编写一行代码。DFII评分必须≥8方可继续进行。
前端设计技能
目的
提供创意前端设计方法论、视觉原理和质量检查清单，用于打造具有独特风格、可投入生产环境的界面，避免落入千篇一律的AI美学陷阱。
流程
- 设计思维阶段（强制性——不可跳过）
- 定义目的：该界面支持何种操作？是说服性、功能性、探索性还是表达性？
- 定义基调：选择一个主导方向（粗野主义 / 编辑风格 / 奢华 / 复古未来主义 / 工业风 / 有机风 / 俏皮 / 极繁主义 / 极简主义）。不要混合超过两种。
- 定义差异化锚点：回答“如果移除Logo截屏，别人如何认出这是你的产品？”该锚点必须在最终UI中可见。
- 计算DFII——计算设计可行性与影响指数（见下文）。得分<8 → 在继续前重新思考方向。
- 加载原则——阅读
reference/frontend-design-principles.md以获取排版、色彩、动效和布局指导。 - 实施——构建与所选美学一致的可工作代码（Angular、Flutter或HTML/CSS/JS）。遵循工作区的设计令牌（Angular使用daisyUI，Flutter使用AppSpacing/colorScheme）。
- 按要求的输出结构交付——包括设计方向摘要、设计系统快照、实施代码和差异化说明。
关于完整的设计原则、反模式和质量检查清单：
阅读 reference/frontend-design-principles.md
错误处理
如果未指定目标框架，请在继续之前询问用户。 如果外部字体/资源不可用，请记录备用选择并继续。
设计可行性与影响指数 (DFII)
在编写代码之前对设计方向进行评分。最低8分方可继续。
维度（每项评分1-5）
| 维度 | 问题 |
|---|---|
| 美学影响 | 这一方向在视觉上有多独特和令人难忘？ |
| 上下文契合度 | 该美学是否适合产品、受众和目的？ |
| 实施可行性 | 是否能用现有技术清晰实现？ |
| 性能安全性 | 是否会保持快速和可访问性？ |
| 一致性风险 | 能否在屏幕/组件间保持一致？（减去此项） |
公式
DFII = (影响 + 契合度 + 可行性 + 性能) − 一致性风险
范围: −5 → +15
解读
| DFII | 含义 | 行动 |
|---|---|---|
| 12–15 | 优秀 | 全面执行 |
| 8–11 | 强劲 | 有纪律地推进 |
| 4–7 | 有风险 | 减少范围或效果 |
| ≤ 3 | 薄弱 | 重新思考美学方向 |
要求的输出结构
每个前端设计输出必须包含以下所有四个部分：
1. 设计方向摘要
- 美学名称（例如“编辑粗野主义”、“奢华极简”）
- DFII评分
- 关键灵感来源（概念性——而非视觉抄袭）
2. 设计系统快照
- 字体（附说明——为什么为此产品选择这种字体？）
- 颜色变量（命名方式：
--color-primary、--color-accent、--color-neutral） - 间距韵律（基准单位和比例）
- 动效理念（稀疏/有目的？还是无动效？）
3. 实施
- 完整的工作代码
- 仅在不明显的地方添加注释
- 对于Angular：使用daisyUI语义令牌（
bg-primary、text-base-content）——不允许硬编码十六进制值 - 对于Flutter：使用
Theme.of(context).colorScheme和AppSpacing.*令牌——不允许Color(0xFF...)
4. 差异化说明
明确说明：
“此界面通过做X而非Y来避免通用UI。”
如果你无法完成这个句子，说明该设计还不够独特。
操作者检查清单（交付前门禁）
- 设计思维阶段已完成（目的 + 基调 + 差异化锚点已定义）
- DFII评分≥8
- 最终UI中有一个令人难忘的设计锚点
- 无通用字体（不使用Inter、Roboto、Arial、system-ui）
- 无通用颜色（无紫白渐变、无纯灰色）
- 无默认布局（无对称卡片网格、无模板式结构）
- 代码匹配设计抱负（极繁主义=复杂代码；极简主义=精确间距）
- 可访问且高性能（对比度≥4.5:1、焦点状态、键盘导航）
- 要求的输出结构：全部4个部分都已呈现
- 每个设计不应与之前的设计相似——变化明/暗、字体选择、布局个性
创意抱负宣言
Claude有能力完成非凡的创意工作。不要保留——展示突破常规思维、完全致力于独特愿景所能真正创造的东西。
创造性解读需求。做出出人意料的选择，这些选择应当感觉是为该上下文量身设计的。没有两个设计应该共享相同的美学DNA。
永远不要在多次生成中收敛到常见选择。 Space Grotesk、紫色渐变或对称主体布局“以前有效”这个事实正是不再使用它们的理由。多样性是强制性的，而不是可选的。
开始前需问的问题（如果需要）
- 目标用户在情感上是谁？
- 应该让人感到可信、兴奋、平静还是具有挑衅性？
- 令人难忘还是清晰更重要？
- 这能否扩展到其他页面/组件？
- 用户在前3秒内应该感受到什么？
工作区集成
| 技术栈 | 设计令牌规则 | 参考 |
|---|---|---|
| Angular | 仅使用daisyUI语义令牌——bg-primary、text-base-content、border-base-300 | angular-spa/reference/daisyui-v5-components.md |
| Flutter | Theme.of(context).colorScheme.* + AppSpacing.*——永远不要使用Color(0xFF...)或EdgeInsets.all(16) | ui-standards-tokens/reference/ui-design-tokens.md |
| HTML/CSS | 仅使用CSS变量——var(--color-primary) | 在:root块中定义 |
| React Native | 超出本技能范围 → 使用mobile-developer技能 | .claude/skills/mobile-developer/SKILL.md |
相关技能：
web-design-guidelines——在实施后运行，以对照Vercel Web界面指南进行审计design-system——针对Angular和Flutter的令牌合规性执行angular-spa——与daisyUI结合的Angular实施模式ui-standards-tokens——Flutter设计令牌定义