Stop burning tokens
on a legacy design workflow
An open source Claude Code plugin that reads your brief, builds frames in Figma, implements in React, and audits the output - with you approving at every step.
Paste into Claude Code, restart, then run @design-planner
HOW IT WORKS
Drop in your requirements
Point it at a requirements.md and the planner agent scans for layout patterns, component inventory, and edge cases. It produces a structure brief you review before anything gets built. No assumptions, no guesswork.
Build in Figma or go straight to code
Pick your path per task. The design-engineer skill talks to Figma MCP to create frames directly in your file - you review them like any other handoff. Or skip Figma entirely and let the code-engineer build React/TypeScript components from the approved spec. Either way, it runs in your local dev server.
Audit only what changed
The QA skill runs visual diff, WCAG accessibility checks, and edge case coverage against the spec. Each issue comes with a token cost estimate so you decide what's worth fixing. Select the ones that matter - it generates scoped patches for just those.