weorbitant Analyze Design
Extract every data element, action, and state from a Figma design. Question everything — a label in the UI does NOT mean the data is defined.
Instructions
1. Parse argument
$ARGUMENTS is a Figma URL. If not provided, ask the user.
Extract fileKey and nodeId from the URL:
figma.com/design/:fileKey/:fileName?node-id=:nodeId→ convert-to:in nodeIdfigma.com/design/:fileKey/branch/:branchKey/:fileName→ use branchKey as fileKey
2. Get the design
Attempt 1 — Figma MCP:
ToolSearch → "select:mcp__claude_ai_Figma__get_design_context"
mcp__claude_ai_Figma__get_design_context(fileKey, nodeId)
mcp__claude_ai_Figma__get_screenshot(fileKey, nodeId)
Fallback — Manual screenshot (if MCP fails or unavailable):
Figma requires authentication, so automated screenshots are not possible. Ask the user:
"No pude acceder al diseño via Figma MCP. ¿Puedes compartir un screenshot de la pantalla? Puedes arrastrarlo al chat o indicar la ruta del archivo."
Read the screenshot with Read for visual analysis.
If the user cannot provide a screenshot, report failure in the output and stop the design analysis.
3. Interrogate every element
For each field/input — do NOT assume anything:
| Question | Why |
|---|---|
| What label does it have? | Labels can be ambiguous ("Total" — total of what?) |
| What input type? (text, select, toggle, date...) | Determines data type |
| Has placeholder text? What does it suggest? | May hint at format/expected values |
| Is it required? How do you know? | If not marked, ask |
| What format? (currency, date, percentage...) | Determines validation rules |
| Is it editable or read-only? | Determines who generates the data |
| What are the possible values? | For selects/toggles, list them |
For each table column:
| Question | Why |
|---|---|
| What data does it show? | Column header may be abbreviated or ambiguous |
| Where does this data come from? | Not obvious from the design |
| What format? | Dates, numbers, currencies vary |
| Is it sortable/filterable? | Affects implementation |
For each button/action:
| Question | Why |
|---|---|
| What does it do? | Icon-only buttons are ambiguous |
| Is there a confirmation step? | Design may not show it |
| What happens on success? | Navigate? Toast? Refresh? |
| What happens on failure? | Error state may not be designed |
| Does it change data state? | Side effects must be known |
4. Detect covered and missing states
Check for each of these. Mark as covered or missing:
- Empty state (no data yet)
- Loading state
- Error state (API failure, validation errors)
- Success state / confirmation
- Partial data (some fields filled, some not)
- Permission denied (user can't access)
- Pagination / infinite scroll (if table/list)
5. Detect implicit flows
- What screens are connected? Is navigation designed?
- Are there modals/drawers that open? Are their contents designed?
- What happens after form submission? Is the next screen designed?
- Are there back/cancel flows?
6. Output
🎨 ANÁLISIS DE DISEÑO
Fuente: [Figma MCP / Playwright screenshot]
URL: [original URL]
DATOS ENCONTRADOS:
┌─────────────┬──────────┬──────────┬─────────────┬──────────┐
│ Label │ Tipo │ Formato │ Obligatorio │ Editable │
├─────────────┼──────────┼──────────┼─────────────┼──────────┤
│ [label] │ [type] │ [format] │ [sí/no/❓] │ [sí/no] │
└─────────────┴──────────┴──────────┴─────────────┴──────────┘
ACCIONES:
- [botón/label]: acción=[X], confirmación=[sí/no/❓], error=[diseñado/no]
ESTADOS:
✅ Cubiertos: [lista]
❌ Faltantes: [lista]
FLUJOS:
- [pantalla A] → [pantalla B]: [trigger]
- ❓ [flujo implícito no diseñado]
PREGUNTAS (cada dato que no está claro):
1. "[label X]" — ¿Qué significa exactamente? ¿De dónde viene este dato?
2. "[botón Y]" — ¿Qué pasa si falla? No hay estado de error diseñado.
3. ...
Edge cases
- If the URL is not a Figma URL, tell the user and stop.
- If the design is a component library (not a screen), adapt: list components and their props instead of flows.
- If multiple frames/pages exist, ask which one to analyze or analyze all.
- Never invent data that isn't visible in the design. If a field's meaning is unclear, ask — don't guess.