用途
Reference Interpreter 用于将设计参考(截图、URL 或文字描述)转化为结构化的 Design Brief,并把它与设计系统的 Token 对应起来。它不会直接开始构建,而是先分析、映射、输出简报,然后等待用户确认。
触发方式
当用户分享截图、图片、URL 或设计描述,或说出以下指令时触发:
- "analyze this"
- "make a brief"
- "interpret this reference"
前置条件
需要先运行 figma-preflight,以便会话中已有 Token Map 和 Style Registry 可用。
Phase 1 — 分析
从以下维度检查参考:
- Layout — 结构、列数、区块高度、栅格宽度、对齐方式
- Typography — 标题/正文层级、字重对比、字距
- Color — 深色/浅色区块、强调色使用、中性色主导程度
- Spacing — 宽松或紧凑、区块内边距、内部间距
- Visual Anchor — 吸引视线的内容:大号字体、主视觉图、插画
- Components — 可见的 UI 元素:卡片、按钮、表单、导航
Phase 2 — 映射到设计系统
对每一项观察,从会话的 Token Map 中找出对应的 Token 或 Style,例如:
- "Large dark headline" → Text Style: heading/h1 · Color: text/primary
- "Neutral section bg" → Variable: background/surface-2
- "Tight card spacing" → Gap: gap/xs · Padding: padding/sm
如果不存在对应 Token,需标记为:
⚠️ Gap: [observation] — no matching token. Options: (a) nearest match: [name], (b) add token first.
Phase 3 — 输出 Design Brief
输出格式如下:
Design Brief
Reference: [source] Section: [what this covers] Aesthetic: [3-5 keywords]
Layout
[structure, height, alignment]
Typography
- Heading: [Style name] — [why]
- Body: [Style name]
Colors
- Background: [Variable] — [context]
- Text: [Variable]
- Accent: [Variable] — [used for]
Spacing
- Section padding: [Variable]
- Internal gap: [Variable]
Components needed
- [Name]: [from library? source]
Gaps
- [Gap description] — awaiting decision
- (none) [if all mapped]
Phase 4 — 等待
输出以下内容:
Brief complete. Type confirmed to begin building, or tell me what to adjust.
在用户输入 confirmed 之前,不得调用 use_figma 或放置任何节点。