메뉴
Triggers when user shares a screenshot, image, URL, or design description — or says 'analyze this', 'make a brief', 'interpret this reference'. Outputs a structured Design Brief mapping visual intent to design system tokens. Waits for 'confirmed' before designing.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Triggers when building any UI element in Figma — 'create a card', 'build a nav', 'add a section', 'make a component'. Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming. For visual property binding (colors, text styles, spacing values), defer to figma-style-binding.
Triggers on 'let's start', 'begin', 'preflight', 'start the session', or when a Figma file URL is first shared. Verifies MCP connection, reads CLAUDE.md, audits connected libraries, and loads a Token Map of all Styles and Variables — required before any design work.
Triggers on any visual property change in Figma — creating text, setting colors, adjusting spacing/padding/gap/radius. Enforces that ALL values bind to Figma Styles or Variables, never hardcoded. Includes post-write QA verification.
| name | reference-interpreter |
| description | Triggers when user shares a screenshot, image, URL, or design description — or says 'analyze this', 'make a brief', 'interpret this reference'. Outputs a structured Design Brief mapping visual intent to design system tokens. Waits for 'confirmed' before designing. |
| disable-model-invocation | false |
Analyze a reference (screenshot, URL, or description) and produce a Design Brief that maps visual observations to design system tokens. Output the Brief, then stop and wait for user confirmation before building anything.
Prerequisite: figma-preflight should have run so the Token Map and Style Registry are available.
Examine the reference across these dimensions:
For each observation, identify the specific Token or Style from the session's Token Map:
"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
If no token exists, flag it:
⚠️ Gap: [observation] — no matching token. Options: (a) nearest match: [name], (b) add token first.
## 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]
Output exactly:
Brief complete. Type `confirmed` to begin building, or tell me what to adjust.
Do NOT call use_figma or place any nodes until user types confirmed.