mxa-design-tools
Gives designers working in code the views they had on a canvas: every screen side by side, a board to lay out the system's real components and hand the layout back to be built, throwaway variations, and design tools composed on request.
- Lays every screen out side by side as live artboards, read from the app's routes, so a new page appears on its own.
- Gives designers a canvas of the system's real components and patterns to arrange, restyle and name into new components, then builds what they save with the system, asking about anything off it.
- Makes three or four genuinely different versions to compare as throwaway copies, then deletes the losers and records why the winner won.
- Builds a design tool for the question in hand in a few lines: a token everywhere, one component everywhere, or just one instance, with controls that step through the system's own values.
- Hands every change back as a prompt the agent writes into the right file, so nothing is ever written from the browser.
- Keeps every design page off the public site, and uses existing tools where they already do the job: Responsively for several sizes at once, driven by the agent through its own MCP server, and Playwright for screenshots.
What it uses
Default
@designtools/artboards, @designtools/canvas, @designtools/widgets
Also uses
Playwright
Our packages for the screens overview, the component canvas and the tool kit; Responsively App for several sizes at once, offered as an install and driven through its MCP server; Playwright's own CLI for screenshots.
Install it
Already on studio Claude accounts, in the Made by Agents plugin. Anyone else:
claude plugin marketplace add madebymany/madebyagentsclaude plugin install made-by-agents@madebymanyFor Cursor, Codex and other agents, just this skill:
npx skills add madebymany/madebyagents --skill mxa-design-tools