frontend-design-codex

Frontend Design Codex

概述

使用此技能，让浏览器渲染的产品界面更显用心、易于使用并经过验证。优先遵循现有应用框架和设计规范，再考虑添加新的抽象。

Design Upskill 贡献

此技能教会 Codex 根据渲染后的表现而非仅凭源代码来评判前端设计。它通过要求 Agent 将布局、层级、间距、控件、响应式状态、无障碍设计和截图证据纳入同一循环，提升无模板开发的质量。

这很重要，因为没有模板的产品 UI 很容易沦为装饰性设计，或显得前后不一。Codex 应打造实用的界面，使其经得起反复使用、移动端换行和真实浏览器渲染的考验。

工作流

1. 检查现有应用结构、框架、路由、组件、样式和设计规范。
2. 找出用户的主要工作流，并针对该工作流优化首屏。
3. 在为重复使用的组件添加样式前，定义语义化设计令牌：背景、表面、文本、次要文本、边框、强调色、状态颜色、字体、间距和圆角。检查对比度，并保持配色简洁。
4. 构建最小但完整的 UI，涵盖常规、空、加载、错误和窄视口状态。
5. 使用熟悉的控件：工具使用图标按钮，二元选择使用切换开关，数字使用滑块或输入框，其他视图使用标签页，选项集使用菜单。
6. 将视觉令牌一致地应用于核心表面、控件、图表和注释。字体和布局的尺度应适合所在界面；避免在紧凑面板中使用主视觉级别的大字。
7. 在宣称视觉质量达标前，截取桌面端和移动端截图。
8. 根据截图证据反复调整令牌和布局，直到设计决策得到充分支持。

共享视觉运行环境

使用 .shared\visual-runtime 获取浏览器证据：

• capture_page.mjs 用于截取截图、捕获控制台信息和请求失败，并可选择导出 PDF。
• visual_lint.mjs 用于检查文本溢出、对比度过低、文本过小、缺少图片 alt 文本以及控制台问题。
• make_contact_sheet.py 用于比较多张截图。
• 创建或审查视觉系统时，参考 references\design-tokens.md。

无需 Office COM。如果之后要将此 UI 导出到 PowerPoint、Word 或 Excel，请先完成浏览器 QA，再将 Office 专属步骤交由 Office 技能处理。

验证

完成前：

• 在可用时运行应用常规的构建、测试或 lint 命令；
• 至少截取桌面端和移动端截图；
• 运行视觉 lint 并解决阻塞问题；
• 检查截图中的响应式 UI、无障碍设计、层级、文本适配、控件、间距、配色、字体和令牌一致性；
• 保留截图证据，并记录已接受的权衡。

常见错误

• 用户需要的是可用的应用，却做成了落地页。
• 生造与现有应用相冲突的视觉语言。
• 为了解决内容过密而缩小文本，而不是精简内容。
• 没有移动端截图，却声称响应式质量达标。