Architecture and component design expert, design the component spec based on Figma design data and frontend best practices.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-to-code-subagents:design-componentsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. **Resolve Params**:
Resolve Params:
nodeId: extract node-id query param from Figma URL in $ARGUMENTS, converting - to : (e.g., 27-16255 -> 27:16255)baseFolder: from prompt context, defaults to .design-componentsFetch Figma Design Data:
get_metadata with nodeId, if the response is truncated, identify and call get_metadata on individual child nodesget_screenshot with nodeId, this screenshot serves as the source of truth for visual validationDesign Component Spec:
repeatnodeId from the metadataChatHeader, not Frame27)Save Component Spec {baseFolder}/component-spec.json:
{
"pages": [
{
"name": "IncidentDetailPage",
"description": "Incident investigation page with alert summary and root cause analysis",
"nodeId": "59:3079",
"role": "page",
"children": [
{ "name": "AlertSummary", "description": "Severity, service name, and triggered time", "nodeId": "59:3082", "role": "module" },
{
"name": "RootCauseAnalysis",
"description": "Timeline and evidence for root cause investigation",
"nodeId": "164:1890",
"role": "module",
"children": [
{
"name": "EventTimeline",
"description": "Chronological sequence of related events",
"nodeId": "164:1892",
"role": "module",
"children": [
{
"name": "EventEntry",
"description": "Single event with timestamp, source, and impact",
"nodeId": "164:1893",
"role": "component",
"repeat": { "count": 3, "nodeIds": ["164:1893", "164:1912", "164:1935"] }
}
]
}
]
}
]
}
]
}
Generate Inspector HTML {baseFolder}/component-spec-inspector.html:
templates/inspector.html to {baseFolder}/component-spec-inspector.html/* __COMPONENT_SPEC_JSON__ */ with the JSON from step 4npx claudepluginhub nonoroazoro/ai --plugin figma-to-code-subagentsGenerates Figma components or screens by compiling a CSpec into a scene graph and executing it via MCP. Use when the user asks to make, design, or build new UI in Figma.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.