Your AI reads the kit before it draws.
A design kit is a library of parts. What an AI also needs is the judgement around them: which screen fits the brief, which part does which job, which mistakes a reviewer would catch. Propel writes that judgement down in Markdown, with every part addressed by its Figma node id.
One line in. Six steps. A finished screen.
The workflow is written into SKILL.md, so Claude follows it every time the skill and the Figma connector are on.
“Payroll approvals for a 40-person ops team, with a phone view.”
Understand the job
Who uses it, the one main action, and the states it needs.
empty · loading · error · successSKILL.mdPick a template
Matches the brief to an “adapt for” line and clones the frame.
1 of 69 templatestemplates.mdChoose the parts
Bulk actions, wizards, status, danger zones, phone patterns.
decision tableschoose.mdPlace by node id
Swaps real kit instances, never redraws them.
316 parts · 81 blockscomponents.mdrecipes.mdSet the modes
Light or dark, brand, density, tablet and phone layout.
4 variable modesmodes.mdScreenshot & review
Checks its own work against the kit’s checklist.
focus · contrast · mono numberschecklist
Approvals inbox cloned · 3 states · Light + Dark · 1440 and 390 frames · checklist passed.
Prompt in, kit parts out.
The prompt is plain language. Everything after it comes from the skill files: which template, which phone pattern, which modes, and the review at the end.
Thirteen files, each with one job.
Plain Markdown and JSON. Any assistant can read them; the workflow is written and tested for Claude with the Figma connector.
| File | What it gives the model | Size |
|---|---|---|
SKILL.md | The workflow, visual rules and common mistakes. The model reads it first. | 8 KB |
templates.md | Every template: what it adapts to, frame ids and exactly which parts it contains. | 41 KB |
choose.md | “Which part for which job” tables: selection, bulk actions, wizards, status, danger, overlays, phone. | 12 KB |
components.md | Every component: node id, variants, property keys, default size, when to use, motion. | 129 KB |
blocks.md | Shells, sidebars, headers, overlays, auth screens and bento rows. | 14 KB |
recipes.md | Figma Plugin API snippets for each step, and the pitfalls that break builds. | 25 KB |
responsive.md | Breakpoints and what each pattern becomes at each width. | 5 KB |
modes.md | Light and Dark, brands and densities: ids and how to set them. | 3 KB |
tokens.md | Variable names and values, text style and effect style ids. | 8 KB |
accessibility.md | The contrast record and the rules that keep screens AA. | 8 KB |
code.md | Writing React, Tailwind and shadcn code from a screen with the exported tokens. | 3 KB |
icons.md | Icon ids for instance swaps. | 3 KB |
manifest.json | All of the above as JSON, every part addressed by node id. | 303 KB |
Free mini skill pack
Ships with the free sample file: the same workflow and rules, scoped to 80 components, 10 blocks and 3 templates. Enough to try a real brief before you buy.
Install
Upload the propel-skill folder in Claude under Settings → Skills, connect Figma, and open your copy of the kit. Point the skill at your file key once.
Keeps up with the kit
The skill files are generated from the Figma file itself, so node ids, variants and counts match the version you own. Updates ship together.