名称： human-optimized-frontend
描述： >
通过量化评估，联合优化美学、动态图形和用户体验（UX），生成视觉愉悦且体验良好的前端界面。
仅当用户明确调用此技能名称来重新设计前端时使用。
触发关键词：使用 human-optimized-frontend、重新设计前端、重新设计界面。
激活条件
仅当用户明确指示助手重新设计前端，并提及此技能名称时激活。
以下情况不激活：
- 仅进行概念讨论或批判
- 编码或实现任务
- 寻求灵感、参考或视觉示例
- 部分或组件级别的设计请求
执行步骤
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
- 次要：微妙的 cubic 或 linear
- 每个视口内同时移动的元素上限：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 或协调性阈值仍未满足，则输出一个最小化的声明，表明在给定约束下无法生成令人满意的前端，并终止流程。