Skip to main content
The anatomy skill documents a component’s internal structure — every element gets a numbered marker and an entry in an attribute table.
create-anatomy now renders from the Component Markdown source of truth. Run create-component-md first to produce components/<slug>.md; this skill seeds the component’s identity from the .md’s render-meta block and renders the Figma frame. It no longer re-extracts from Figma, and it fails fast if the .md is missing.

​
What you get

Numbered markers

Pink dots with connector lines pointing to each element in the component instance.

Attribute table

A 4-column table with element number, type indicator (instance or text), element name, and semantic notes describing each element’s role.
The skill also generates per-child sections for nested component instances, annotating their internal elements separately. Utility sub-components like Spacer and Divider are automatically skipped.

​
What you need

  • A component .md produced by create-component-md (run it first — create-component-md needs a _base.json from the uSpec Extract plugin). Tell the skill where this .md lives — components/<slug>.md is only create-component-md’s default output path; the file can live anywhere. Without it this skill aborts.
  • Figma MCP connected (Console MCP with Desktop Bridge, or native Figma MCP) — used only to render the frame.
  • Context about the component is captured upstream by create-component-md; nothing extra is needed here.
Anatomy has no dedicated body section in the .md. It seeds the component’s identity from the .md’s render-meta block, then runs a bounded minimal child/variant walk only to position markers and confirm live layer geometry.

​
How to use

Reference the skill and pass the component .md. Add a render destination or any extra context the spec can’t carry: 
@create-anatomy ./components/text-field.md

Render next to the component at https://www.figma.com/design/abc123/Components?node-id=100:200
To place the annotation in a different file or page, add a destination link to your prompt: Destination: https://www.figma.com/design/xyz789/Docs?node-id=0-1

​
What it generates

OutputDescription
Component instanceDefault variant rendered in the artwork area with all hidden elements made visible
Numbered markersPink dots with connector lines pointing to each element
Attribute table4-column table: number, type indicator (instance/text), element name, and semantic notes
Per-child sectionsNested component instances annotated with their own markers and tables
Cross-referencesComposition table notes link to per-child sections (“See X anatomy section”)
Hidden elements are made visible in the artwork using property-aware unhide (boolean toggles are set via component properties rather than blanket visibility overrides) and labeled “(hidden)” in the table, so no structural information is lost. In per-child sections, consecutive identical elements are collapsed into a single row with an (xN) suffix, so a row of five star icons becomes “Star (x5)” instead of five separate rows.

​
How it works

The anatomy skill consumes the Component Markdown source of truth: element classification, semantic notes, and per-child section decisions were already made by create-component-md, so deterministic scripts render markers and tables from the .md while AI reasoning is limited to resolving the seeded model onto live layers. 50% Deterministic 50% AI Reasoning
1

Require the .md

The skill requires components/<slug>.md (produced by create-component-md) and fails fast if it is missing — it does not re-extract from Figma.
2

Seed from render-meta

Anatomy has no dedicated body section, so the skill seeds the component’s identity — child layers, element types, visibility, and property definitions (booleans, variant axes, instance swaps) — from the .md’s render-meta block, then runs a bounded minimal child/variant walk only to confirm live layer geometry.
3

Build render inputs

Element roles, semantic notes, and per-child section decisions are assembled directly from the seeded model and render-meta — no full extraction walk.
4

Import template

The anatomy documentation template is imported from the library, instantiated, and detached into an editable frame.
5

Render

The skill fills header fields, creates a default component instance with hidden elements made visible, positions numbered markers on each element by name-match + live bbox, and builds the attribute table. Per-child sections are created for eligible sub-components.
6

Validate

A screenshot is captured and checked for completeness. Issues are fixed automatically for up to 3 iterations.
The skill renders programmatically, so the output is consistent and repeatable. Running it on the same component produces identical results.

​
Tips for better output

  • Use component sets: The skill expects a component set (the dashed-border container in Figma) or a standalone component, not an instance
  • Name your layers: Layer names become the element labels in the attribute table. Descriptive names like “Leading icon” produce better documentation than “Frame 47”
  • Hidden elements matter: Hidden children represent toggleable boolean properties. They are included in the anatomy and labeled “(hidden)” so the full structure is documented
  • Utility sub-components are skipped: Components like Spacer, Divider, and Separator don’t get per-child sections since they have no meaningful internal structure to annotate
  • Semantic notes are automatic: The agent classifies each element’s role and writes context-aware descriptions. Notes explain whether an element is optional (and which boolean controls it), swappable, or always present