Co-create software with AI, visually.
A free, open source canvas built from your repo files. Stay in flow, from idea to pixel-perfect code.
Returns, v2
A customer can open a return within 30 days. Refunds go back to the original card once the parcel is scanned.
POST /returns/:id
Your bag
Payment
Order confirmed
Receipt sent to sam@example.com. Arrives Thursday.
#A-10437
Marver turns your codebase into a visual canvas.
So you and your agent can ideate, spec, sketch, design and prototype.
Together, in one place.
The work
Every stage, on the same canvas.
Start wherever the work really starts. Nothing here is required, and nothing here is a separate tool.
Collect the taste before the pixels.
Drop in the screenshots and references you like, and your agent arranges them into a board you can argue with.
Direction: quiet retail
Aa
Tight display, generous body, no italics
Editorial spacing, photography on off-white
Direction: quiet retail
Aa
Tight display, generous body, no italics
Editorial spacing, photography on off-white
Boil your intent down into a spec.
It renders on the canvas as diagram-rich markdown, or as a full HTML artifact when the spec deserves one.
Returns, v2
A customer can open a return within 30 days. Refunds go back to the original card once the parcel is scanned.
POST /returns/:id
Nail the layout and the copy.
Plain low-fidelity frames keep the argument on what matters, then stitch into a flow you can walk.
Your bag
Your bag
Summary
Order confirmed
Receipt sent to sam@example.com. Arrives Thursday.
#A-10437
Then design it like you mean it.
High fidelity from your own components, icons and theme. Not a picture of the screen. The screen.
Your bag
Payment
The canvas
The desk you and your agent share.
This is where the two of you point at things, disagree, change your mind, and agree on what to build next.
Every width, without rebuilding anything.
Select the frames and pick a device. They resize, the board re-tidies itself, and because these are real viewports your real breakpoints fire.
Your bag
See your app in every outfit.
One key flips the whole board between light and dark, or only the frames you selected. Contrast that breaks in one appearance has nowhere left to hide. Try it here: it flips this page too.
Payment
Double-click, and it comes alive.
It is real code, so it behaves like real software. Fields take focus, menus open, scroll areas scroll, links carry you to the next frame.
Payment
Experience the thing you are building.
You are looking at play mode. Change the device, flip the appearance, walk to the next screen. This is what you hand someone before the product exists.
Your orders
3 active- Heavy cotton teeOut for delivery$56.00
- Wool watch capArrives Thursday$38.00
- Canvas toteRefund pending$42.00
Your bag
Your bag
Ana39m
CVC needs a hint. People type the long number here.
Mo35m
Same on expiry, the fields look identical.
Nic19m
On it. Both get placeholder text.
None of this is a design artifact.
Every spec, diagram, image and frame is a local file, using your framework, themes and components.
Going to production is adding the functionality.
The system
It is just a folder in your repo.
One package, one directory, local files. Nothing is locked into a proprietary format.
Conventions, not a file format.
Frames live in folders you can name. Their states sit beside them and their data sits next to both.
design/ scenes/checkout/ cart.tsx # one frame, one component empty.tsx # states are sibling files _fixtures.ts # the data it renders theme.css # imports your stylesheetA component you can look at.
One file exports one component, and Marver draws it on the canvas. That is the entire format.
design/scenes/checkout/cart.tsx
import { Button } from "@/components/ui/button"
import { fx } from "./_fixtures"
export const meta = { viewport: "laptop" }
export default function Cart() {
return (
<Bag items={fx.full}>
<Button data-goto="checkout/pay">
Checkout
</Button>
</Bag>
)
}Your bag
Every state, ready to walk through.
Fixtures are a few lines of typed props. Empty, loading and error become frames you can click through in play mode.
design/scenes/checkout/_fixtures.ts
export const fx = { empty: { items: [] }, loading: { pending: true }, error: { message: "Card declined" }, full: { items: [tee, cap] },}Your bag
Your bag
Your bag
What is left is the backend.
Your theme, your components and your stack are already in the frame. Shipping swaps the fixture for the real data.
design/scenes/checkout/cart.tsx
import { Bag } from "@/components/bag"import { fx } from "./_fixtures" export default function Frame() { return <Bag {...fx.full} />}app/cart/page.tsx
import { Bag } from "@/components/bag"import { getBag } from "@/lib/api" export default async function Page() { return <Bag {...(await getBag())} />}Use it where you already work.
The canvas is a localhost tab. Your editor stays your editor, and any agent can drive it.
1import { Button } from "@/components/ui/button"2import { fx } from "./_fixtures"3 4export const meta = { viewport: "mobile" }5 6export default function Empty() {7 return (8 <Bag {...fx.empty}>9 <Button>Start shopping</Button>10 </Bag>11 )12}Added checkout/empty.tsx next to cart.tsx, using your Button and the cart fixtures.
It is on the board now, sized to mobile.
Your bag
Payment
No MCP server, no plugin, no extension. Files it writes, and instructions it reads.
- Claude Code
- Cursor
- opencode
- Codex
- T3 Code
- Conductor
- Antigravity
- Factory
Craft
Did you know it comes with taste, too?
Marver comes with skills to teach your agent design thinking, wireframing, UI design and copy writing — not just how to draw a frame.
Your bag ships Friday.
Items, carrier, and delivery window in one view.
Your bag ships Friday.
Items, carrier, and delivery window in one view.
They are files in your repo. Edit them, or overrule them in DESIGN.md.
One prompt, and the canvas is yours.
Free and open source. It runs on your machine, inside your repo.
Run npm i -D @marver-design/marver and follow its instructionsApache 2.0. No account, no cloud, no seats.