name: create-anatomy description: Generate component anatomy specifications with numbered markers and attribute tables directly in Figma. Use when you need to document the structure and elements of a UI component.

Create Anatomy Spec

Generate a professional anatomy specification for a UI component, with numbered markers identifying each element and an attribute table documenting their properties.

Usage

@create-anatomy https://www.figma.com/design/FILE_KEY/Design-System?node-id=123:456

This is a Button component with:
- Text label (required)
- Optional leading icon
- Optional trailing icon
- Loading spinner state
- Enabled, hover, pressed, and disabled states

What You Get

A beautifully formatted spec page in Figma containing:

1. Header Section

   • Component name
   • Brief description
   • Last updated date

2. Visual Anatomy

   • Component instance with numbered markers (①②③...)
   • Connector lines pointing to each element
   • Clear visual hierarchy

3. Attribute Table

   #	Element	Type	Required	Description
   1	Label	Text	Yes	Primary text content
   2	Leading Icon	Slot	No	Optional icon before label
   3	Trailing Icon	Slot	No	Optional icon after label

4. Nested Components (if applicable)

   • Per-child sections for complex sub-components
   • Cross-references in the main table

Pipeline

Extract layers → Classify elements → Import template → Render markers → Build table → Validate

Phase 1: Data Extraction

Using Figma MCP, I will:

• Read all child layers and their types
• Extract property definitions (booleans, variants, slots)
• Identify visibility rules
• Detect nested component instances

Phase 2: Classification

For each element, I determine:

• Content: Text labels, icons that convey meaning
• Structural: Frames, containers, spacers
• Decorative: Backgrounds, dividers, visual effects
• Slot: Swappable sub-components

Elements classified as structural/decorative are typically excluded from the anatomy.

Phase 3: Template Import

From your template library:

1. Import the Anatomy Page template
2. Detach the instance
3. Position on the current page

Phase 4: Rendering

For each classified element:

1. Create a numbered marker badge (①②③...)
2. Draw a connector line to the element
3. Add entry to the attribute table

Marker colors follow the design system:

• Elements 1-5: Indigo (#6366F1)
• Elements 6-10: Purple (#8B5CF6)
• Elements 11+: Pink (#EC4899)

Phase 5: Validation

Take a screenshot and verify:

• All markers are visible and not overlapping
• Connector lines are properly aligned
• Table content is complete and readable
• No text truncation

Best Practices

DO Provide

• States not visible in the current frame
• Optional vs required element information
• Behavioral descriptions (e.g., "icon spins when loading")
• Focus order if different from visual order

DON'T Include

• States the agent can see in the component
• Information already in Figma's properties panel
• Obvious structural details

Example Prompts

Simple Button:

@create-anatomy https://figma.com/.../Button

Primary action button with label and optional icons on either side.
Shows loading spinner when isPending is true.

Complex Dropdown:

@create-anatomy https://figma.com/.../Dropdown

Dropdown with:
- Trigger button showing selected value
- Search input (when isSearchable=true)
- List of options with optional icons
- "No results" empty state
- Loading indicator for async options

Data Table Row:

@create-anatomy https://figma.com/.../TableRow

Table row containing:
- Checkbox for selection (hidden in some modes)
- Data cells with variable content
- Action buttons on hover
- Expansion panel for nested content

Customization

You can customize the output by specifying:

• Marker style: "Use square markers instead of circles"
• Numbering: "Start numbering from 5"
• Exclusions: "Don't include the container frame"
• Grouping: "Group the icon variants together as one element"

Troubleshooting

"Template not found"

Run @firstrun to configure your template library first.

"MCP not connected"

Open the Desktop Bridge plugin in Figma Desktop.

"Component not found"

Verify the Figma URL points to a valid component node.

Markers overlapping

Add context about element positions, or I'll auto-adjust spacing.