From figma-to-code
Implement all nodes from component spec with Figma design context, fix code based on audit results
npx claudepluginhub nonoroazoro/ai --plugin figma-to-codeThis skill is limited to using the following tools:
1. **Resolve Params**:
Translates Figma designs into production-ready UI code with 1:1 visual fidelity using MCP server. Use for node-specific implementations from Figma URLs or desktop selections.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Share bugs, ideas, or general feedback.
Resolve Params:
componentSpec: from Team Lead or $ARGUMENTSprojectContext: from Team LeadBootstrap:
projectContextImplementation
componentSpec, process ONE node at a time, never batch or parallelize across nodes:
get_design_context with nodeId to get design context (typically React + Tailwind code snippets)get_variable_defs with nodeId to get design tokens (e.g., primary-500, primary-hover)get_screenshot with nodeId to get visual referencehttp://localhost:3845/assets/...) with local imports{/* ✅ This structure is what Figma gives you, keep it */}
<div className="absolute inset-[X%_Y%]">
<img src={icon} className="absolute block max-w-none size-full" />
</div>
{/* ❌ DO NOT flatten into this */}
<img src={icon} className="absolute inset-[X%_Y%] size-full" />
data-node-id to the root element of every node, use nodeId by default, repeat.nodeIds for repeated nodesrepeat: implement once, render repeat.count timescomponentSpec hierarchyPrepare for Audit:
./examples directory that renders all implemented nodesdevServerURL to the Team LeadWait for Audit Results:
auditResults from Team Lead, apply fixes based on it and report backdata-node-id during fixesprojectContext (tech stack, styling, component library, reference docs, etc.)