---
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.