Stop building on sand

Why it exists

AI Canvas started as a small experiment. I kept rebuilding the same button, the same modal, the same focus ring on every project, then watching my agent rebuild them worse from scratch. So I started keeping the good versions somewhere an agent could reach them.

The question underneath was simple. What if a piece of UI did not arrive as a screenshot you had to chase, but as finished, readable code you could drop into a project and ship? It felt like there should be a place where components are treated with the same care as code. Built thoughtfully, tested honestly, and shared openly.

Craft you can feel

You cannot always name what makes an interface feel right. You feel instantly when it is wrong. The spacing that drifts on a narrow phone. The animation that lurches. The button that does nothing for half a second and leaves you wondering if you missed.

The work lives in the parts most libraries skip. The easing curve and the duration behind a single transition. The rhythm that holds at 320 pixels and at 1440. The focus ring, the disabled state, the empty state, the loading state, the small flash of feedback when something is pressed. That is the boring eighty percent, and it is exactly where generated UI quietly gives up. A model front-loads the visible happy path and drops the states people hit when something goes wrong. Here those states are built first, not last.

None of this asks for your trust. Open any component, resize it to 320 pixels, tab through it, read the easing curve. Some run real 2D physics instead of scripted ease curves, and you can read that in the source. The care is in the code, not in the marketing.

A component is not finished when it renders. It is finished when it behaves, in every state a real person can reach.

Three ways in, all yours

Browse the registry and preview every component live. When one fits, you have options, because different people build differently and that is the whole point.

Developers run one shadcn CLI command and the fully typed source lands in the project, React with Tailwind CSS and Framer Motion, ready to run. Agents like Claude Code, Codex, and Cursor reach for the AI Canvas MCP and install components themselves. Designers and anyone working in plain language can remix a component with AI instead, changing colors, motion, and layout by describing the change, never from a blank prompt. You can always just copy the source too.

Reproduction prompts for Claude Code, Lovable, and V0 still ship with every component. They are one lane now, the remix lane, not the headline. However it arrives, it arrives as real, open-source code in your codebase.

One language for designers and developers

Most component libraries serve one audience. AI Canvas fits however you build, and that means designers and developers reaching for the same thing and meaning the same thing.

A pre-built component is not a shortcut. It is a decision already made well. For a designer it is a vocabulary, so primary action means one thing across every screen instead of a dozen subtly different things. For a developer it is a foundation they do not have to reinvent. The real value was never the pixels. It is the agreement. When design and engineering point at the same component and mean the same thing, the handoff stops being a negotiation.

Build on rock, not on sand

What you start from quietly decides what you can finish. Begin on a coherent base, a sane spacing scale, consistent tokens, accessible defaults, real states, and every later decision gets easier. Begin on a shaky one and you pay forever. The spacing never quite lines up. Dark mode is an afterthought. The third feature fights the first.

The forty-first modal is never free. Every inconsistent pattern is a thing someone has to find, re-learn, and reconcile later, and that bill compounds in the dark. A polished component is not just today's screen looking good. It is the next ten screens costing less.

Do not pay your AI to start from zero

Craft is not just how it feels. It is what it costs to generate. When you prompt an AI from nothing, you are paying it to invent everything, layout, tokens, states, motion, one token at a time. The output is the expensive part, and from-scratch work is almost all output. Worse, the first pass is rarely the last, so you iterate, and every round re-sends the whole context and re-pays for it.

Start from a finished AI Canvas component and the job flips from generate to adapt. The agent reads a strong, correct base and remixes it. Fewer tokens, fewer rounds, a better result, because a known-good reference makes the hallucinations structurally unlikely. Spend your tokens shaping the last twenty percent, not regenerating the first eighty you could have had for free.

A blank prompt makes the AI guess, and you pay for every guess. Hand it something already good and it stops guessing and starts editing.

Open, and free to start

The free library is open source under MIT, and that source is never hidden. Premium is our one paid exception: proprietary components, design systems, and templates whose sales keep the free library free. Remixing with AI stays free for everyone.

Browsing and previewing are free. Installing is free with a free account, unlimited. Premium is there for people who lean on AI Canvas every day, and what you pay keeps the open library growing.

A note on independence

AI Canvas is not sponsored by, partnered with, or endorsed by Claude Code, Codex, Cursor, Lovable, or V0. It simply works alongside the tools builders already use.

Still early, still growing

This is a solo project, built one component at a time by someone who cares about the easing curve more than is strictly reasonable. It is still early and still growing.