Pixels don't speak AI.
Block teaches your design system.
Block wraps your Figma components with typed inputs — so AI agents see structured data instead of opaque layers. One setup, and your design system speaks AI.
Works with the Figma agent. Install once. No code.
You say to your AI agent
Fill my Hero component with the product launch announcement copy.
Product Launch 2025
Announcing Block 2.0 — the intelligence layer for your design system.
Typed inputs, not layer archaeology
AI reads named, typed fields — not raw layers, not variant tables. Block gives every component a fixed surface: set title, status sets status. Nothing else is reachable.
Same controls, human or AI
Designers edit through the Block plugin panel. AI agents set values through the exact same typed inputs. One surface, both channels — nothing breaks when either one uses it.
Reactive by design
Block works out totals, counts, states, and visibility from the inputs you expose. AI can only set source values — derived logic is never something it can accidentally override.
The intelligence layer between your AI agent and design system
Block sits between your AI agent and your design system. AI sets values through typed inputs. Block handles every canvas write — the AI never touches a raw layer.
Learn how skills workInputs editors can touch
Translates AI intent to canvas writes
AI sets values
The source components and variants
Two skills. That's the whole setup.
Install both in Claude. Then describe what you want to your Figma agent. Block handles everything from there.
block-create
Figma skill · Install once
Makes any component AI-ready
Point it at a Figma component. Tell it what the component does. Block registers it as something your AI agent can populate — without you writing anything.
Tell Claude something like
"Make this Product Card AI-ready. It shows a product image, name, price, and an optional badge."
block-update
Figma skill · Install once
Fills any screen with real content
Describe a scenario. Block finds all the AI-ready components on the canvas and fills them with content that fits — totals, counts, states, all derived automatically.
Tell Claude something like
"Show a cart with 3 hiking boots. First one is on sale. Apply a 10% loyalty discount."
Make your design system AI-ready
Install the plugin and two Figma skills. Your design system speaks AI in minutes — no code, no configuration required.