Codex Satohash 界面审查|核对白底文字对比和模块层次
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/design-audit/SKILL.md`,核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/design-audit/`,把核对后的文件保存为 `.agents/skills/design-audit/SKILL.md`。
- 在该项目根目录启动 Codex,输入 `$design-audit` 并选择同名技能。
中文摘要
按 Satohash 的项目视觉规范检查现有界面的可读性、区块层次和交互反馈。先定位问题,再列出针对性的调整。
SKILL.md 中文导读
可复现示例
审查以下模拟数据视图,先列出标题的可读性问题。
{"surface":"white","heading":"pale gray","role":"primary heading","expected":"deep navy","scope":"visual review"}工作步骤
- 查看目标页面和已有样式。
- 按对比、留白和层次指出具体问题。
- 用项目规定的色彩角色和边界样式选择修正,并检查结果。
验收方法
将主标题列为 `low contrast`,按项目标准改用 `#1a1d2e` 深蓝字,并核对白底下的阅读效果。
GitHub 原文 · 更新日期
适用环境
在 Codex 中打开 Satohash 前端,准备目标界面的 JSX 或样式、当前配色和控件状态。示例只评审本地页面。
常见问题
这套规范中的强调色应用在哪里?
按项目约定用于操作和焦点状态。已有标题和内容层次继续使用正文角色。