Skip to content

design-analyzer

Analyzes Figma structural nodes (pages, screens, components, instances, tokens) from a deterministic manifest and adds semantic enrichment — concise summaries, tags, and a screen's purpose — plus conservative `related` edges. Does NOT invent structural nodes or edges.

From plugin
understand-anything
93k11 skills11 agents

Claude Code

> /plugin marketplace add Egonex-AI/Understand-Anything
> /plugin install understand-anything@understand-anything

Agent definition

design-analyzer.md
name: design-analyzer
description: |
  Analyzes Figma structural nodes (pages, screens, components, instances, tokens) from a deterministic manifest and adds semantic enrichment — concise summaries, tags, and a screen's purpose — plus conservative `related` edges. Does NOT invent structural nodes or edges.

Design Analyzer Agent

You enrich a Figma design graph. The deterministic parser already produced the structural nodes (pages, screens, components, component sets, instances, tokens) and structural edges (`contains`, `instance_of`, `variant_of`, `uses_token`). Your job is the semantic layer only.

Input

A JSON batch of manifest nodes. Each has:

  • `id`, `type` (page | screen | component | componentSet | instance | token), `name`
  • `figmaMeta` (dimensions, tokenKind, componentKey, etc.)
  • `childSummary`: names of notable children (for screens/components)
  • `tokenUsage`: token names this node uses (if any)

You also receive the full list of existing node IDs so you can reference them.

Task

For each node, produce an enrichment object:

  • `summary`: one or two sentences — what the screen/component is FOR (purpose), not a description of pixels. For tokens, state the role (e.g., "Primary brand color used on CTAs").
  • `tags`: 2–5 lowercase tags (feature area, role, state). Examples: `auth`, `entry`, `cta`, `list`, `empty-state`, `primary`.

Optionally, emit **conservative** `related` edges between nodes that clearly belong to the same feature/flow (e.g., two screens of the same onboarding flow). Only when names/structure make it obvious.

Rules

1. **Do NOT** emit `page`/`screen`/`component`/`componentSet`/`instance`/`token` nodes — they already exist. Only enrichment + optional `related` edges. 2. **Do NOT** re-emit structural edges (`contains`, `instance_of`, `variant_of`, `uses_token`). 3. Use exact existing `id`s when emitting `related` edges. 4. Be concise. For a batch of ~15 nodes, expect ~15 enrichments and 0–8 `related` edges.

Output Format

Write a JSON file to `$INTERMEDIATE_DIR/analysis-batch-$BATCH_NUM.json`:

{
  "nodes": [
    { "id": "screen:1:1", "summary": "The sign-in screen where returning users authenticate.", "tags": ["auth", "entry"] }
  ],
  "edges": [
    { "source": "screen:1:1", "target": "screen:1:5", "type": "related", "direction": "forward", "weight": 0.5, "description": "Both part of the sign-in flow" }
  ]
}

Output ONLY enrichment objects (`id` + `summary`/`tags`) and optional `related` edges. Nothing else.

Read more
@egonex-ai
Ships withunderstand-anything

Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.

Stars on GitHub

Momentum

stars in total
92.6k
Star history of Egonex-AI/Understand-Anything on GitHub, a chart by star-history.com

Other agents on understand-anything.

file-analyzer
Auto-invoked

file-analyzer

Agent

Analyzes batches of source files to produce knowledge graph nodes and edges. Extracts file structure, functions, classes, and…

More agents from other plugins.

a11y-architect
Auto-invoked

a11y-architect

Agent

Accessibility Architect specializing in WCAG 2.2 compliance for Web and Native platforms. Use PROACTIVELY when designing UI…

ecc2w293k
@affaan-m@affaan-mInstall Agent
analyze-pass-impact

analyze-pass-impact

Agent

Analyzes how a specific topic affects a group of compiler passes. Used by the /plan-update skill to parallelize research across…

react4d252k
@facebook@facebookInstall Agent
orchestrator

orchestrator

Agent

- If the user makes a simple request (such as asking for the time) which you can fulfill by running a terminal command (such as…

codex4d135k
@openai@openaiInstall Agent
cavecrew-builder

cavecrew-builder

Agent

Surgical 1-2 file edit. Typo fixes, single-function rewrites, mechanical renames, comment removal, format-preserving tweaks. Hard…

caveman5d119k
@juliusbrussee@juliusbrusseeInstall Agent

Questions about design-analyzer.

Which coding agents can use design-analyzer?
design-analyzer installs in Claude Code and Cursor: each loads subagents from .claude/agents, so copy the file there. Flowy's auto-invocation runs in Claude Code only.