The AI layer for Figma design systems
Block wraps design-system components with a controlled interface that designers, developers, and AI agents can all use the same way. One plugin. Two skills. Any component, AI-ready.
Describe. AI configures.
Tell Claude what a component does. The skill analyzes its layers as data + logic, writes the Block definition, and saves it. No code from you.
Scenario. AI populates.
Attach AI-ready component copies to Claude. Describe the scenario. Every instance fills with consistent, reactive data — totals and states follow automatically.
Same panel, always.
A designer edits by hand through the Block plugin. An AI agent edits via the skills. Both use the exact same typed inputs — safe by design.
How it works
Four steps, two skills, zero scripting.
Install
Plugin + two skills
Install Block from the Figma Community. Then install the block-create and block-update skills in Claude. That's the entire setup.
Create
block-createMake components AI-ready
Select a component or screen. Describe it to Claude. The skill analyzes its structure as data and logic, generates the Block definition, and saves it to the component in Figma.
AI found these inputs
Block saved to component ✓
Populate
block-updateFill screens with data
Attach copies to Claude. Give it a scenario. It reads the Block schema and populates every instance. The Block reacts: totals update, states change, lists resize to match.
"3 running shoes under $100, 10% discount, free shipping"
items
3
subtotal
$270
total
$243
Maintain
Human or AI, same controls
Designers keep editing through the Block plugin panel by hand. Every AI update is logged with a timestamp, the request, and what changed on canvas.
What makes it work
The mechanics behind AI-ready components.
Typed schema
A structured surface every tool can rely on
Every Block component exposes a fixed set of named, typed inputs. The AI reads this schema before making any changes — so it only sets values that exist, never guesses at layer structure, and never breaks anything.
Reactive logic
AI sets data. Block works out the rest.
Totals, subtotals, tax, counts, badge visibility, button disabled states — the Block calculates all of these from source data. The AI cannot set them directly, because they're not inputs.
AI sets: items (3 rows), currency, shippingFee
Source data inputs
Block works out: subtotal, total, "3 items", checkout state
Derived automatically
Collections
Lists that follow the data
AI passes an array of rows. Figma adds or removes component instances to match. Each row drives its own sub-Block. Pass 3, get 3. Pass 10, get 10.
Design history
Every change, traced
The Block plugin logs every AI update on the component — timestamp, request, what changed, what the component derived. Always know how a screen got to its current state.
Cart filled with 3 running shoes
by agent · just now · items → 3, currency → USD, shippingFee → 0
Block created on Cart Summary
by agent · 2 min ago · 4 inputs defined
Ready to make your first component AI-ready?
Install the plugin, install two skills. Then just ask.