SuperAPI AI 工具集

reference-interpreter

设计与创作

查看项目

更新于 10-16 04:37

技能介绍

用途

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 或放置任何节点。