关于 ingest-screenshot
ingest-screenshot 是一项设计技能，借助 Claude 的视觉能力从静态图片提取近似设计令牌，并标注不确定性，供设计师作为起点参考。
主要功能
- 01估算主要颜色样本
- 02识别字体与间距
- 03描述圆角和组件样式
- 04按类别记录置信度
- 05将令牌保存为 JSON
适用场景
- 01从界面截图提取初始令牌
- 02改版前梳理视觉风格
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ingest-screenshot确认已加载。
详细介绍
导入截图
使用 Claude 的视觉能力从静态图像中提取设计令牌。坦诚说明局限：没有源文件时，十六进制颜色代码只能近似估算。相比截图，Claude 根据代码重建 UI 的可靠性更高。
步骤
-
解析图像路径：
$0。使用Bash(file <path>)确认它是图像（png/jpg/webp/heic）。 -
通过多模态
Read读取： 这会加载图像供视觉分析。Claude 可以看到图像。 -
系统地分析。 从图像中识别：
- 主导颜色 — 选取 5-8 个色样并估算十六进制值。标记不确定的颜色（“看起来像 #2A4B6D，但视觉估算的十六进制值仅供参考”）。
- 排版 — 字体系列（与常见字体系列匹配：类似 Inter、类似衬线字体、展示字体、等宽字体）、字号（相对大小）、字重（纤细/常规/中等/粗体）、行高观感
- 间距节奏 — 根据间隔和内边距估算基础单位（4/6/8px）
- 圆角 — 锐角/小/中/胶囊形
- 组件模式 — 出现了哪些类型的元素（按钮、卡片、导航、输入框）
- 美学风格 — 极简/密集/装饰性/活泼/企业风/粗野主义
-
编写输出：
artifacts/ingested/screenshot-<timestamp>-tokens.json使用与
ingest-github相同的架构，并添加"source": { "image": "<path>", "ingested_at": "..." }，以及每个类别的"confidence": "low|medium|high"。 -
标注置信度： 对于每个不确定的值，添加
"confidence"字段（low|medium|high）。通过视觉估算的十六进制颜色代码应标为low或medium。 -
提供后续步骤：
- “令牌已提取并保存。颜色仅为近似值——你有源文件（CSS、设计系统、品牌指南）可以用于交叉核对吗？”
- 后续操作：
/create-design-system，或使用这些内容作为起点，开始/make-deck//interactive-prototype。
局限性 — 告知用户
- 视觉分析返回的是近似十六进制值，而非精确值。若要达到生产级精度，请提供源文件。
- 多种颜色相互重叠时，Claude 会挑选有代表性的样本，而非涵盖所有变化
- 字体识别较模糊——“看起来像 Inter”不等于“就是 Inter”
- 要读取像素尺寸，需要图像具有足够的实际分辨率
工作流集成
导入后，务必提出与真实源文件（Figma、代码库）配合，以确定精确值——截图提供的是一个起始方向，而非绝对依据。
评论
支持 Markdown