skills.rest
redongreen
redongreenCOMMUNITY
Explore all skills by this author →
GitHub

create-anatomy

Generate numbered anatomy annotations and attribute tables for Figma components.

236|32|Updated Jan 23, 2026
Search Tags:#documentation#design system#figma#ui design#anatomy#component annotation
One-click install
npx skills add https://github.com/redongreen/uSpec --skill create-anatomy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-anatomy
Source: https://github.com/redongreen/uSpec/tree/main/.cursor/skills/create-anatomy
Command: npx skills add https://github.com/redongreen/uSpec --skill create-anatomy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of detailed visual anatomy annotations for UI components directly within Figma, eliminating the need for manual spec writing and ensuring consistency.

Core Features & Use Cases

  • Automated Anatomy Annotation: Generates hierarchical annotations showing sub-components with numbered markers and attribute tables.
  • Component Structure Visualization: Clearly breaks down complex components into their constituent parts.
  • Use Case: When designing a new button component, use this Skill to automatically generate an anatomy spec that details its different parts (icon, text, container) and their properties, ready for developer handoff.

Quick Start

Use the create-anatomy skill to generate an anatomy annotation for the Figma component at https://www.figma.com/file/example/component.

Frequently Asked Questions about create-anatomy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automatically generate component anatomy annotations in Figma?▼

To generate component anatomy annotations in Figma, this Skill extracts the component structure, properties, and variant data, then renders numbered markers and attribute tables for sub-components automatically via the Figma Console MCP connection.

Can I extract Figma component properties and variants for UI documentation?▼

Yes, you can extract Figma component properties and variants for UI documentation. The Skill automates this extraction process to build hierarchical visual specs detailing constituent parts like icons, text, and containers.

What is the best way to visualize UI component structure for developer handoff?▼

Visualizing UI component structure for developer handoff is best handled by generating anatomy annotations with numbered markers and attribute tables, breaking down complex components into their constituent parts and properties.

Do I need a Figma Console MCP connection to create component anatomy specs?▼

Yes, a Figma Console MCP connection is required to create component anatomy specs. The Skill depends on this connection and specific template keys to render the visual annotations and extract component structure data.

How do I place anatomy annotation tables into a specific Figma file?▼

You can place anatomy annotation tables into a specific Figma file by specifying a destination file during generation. The Skill supports both direct placement and routing to a specified destination file.

Why manually write UI component specs when you can automate design system documentation?▼

Manually writing UI component specs is unnecessary when you can automate design system documentation. This Skill eliminates manual spec writing by generating consistent visual anatomy annotations directly within Figma.

Related Skills

Explore More Design & Creative Skills→
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
launchapp-devlaunchapp-dev
38

component-spec

Generate structured component specifications with anatomy, variants, props, states, and accessibility.

Official
Advanced
GainInsightDevGainInsightDev

af-figma-design-expertise

Capture live UI to Figma and extract design context back to code.

Official
Advanced
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate