Web AppAI-Enhanced
Bundance
AI-powered shopping and price tracking application
{ CASE STUDY }
AI Canvas
A platform for AI-native components and design systems. Built for designers who remix and developers who install.
Web AppAI-Enhanced
A quiet shift in the way we design and build - not with a bang, but with a conversation. Where creativity becomes momentum, and seeing the whole picture is what turns that momentum into something real.
{ OVERVIEW }
What it is
AI Canvas is an open-source platform for AI-native components and, soon, entire design systems. Every piece ships with three reproduction prompts tuned for Claude Code, V0, and Lovable, alongside one-line CLI installation. Two entry points into the same component. Always both. Always free.
54+Components
3AI Platforms
8Categories
$0Forever
{ the gap }
Yesterday's libraries. Today's workflow
Modern component libraries solve an old problem well. They give you buttons, cards, and inputs that work, ship, and scale. What they don't do is adapt to the way people actually build interfaces now, by describing them in words to an AI that writes the code back. That gap matters. A designer with an idea shouldn't have to dig through source files to explore a variation. A developer shouldn't have to rewrite a component every time the brief shifts. Both groups end up guessing which prompt will get them there. The leverage is already in the room. AI can generate, remix, and tune components in seconds. What's missing is a library built for that conversation from the start.
{ PERSONAS }
Two people. Same goal. Different paths
AI Canvas is built on two user personas. Same problem, solved differently depending on how you work.
Designer
Remixes with AI
Wants to explore variations fast, without touching source files. Reaches for Claude Code, Lovable, or V0 to try a component, reshape it, and ship something that feels original. The prompt is the starting point. The component is the canvas.
TOOLS
Claude CodeLovableV0
PATH
Hit "Remix with AI", copy the prompt, paste, go.
Developer
Installs via CLI
Wants code that drops into an existing project without ceremony. Cares about TypeScript, motion physics, and components that don't fight the rest of the codebase. One command installs everything. Nothing is locked, everything is extensible.
TOOLS
TypeScriptFramer MotionTailwind CSS
PATH
Copy the CLI command, run it, done.
{ Design System }
Before the platform, the system.
Designers live in Figma. Developers live in the terminal. Both stare at dark backgrounds all day, one by choice, one by default. That shared context became the starting point. A dark canvas made sense for both. A single accent color to cut through it. A neutral scale that gets out of the way. The system wasn't designed to be seen, it was designed to make everything built on top of it feel inevitable.
{ The platform }
A welcoming home for everything built
The platform is designed around two things: making every component instantly findable, and making every first visit feel like an arrival, not a landing page.
The homepage greets every visitor in their language. Hello. こんにちは. Bonjour. Hola. Ciao. A small detail that sets the tone for everything that follows: this is a tool built with people in mind, not just output in mind.
{ INSIGHT }
Building with words changes what's possible
Something changes when you stop clicking and start describing. The back and forth between what you imagine and what AI generates opens a creative space that didn't exist before. The output isn't just faster. It's different.
For designers
From Figma to words to something real.
Describing a component well is a design skill. Knowing what to ask for, how to frame the interaction, what feeling the motion should have. That translation from visual thinking to precise language is where the craft lives. Every component on AI Canvas ships with prompts that already speak that language, tuned for Claude Code, Lovable, and V0, so the first result is something you can actually use.
For developers
One command. Everything included.
No setup, no hunting through docs, no rewriting to fit your stack. Copy the CLI command, run it, and the component is in your project. TypeScript, Framer Motion, Tailwind. Ready to customize, ready to ship.
A living library, always growing
Every component in the library is animated, categorized, and ready to use. The overview below shows the range, from physics-driven cards to interactive backgrounds to glassmorphism UI sets.
{ COMPONENT PAGE }
Every component is a complete environment
The component page was designed as a self-contained workspace. Everything you need to evaluate, test, and take action is on one screen, nothing hidden, nothing requiring a separate step.
Live Preview and Code, side by side
Every component lives in two states at once. The Preview tab shows it alive. The Code tab reveals everything behind it, the full source, ready to read, copy, or modify.
Light and dark variants
Not every component looks the same in both modes. Some shift subtly, others transform entirely, taking on a different character depending on the surface they sit on. The toggle is there so you can see both before you decide. What you preview is what ships, in whichever environment your project lives in.
Full screen is available on every component
Full screen expands the component to fill the entire viewport, neutral background, no distractions, no surrounding UI making decisions for you. Just the component, seen clearly, exactly as it is.
{ WHAT'S NEXT }
Still growing
AI Canvas is a live project. New components ship regularly, design systems are in the works, and SVGs are coming. The open-source nature of the project means the library grows with every person who finds it useful and contributes back. Everything is free. Everything is open. That's not a pricing decision, it's a design decision.
AI Canvas is my first project built entirely from scratch, solo, from the first token to the live URL. It exists because the problem felt real enough to spend nights and weekends on. I
