Visually break down UI components into labeled, typed parts with interactive bounding boxes — designed for both human understanding and AI consumption.
This feature is available on all Infa plans (Free, Pro, and Enterprise).
We at Infa designed Component Anatomy to give you a structured, visual breakdown of any UI component — each part labeled, typed, and mapped to a bounding box on a screenshot. It's built for both human understanding and AI consumption, enabling:
Visual documentation — See exactly which parts make up a component
Typed props — Every part has a React-like type (string, number, boolean, ReactNode, enum)
AI portability — The JSON structure can be passed between AI agents across sessions
Interactive exploration — Hover to highlight parts, click to expand details
Component Anatomy lives inside Infa Papers as an interactive block. You can insert it via the slash menu (/ComponentAnatomyBlock) in any board paper.
Copy link
AnatomyItem JSON Structure
Copy link
Schema
Field
Type
Required
Description
label
string
Yes
The prop or element name (e.g., "Currency Text", "Submit Label")
description
string
Yes
Human-readable description of what this part does
type
string
Yes
React-like prop type (see Type Values below)
default
string
No
Default value for the prop
required
boolean
No
Whether this prop is required
bbox
[x, y, w, h]
Yes
Bounding box coordinates in pixels relative to the screenshot
children
AnatomyItem[]
No
Nested child elements — supports recursive hierarchy
Copy link
Type Values
Type
Description
Example
string
Text content — labels, descriptions, titles
Currency label, button text
number
Numeric values — amounts, counts, indices
Balance amount, badge count
boolean
Toggle states — on/off, enabled/disabled
isActive, isDisabled, isOpen
ReactNode
React elements — containers, wrappers, slots
Card container, header section
enum:value1,value2,value3
Enumerated values — variants, sizes, kinds
enum:primary,secondary,ghost
Copy link
Example
[
{
"label": "Balance Card Container",
"description": "Main anchor element containing balance information",
"type": "ReactNode",
"required": true,
"bbox": [0, 0, 256, 208],
"children": [
{
"label": "Top Container",
"description": "Container for card's top section with currency details",
"description": "Numeric balance display showing current amount",
"type": "number",
"default": "0.00",
"required": true,
"bbox": [16, 165, 224, 28]
}
]
}
]
Copy link
Creating Component Anatomy
Copy link
Option A (Recommended): Infa AI Agent in Chrome Extension
The fastest way to create anatomy is through the Infa AI agent in the Chrome extension. The agent has full understanding of DOM bounding boxes and can tag elements automatically.
Open the Infa Chrome Extension on the page containing your component
Select the element or component you want to analyze
Ask the AI agent: "Create anatomy of the selected element"
The agent analyzes the DOM structure, identifies sub-elements, determines types, and generates the anatomy JSON with accurate bounding boxes
The anatomy block is automatically inserted into your paper
Pro tip
You can also ask the AI agent to update an existing paper directly: "Update the Button paper to show the anatomy block for this component". This combines screenshot capture, anatomy generation, and paper insertion in one step.
Copy link
Option B: Copy-Paste Prompt for Any AI Agent
If you prefer using a different AI agent (ChatGPT, Claude, Cursor, etc.), use this prompt template:
I have a component screenshot. Please analyze it and generate a JSON anatomy
structure following this exact schema:
interface AnatomyItem {
label: string; // The prop name or element label
description: string; // Human-readable description
type: string; // React-like: 'string' | 'number' | 'boolean' | 'ReactNode' | 'enum:value1,value2'
default?: string; // Default value (if applicable)
required?: boolean; // Whether this prop is required
bbox: [number, number, number, number]; // [x, y, width, height] in pixels
children?: AnatomyItem[]; // Nested child elements
}
For each visual part of the component:
1. Identify and label it (use the actual prop name if known)
2. Determine its React prop type:
- 'string' for text content
- 'number' for numeric values
- 'boolean' for toggle/flag states
- 'ReactNode' for containers, wrappers, slots
- 'enum:value1,value2' for enumerated options
3. Estimate bounding box coordinates [x, y, width, height] in pixels
4. Determine if it's required
5. Add a default value if applicable
6. Nest children inside parent elements using the children array
Return ONLY the JSON array, no explanation.
Then:
Paste the prompt along with your component screenshot into any AI agent
Copy the returned JSON array
In your Infa Paper, type /ComponentAnatomyBlock to insert the block
Paste the screenshot URL into the screenshotUrl field
Paste the JSON into the anatomyData field
Copy link
How-To: Insert Anatomy Block in a Paper
Copy link
Step 1: Open your board paper
Navigate to your board and open (or create) a paper.
Copy link
Step 2: Type /ComponentAnatomy to open the slash menu
The slash menu filters to show the ComponentAnatomyBlock option.
Copy link
Step 3: Select ComponentAnatomyBlock
Press Enter or click the item. The block is inserted into your paper with empty fields.
Copy link
Step 4: Add screenshot URL and anatomy data
Fill in the two required fields:
Screenshot URL — Direct URL to the component screenshot image
Anatomy Data — The JSON array of AnatomyItem objects
Copy link
Step 5: Interact with the anatomy
Hover over the screenshot to see bounding box highlights on each element
Click the expand button (or click the screenshot) to open the full modal view
In expanded mode, browse the sidebar tree to see all parts with their types and descriptions
Click "Copy anatomy for AI" to export the JSON for use in other AI sessions
Copy link
AI-to-AI Handoff
We built the anatomy JSON as a portable contract that travels across different AI sessions and tools:
Vision AI generates it from a screenshot (Chrome extension or prompt)
You refine it in the anatomy block UI (adjust labels, types, descriptions)
Code generation AI reads it to scaffold the React component with typed props
Documentation AI reads it to generate usage docs and prop tables
Testing AI reads it to generate test cases covering each prop
Audit AI reads it to compare implementation vs. specification
The "Copy anatomy for AI" button in the expanded view formats the data as clean JSON, ready to paste into any AI agent's context window.
Copy link
Future: Connection to Component Model
Planned enhancement
This will be implemented in a separate plan.
Currently, anatomy data lives only inside the Paper MDX content. In the future at Infa, anatomy JSON will be stored directly on the component record in the database, making it:
Queryable — AI agents can retrieve anatomy for any component without parsing papers
Reusable — The same anatomy data is available across all papers and sessions
Versionable — Track how component structure evolves over time
Connected — Link anatomy parts to actual component views and design tokens
Component Anatomy
This feature is available on all Infa plans (Free, Pro, and Enterprise).
We at Infa designed Component Anatomy to give you a structured, visual breakdown of any UI component — each part labeled, typed, and mapped to a bounding box on a screenshot. It's built for both human understanding and AI consumption, enabling:
Component Anatomy lives inside Infa Papers as an interactive block. You can insert it via the slash menu (
/ComponentAnatomyBlock) in any board paper.labelstringdescriptionstringtypestringdefaultstringrequiredbooleanbbox[x, y, w, h]childrenAnatomyItem[]stringnumberbooleanReactNodeenum:value1,value2,value3enum:primary,secondary,ghostThe fastest way to create anatomy is through the Infa AI agent in the Chrome extension. The agent has full understanding of DOM bounding boxes and can tag elements automatically.
You can also ask the AI agent to update an existing paper directly: "Update the Button paper to show the anatomy block for this component". This combines screenshot capture, anatomy generation, and paper insertion in one step.
If you prefer using a different AI agent (ChatGPT, Claude, Cursor, etc.), use this prompt template:
Then:
/ComponentAnatomyBlockto insert the blockscreenshotUrlfieldanatomyDatafieldNavigate to your board and open (or create) a paper.
/ComponentAnatomyto open the slash menuThe slash menu filters to show the ComponentAnatomyBlock option.
Press Enter or click the item. The block is inserted into your paper with empty fields.
Fill in the two required fields:
AnatomyItemobjectsWe built the anatomy JSON as a portable contract that travels across different AI sessions and tools:
The "Copy anatomy for AI" button in the expanded view formats the data as clean JSON, ready to paste into any AI agent's context window.
This will be implemented in a separate plan.
Currently, anatomy data lives only inside the Paper MDX content. In the future at Infa, anatomy JSON will be stored directly on the component record in the database, making it: