The design canvas you know, but it writes real code, powered by Claude Code.

Lunagraph lets you design and create UI using real HTML, CSS and React code. Stay consistent with zero handoff and work between teams, designers, product, developers, and agents.

Read the docs

Sculptors don't hand off a sketch and hope someone else carves it right. They shape the stone themselves.

div

Software should work the same way.

The ones who agonize over every pixel should be shipping the final code for the design.

Design with the raw material.
The code itself, not an abstraction of it.

The best design decisions come from working directly with what ships. No handoff gaps, no lost-in-translation moments — just designers shaping real components, real logic, real output.

Lunagraph Desktop

Pages
Sidebar
Github Connect
Landing Page
Chat
Layers
Insert
Assets
Icons
Layers
</>div
</>div
</>div
</>div
</>h1
TYour familiar desig...
</>p
TLunagraph lets yo...
</>div
</>img
</>div
</>div
</>div
</>div
</>h2
TSculptors don't ...
</>p
TSoftware should...
</>div
div

Finally, design is code.

The deliverable isn't a design file. It's the code itself. No more translating pixels into tickets. What you craft is what ships.

NewComponent.tsx
COPY
1export function NewComponent() {
2 return (
3 <div className="flex flex-col gap-4 w-fit p-6 bg-background">
4 <h2 className="font-serif tracking-tight font-medium text-3xl text-foreground leading-tight">
5 Finally, design is code.
6 </h2>
7 <p className="max-w-2xl leading-relaxed text-lg text-muted-foreground">
8 The deliverable isn't a design file. It's the code itself.
9 No more translating pixels into tickets.
10 </p>
11 </div>
12 )
13}
HTMLHTML
CSSCSS
ReactReact

Work together with Claude Code, a creative design partner that carries the full picture.

Your documents, the canvas, your moodboard and inspiration, down to the codebase itself. Every decision informed by everything you've already built.

Lunagraph Desktop

Chat
Layers
Insert
Assets
Icons
Can you help me refactor the sidebar component? It's getting too complex and I want to split it into smaller pieces.
12 tool calls
I've broken the sidebar into three components: SidebarNav, SidebarHeader, and SidebarFooter. Each one handles its own state and the main Sidebar just composes them together.
Nice, that looks clean. Can you also add a collapse toggle to the sidebar?
8 tool calls
Done — added an isCollapsed state with a toggle button in the header. When collapsed, it shows only icons and the nav labels animate out with a 150ms transition.
img
Image
section
Now in public beta

Finally, design is code.

The deliverable isn't a design file. It's the code itself. No more translating pixels into tickets. What you craft is what ships.

Get started
Watch demo
ColorPaletteCard
Color Palette System
12 colors
Warm Whites
Ivory#FAF8F5
Linen#F5F0EB
Sand#EDE8E1
Oat#E6DFD5
Accents
Butter#F9F0E2
Rose#F5E1E8
Mint#E8F0ED
Thistle#EDE5F0
Use thisScreenshotas design inspiration and thisColor Palette Cardto update my hero section — match the color palette and overall layout from the screenshot.

The full design-to-codebase round trip, in one platform.

The chat sees your canvas and your local codebase. Design on the canvas, implement straight into your repo, preview the result in a live iframe — then screenshot both to compare. No context switching, no handoff.

Lunagraph Desktop

Chat
Layers
Insert
Assets
Icons
Wire up the pricing card designs to my repo. Put them in src/components/pricing/
local_readsrc/components/pricing/PricingCard.tsx
local_editsrc/pages/PricingPage.tsx
Created PricingCard and PricingTier components matching your canvas designs, and wired them into PricingPage with the three-tier layout.
Now update the feature comparison table too
canvas_readFeatureTable element
local_readsrc/components/pricing/FeatureTable.tsx
local_editsrc/components/pricing/FeatureTable.tsx
14- <table className="w-full">
14+ <table className="w-full border-collapse">
22- <td>{feature.name}</td>
22+ <td className="py-3 px-4 border-b">
23+ {feature.name}
24+ </td>
Approve
Reject
section

Your familiar design canvas, but it writes code, and AI powered.

Lunagraph lets you design and create UI using real HTML, CSS and React code. Stay consistent with zero handoff and work between teams, designers, product, developers, and agents.

Hero screenshot
iframelocalhost:3000

Your familiar design canvas, but it writes code, and AI powered.

Lunagraph lets you design and create UI using real HTML, CSS and React code. Stay consistent with zero handoff and work between teams, designers, product, developers, and agents.

Hero screenshot
~/projects/my-app — zsh — 80×24
❯pnpm dev
▲ Next.js16.1.4(Turbopack)
- Local: http://localhost:3000
- Network: http://10.0.0.10:3000
✓Ready in 5.3s
GET/200in 303ms
❯

AI File Access

/Users/anya/code/lunagraph
Choose folder...

These paths let the AI read/write files outside your project.

Join designers who write real code.

div

Design and ship in one canvas.