Start building with shadcn.
A todo list starts with a project, a theme and a few installed components. Their code lives in your repository.
In progress
JD
Jamie DavisDesigning something new
✓
Looking good.Your design is coming together.
The design harness
for coding agents.
Connect your components, design rules and coding agent.
Build with shared context. Refine visually. Keep it consistent.
npx canon-ds@latest setupshadcn/uiRadix UI SoonMUI Soon
One skill.
New or existing projects.
Connect the shadcn/ui code you have, or start a new app.
- 01
Add the Canon skill
npx canon-ds@latest setupChoose your agent and install for one project or all of them.
- 02
Choose where to start
Existing shadcn/ui project
Use the Canon skill to connect this shadcn/ui project. Preserve its components and theme. Do not rebuild the app.Open your project folder. Canon inventories your library and gives your agent its design context.
New project
Use the Canon skill to build a local todo app in a new folder, with shadcn/ui.Your agent creates the app, connects Canon and builds with the installed components.
- 03
Keep building. Refine the design.
Use your agent for product changes and Studio for shared styles. Your components and theme stay in your project.
⌑your-projectExisting source
components/ui/Button · Input · Cardglobals.cssYour themecomponents.jsonshadcn/ui↓
CanonThe design harness for your project.
LocalREADY FOR YOUR WORKFLOW
↳
AGENTS.mdInstructions↳
DESIGN.compact.mdDesign context↳
Canon MCPAgent tools↳
StudioVisual editingTHEN, BUILD WITH SHARED CONTEXTYour components.
Your components.
In the pages your agent builds.
Start with shadcn. Give your agent context through Canon. Build pages with the components and theme already in your project.
Your agent calls. Canon answers.
Through MCP, the agent asks for design rules and component details. Canon returns the imports, variants and context from your project.
Same components. Now in your app.
Canon maps your installed library. The agent imports its Button, Input and Checkbox to build the todo list, keeping your theme and variants.
CodexClaude CodeCursorKimi CodeGemini CLIOpenCode
A few things to know.
Does Canon replace my coding agent?
No. Your agent still builds the application. Canon gives it project design context, tools and supported style checks.
Does it replace shadcn/ui?
No. In library mode, Canon reads and edits the installed library. The current adapter supports shadcn/ui. Support for more libraries is planned; those adapters are not available yet. Canon does not install the entire upstream catalog or replace your components with a second visual copy.
What does --save-dev mean?
It adds Canon to devDependencies. Canon runs during development. Your deployed application uses its own saved component source and theme CSS.
Does it guarantee that an agent follows the design?
No. Instructions guide the agent, and checks detect supported violations. They are not a security boundary or a substitute for application tests, accessibility checks and visual review.