介绍
## Activation Criteria 仅当用户明确指示代理重新设计前端并按名称引用此技能时，才激活此技能。
请勿激活以下情况： - 仅进行概念讨论或批评 - 编码或实现任务 - 灵感、参考或视觉示例 - 部分或组件级的设计请求
## 执行步骤
### 1. 上下文摄入 - 消耗有关界面的所有提供信息。 - 如果缺少上下文，则假设为具有通用用途的中性功能产品。 - 除非明确说明，否则不要假设品牌、受众心理或业务目标。
### 2. 方向锁定（美学 + UX） - 选择恰好一个美学方向。 - 选择恰好一个 UX 交互哲学（例如清晰优先、流程驱动、探索引导）。 - 所有视觉、动态和交互决策必须同时强化这两者。 - 不要混合风格或交互范式。
### 3. 初始设计生成
#### 排版 - 正文字体基线：相当于 15–18px - 标题比例： - H1 = 正文字体 × 2.2–2.6 - H2 = 正文字体 × 1.6–1.9 - H3 = 正文字体 × 1.3–1.5 - 行高： - 正文：1.45–1.6 - 标题：1.15–1.3 - 字体规则： - 衬线体 + 无衬线体搭配 或 单一字体系列且具有 ≥ 4 个字重 - 字间距： - 标题：-1% 到 -3% - 正文：0% 到 +1% - 禁用字体：系统默认字体、Inter、Roboto、Arial。
#### 色彩与主题 - 调色板： - 1 种主色 - 1 种辅助色 - 1 种强调色 - 1 种中性基调 - 对比度： - 文本 ≥ 4.5:1 - 交互元素 ≥ 3:1 - 强调色使用 ≤ 可见区域的 10% - 仅允许一种饱和颜色 - 仅允许将渐变作为背景字段
#### 布局与构图 - 单一间距基线单位（8px 或 10px） - 视觉权重分布： - 主要：40–55% - 次要：25–35% - 第三级：≤ 20% - 每个视图最多两个对齐轴 - 仅当具有平衡对比时才允许对称
#### 背景与深度 - 背景类型： - 有纹理的中性背景 或 - 低对比度几何图形 或 - 分层平面 - 最大深度层数：3 - 前景对比度必须超过背景 ≥ 20%
#### 动态图形（强制） - 所需动态类别： - 进入动画 - 层级强化 - 交互反馈 - 计时：180–420ms - 缓动： - 主要：ease-out - 次要：微妙的三次贝塞尔或线性 - 每个视口同时移动的最大元素数：3 - 动态必须编码层级、状态或空间关系 - 禁止：装饰性循环、空闲动画、新奇动态
#### UX 结构（强制） - 为每个视图定义一个主要用户目标。 - 所有视觉和动态强调必须支持此目标。 - 交互规则： - 每个屏幕一个主要操作 - 次要操作在视觉上处于从属地位 - 导航清晰度： - 入口点必须在 1 秒内显而易见 - 下一个可用操作必须无需探索即可发现 - 认知负荷： - 每个视图不超过 3 个竞争焦点 - 反馈： - 所有用户操作必须产生即时的视觉或动态反馈 - 错误容忍度： - 界面必须具有包容性；破坏性操作必须在视觉上加以区分
### 4. 定量评估循环
对每个维度进行 0–10 分的评分：
**排版** - ≥ 8：层级即时可读 - ≤ 6：比例或间距感觉不一致
**色彩** - ≥ 8：主导地位和强调明确无误 - ≤ 6：强调色竞争或对比度弱
**布局** - ≥ 8：视觉流程在 1–2 秒内完成 - ≤ 6：多个区域竞争程度相同
**背景** - ≥ 7：深度支持层级 - ≤ 5：背景分散注意力或感觉空洞
**动态** - ≥ 8：动态改善理解和流程 - ≤ 6：动态分散注意力或延迟意图
**UX** - ≥ 8：用户意图明显，操作感觉毫不费力 - ≤ 6：引入了犹豫、歧义或摩擦
**跨维度和谐度** - ≥ 8：视觉、动态和 UX 强化相同的层级和意图 - ≤ 6：任何维度与另一个维度相矛盾
**加权总分** - 排版：20% - 色彩：20% - 布局：20% - 动态：15% - UX：15% - 背景：10% - 和谐度：强制 ≥ 8
### 5. 迭代规则 - 首先调整得分最低的维度。 - 如果 UX 得分 < 8，则优先进行 UX 调整。 - 每次迭代调整的维度不要超过两个。 - 最大迭代次数：5。 - 如果和谐度得分下降，则撤销最后一次更改。
### 6. 最终输出 生成单一声明式前端规范，包括： - 排版系统 - 带有角色的调色板 - 布局结构和视觉权重 - 背景和深度处理 - 动态图形定义 - UX 流程和交互规则
无替代方案。无解释。无理论。
## 歧义处理 - 缺少上下文默认为中性功能用途。 - 默认值仍须满足美学、动态和 UX 阈值。 - 切勿推断品牌、情感基调或受众心理。
## 约束与非目标 - 不要生成代码、资源或模型。 - 除非重新设计上下文需要，否则不要批评现有设计。 - 不要引用趋势、竞争对手或流行产品。 - 不要提供多个选项。 - 不要证明决策的合理性。
## 失败行为 如果未满足激活条件，则输出一条最简语句，表明无法激活该技能。
如果在达到最大迭代次数后仍未满足 UX 或和谐度阈值，则输出一条最简语句，表明在给定约束下无法生成令人满意的前端并终止。