Give your coding agent a place to design.
Velloo is an open-source, local-first canvas for exploring design with your
coding agent. Try directions in real components, refine them yourself or with
feedback from others, then implement the one you believe in.
Quickstart · Watch the film · Documentation · Contributing · Discussions · velloo.design
Quickstart
npm install -g velloo # or: pnpm add -g velloo
cd your-app # or an empty folder, to start something new
velloo init # opens a setup page in your browser
init starts a small local server and prints its URL — press Enter to open it.
The page reads your app (its components, theme and routes), asks only what it
can't answer — where the design lives and how you want to start — and then
opens the canvas with your agent already at work in its Agent tab. In an app
that already exists, that agent's first task is setup: it imports your theme
and real fonts, gets your own components rendering on the canvas and checks
every one of them, then proposes your design language for you to review there.
After that, ask for what you came for:
"Use Velloo to explore three genuinely different directions for the billing
page. Put them side by side on one board, and show me the canvas before you
change any application code."
The canvas runs Claude Code, Codex or any ACP agent you have installed. To use
Velloo from an agent outside it, tick that agent on the setup page or run
velloo connect; then ask it to "Set Velloo up for this app"
(/velloo:setup in Claude Code). velloo run reopens the canvas later.
The agent builds on the canvas and you react to pixels instead of to a diff.
For the agent to see its own work, install the optional headless browser once
with velloo browser install.
init only creates a design folder and agent configuration; it never changes
your app's source. The quickstart guide
covers the standalone installer, the setup page's choices, and what to do next;
Connect an agent covers every
supported agent and manual MCP setup.
Status: early and moving fast. The design-folder format is versioned and
migrated by velloo upgrade, but expect rough edges and breaking changes
before 1.0. Bug reports and design feedback are very welcome.
Why Velloo
Making things got cheap. Deciding what to make did not.
Exploring alternatives and refining them with feedback is how good design has
always worked. What changed is where screens start: in a code editor, with an
agent, often before anyone has talked about the design. When the first working
interface arrives looking finished, that conversation is easy to skip.
Velloo brings it to the repository and the agent you already use, so it can
happen before the code lands.
How it works
The loop the film shows:
- Explore. One prompt, several directions, composed on the canvas from
real components and checked by the agent against its own screenshots.
- Refine. Pin comments on the one you like. The agent addresses them and
replies in the thread, or you tune props and styles yourself.
- Publish and review (optional). Send a board to Velloo Cloud. Anyone
with the link comments in a browser, and their notes return to your canvas.
- Ship. The agent reads the chosen screen as framework-native output,
writes real application code, and compares the running app to the design.
Under the canvas, each screen is a readable JSON tree of components, props, and
styles in a folder you own. You see the interface; your agent reads the same
structure, which is how it makes precise changes and carries a design into
code. Concepts →
Ways to use Velloo
- Start from scratch. No app required. Pick a component library, then
design a new product from the sample board or a blank canvas, as the film
does. Design a screen →
- Redesign an existing screen. Recreate a route as a faithful baseline,
explore alternatives beside it, and compare with the running app.
Port an existing page →
- Work from a live page. Capture a public or signed-in page with
velloo capture when the starting point is a browser, not a route.
- Act on feedback. Hand the agent the open comments, local or from a
published link. Velloo Cloud →
- Implement the chosen design. Turn a screen into code in your app's
conventions. From design to code →
For the thinking behind this way of working, read
Why I created Velloo.
Works with your stack
| Your app | How it's styled and emitted |
|---|
| shadcn/ui + Tailwind | Your own component files, Tailwind className |
| Material UI | Real @mui/material, the sx prop |
| Ant Design | Real antd components, inline style |
| Chakra UI | Real Chakra v2 components, sx |
| No-library React | Plain HTML primitives, Tailwind or inline style |
| HTML + htmx | Your app's CSS, native markup with hx-* (guide) |
| Anything else your app renders | Mantine, a private design system, your own components/ (how) |
It connects over MCP to Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI,
OpenCode, Windsurf, and other MCP clients, and runs on macOS, Linux, and
Windows. Framework-native, in depth →
Local-first, cloud optional
The local tool is free, complete, account-free, and telemetry-free. The only
request it makes on its own is an anonymous, at-most-daily check of the public
npm release version (VELLOO_DISABLE_UPDATE_CHECK=1 turns it off).
Velloo Cloud is the opt-in half, behind an
explicit velloo login: published boards, review links, comments that return
to your canvas, and hosted asset generation. velloo publish uploads what your
machine rendered; the cloud never executes your app code. Reviewers need no
install, repo access, or paid seat. Plans are on the
pricing page.
Documentation
velloo.design/docs has the guides, concepts,
and reference:
CLI ·
MCP tools ·
Design folder ·
Themes ·
What's new ·
FAQ
For how Velloo itself is built, see docs/: the
architecture, the MCP surface,
writing a framework adapter, and
designs kept outside the repo.
Contributing
Contributions are welcome — bug reports, adapters, docs, and design feedback
alike. CONTRIBUTING.md covers setup and the checks we
expect to be green; AGENTS.md explains the package layout and
the architecture invariants before you change anything foundational.
bun install # also builds the snapshot manifest
bun run --cwd packages/canvas build # build the canvas SPA
bun run velloo init /tmp/velloo-smoke
bun run velloo run /tmp/velloo-smoke # canvas on :7300
bun run verify # typecheck + lint + knip + tests
Good first issues are labelled
good first issue.
Community and support
License
Velloo is open source under the Apache License 2.0.
The Velloo name and the interlinked-frames mark are trademarks and are not
covered by the code license — fork the code freely, but don't ship a derivative
under the Velloo name or logo. See TRADEMARK.md.
