Codex visual-to-spec:从界面截图提取前端规格
EnglishCodex 安装步骤
- 将固定版本 `.codex/skills/visual-to-spec/` 和随附 references 复制到 `.agents/skills/`。
- 在项目内附上定稿截图并选择 `$visual-to-spec`。
中文摘要
把截图整理成布局、组件树和设计令牌,为测量值注明依据与置信度,便于前端复核哪些细节能从图中确认。
SKILL.md 中文导读
可复现示例
给出一张虚构的手机待办清单截图,包含标题、两行任务和底部按钮,要求提取组件边界。工作步骤
- 识别界面类型并标注可见元素位置。
- 提取颜色、排版和间距,标注哪些是实现推断。
- 输出布局文档、组件树和人工复核项。
验收方法
`03_visual_spec/` 中的组件能回到截图位置,不确定的字体和交互进入复核清单。
GitHub 原文 · 更新日期
适用环境
带图片输入的 Codex、可读截图和可写的项目目录。
常见问题
截图能确认点击后的动作吗?
截图提供可见状态。未显示的交互行为应标为待核。