frontend-design-direction
Codex 网页视觉方向技能：按使用场景调整层级与布局
EnglishCodex 安装步骤
- 运行 git clone https://github.com/mturac/everything-openai-codex.git。进入克隆目录并运行 git checkout --detach b5057da5f42ed6b12cd3a59e89af0ccd12cff7c2。
- 复制完整 skills/frontend-design-direction 到目标项目的 .agents/skills/frontend-design-direction，保留随附文件。
- 从目标项目打开 Codex，用 /skills 或 $frontend-design-direction 选择技能，再输入本页示例。
中文摘要
先确定界面的用途、用户要扫视的信息及视觉基调，再利用项目已有组件和令牌调整页面。适合改进经常使用的网页工具和后台界面。
SKILL.md 中文导读
可复现示例
在虚构的活动签到后台，当前页面先展示大幅说明，签到列表位于下方。请用现有组件设计一版布局，让值班人员第一屏能看到待确认记录与筛选器。工作步骤
- 确认高频任务、用户和第一屏所需信息。
- 选择适合场景的密度和层级，沿用现有视觉约定。
- 用窄屏与键盘操作检查调整后的页面。
验收方法
方案说明值班员最先查看什么，以及布局、文字和留白如何服务该任务。验收时检查第一屏、窄屏和键盘焦点。
GitHub 原文 · 更新日期
适用环境
需要可访问本地项目的 Codex。将固定版本中的技能目录与随附文件一起使用。
常见问题
优化视觉方向一定要换颜色和组件库吗？
可以先调整现有组件的信息层级、密度和间距。让关键数据与操作更易扫视，再根据项目约束决定是否需要新的视觉元素。