Quickstart

1. Install velloo

Install the CLI from npm on macOS, Linux, or Windows, with Node.js 18 or newer:

npm install -g velloo    # or: pnpm add -g velloo

On macOS and Linux, you can use the standalone installer instead:

curl -fsSL https://get.velloo.design/install.sh | bash

Confirm the shell can find it with velloo --help. Screenshot capture and PNG/PDF export also need a browser; install it when prompted or run velloo browser install later. Whichever way you installed, velloo upgrade updates it through the same channel.

Velloo is open source under Apache-2.0. The source, issues, and releases live at github.com/velloo-design/velloo.

2. Initialize from the app root

cd your-app
velloo init

The wizard asks where the design should live. The default is a velloo/ folder in your repo.

In a detected app, you can choose Redesign a screen, Redesign a component, Custom request, the Elsewhere welcome sample, or Blank. In a repo with no UI code to read, the choices are Design from a live site, the sample, or Blank. For a first useful run, pick a real screen or component.

Velloo then:

• scans the relevant routes, theme, and component setup;
• chooses or confirms shadcn/ui, MUI, Ant Design, Chakra, or no library;
• offers to connect the coding agents installed on your machine;
• offers an optional cloud sign-in and, once signed in, the opt-in feedback tool;
• creates the design, listing it in velloo.json when it lives in the repository; and
• offers to install shell completions.

At the end, the wizard prints a handoff prompt shaped around the goal you chose. Give that prompt to your agent rather than starting with a generic “make this look better.”

3. Open the canvas

velloo run

In an interactive terminal, velloo run stays attached so the canvas state is visible: press o to open it, b to leave it running in the background, or q to stop it. Add --open to open the browser immediately. In non-interactive environments it starts in the background.

One persistent daemon serves each design folder. The browser and every connected agent share that live state. Use velloo status to see running canvases and velloo stop when you want to stop one.

4. Connect your agent

If initialization did not wire it, run:

velloo connect

Velloo detects supported agents, offers global or project-only setup, and writes the appropriate MCP configuration along with agent guidance: a Claude Code plugin, skills for agents that read them, a Cursor rule, or a Gemini CLI extension. Restart the agent after connecting. Connection details →

5. Direct the first loop

Use the wizard’s handoff prompt, or make the outcome and review bar explicit:

Recreate the current account screen at the same desktop viewport. Put that baseline and three genuinely different redesign directions on one board. Preserve our component library and tokens. Show me the canvas before changing application code.

Review the real render, annotate specific nodes, and have the agent compare screenshots where fidelity matters. Once you choose a direction, ask it to implement that direction in the app and verify the result again.

6. Share for review (optional)

The local workflow needs no account. When you want feedback from someone else, sign in and publish a review link:

velloo login
velloo publish

Choose the boards and access level when prompted. Comments sync back to the local canvas for you or your agent to resolve. Cloud details →

Commands you will reach for next

• velloo capture <url>: bring a live page into a redesign workflow.
• velloo export <target> --to review.pdf: share a screen, frame, or board as PNG, PDF, or standalone HTML.
• velloo emit <screen>: inspect the structured output for implementation.
• velloo upgrade: update Velloo, migrate every design in the checkout, and refresh agent skills.

The CLI reference explains the full command map. For working method, continue with Design a screen and Working with your agent.