跳到技能内容
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
技能目录24 小时热门TOP100 技能每日更新
Skills 技能/Jason904/ui-skill-lab/visual-to-spec

Codex visual-to-spec:从界面截图提取前端规格

English

Codex 安装步骤

  1. 将固定版本 `.codex/skills/visual-to-spec/` 和随附 references 复制到 `.agents/skills/`。
  2. 在项目内附上定稿截图并选择 `$visual-to-spec`。

中文摘要

把截图整理成布局、组件树和设计令牌,为测量值注明依据与置信度,便于前端复核哪些细节能从图中确认。

SKILL.md 中文导读

可复现示例

给出一张虚构的手机待办清单截图,包含标题、两行任务和底部按钮,要求提取组件边界。

工作步骤

  1. 识别界面类型并标注可见元素位置。
  2. 提取颜色、排版和间距,标注哪些是实现推断。
  3. 输出布局文档、组件树和人工复核项。

验收方法

`03_visual_spec/` 中的组件能回到截图位置,不确定的字体和交互进入复核清单。

GitHub 原文 · 更新日期 2026-11-13

适用环境

带图片输入的 Codex、可读截图和可写的项目目录。

常见问题

截图能确认点击后的动作吗?

截图提供可见状态。未显示的交互行为应标为待核。

技能信息

GitHub 仓库
Jason904/ui-skill-lab

收集于互联网

相关指南

  • ChatGPT Skills 和 Codex Skills 有什么区别?
更多 Codex 技能
词映 AI 导航Skills 技能
工具分类全部工具已本地化技能选型指南AI 快讯