{code, visually}

Your familiar design canvas, but everything is React code

Design with real components, all in React, HTML, and CSS. From play to production, all in one canvas.

Design Studio

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.

Web Previewlocalhost: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.

~/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
❯

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

{what we believe}

Sculptors understand their stone, its properties, its behavior, and when it breaks. They don't hand off a sketch and hope someone else carves it right. They sculpt it themselves.

div

design, with code.

The ones who care about the end product should understand the material it's made of, and own it to production.

{for design engineers}

Design that ends with code, should start with code.

For technical designers who want to work visually without leaving the code. Explore, refine, and ship, all on one canvas.

Design Studio

01 — EXPLORATION

Paste inspo, ask Claude, copy, paste, remix across versions.

Drag things around, paste inspiration and screenshots, spin up variation after variation, remix what's working, and ask Claude when you want a head start. A familiar design canvas with all the controls you need.

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.

section

Now in 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.

img

Use thisScreenshotas design inspiration and thisColor Palette Cardto update my hero section — match the color palette and overall layout from the screenshot.

Layout

Flow

Wrap items

Resizing

100%

Alignment

Distribute

02 — MAKE COOL STUFF

Make cool stuff with React. Shaders, motion, interaction, with fully custom controls.

Build shaders, animation and interactive prototypes right on the canvas, the kind of cool stuff that usually waits for an engineer. It's all real React, so the wildest experiment still comes with its code attached.

Lunagraph Desktop

MoonField.tsx

MoonField.tsx
COPY
1<MoonField
2  grain={45} contrast={50} brightness={22} saturation={29}
3  maxBlur={52} blurInner={97} blurOuter={61} blurFeather={53}
4  blurLayers={14} blurProgression={3} blurSpreadX={74} blurSpreadY={94}
5/>

MoonField

Props

Image

Grain45

Contrast50

Brightness22

Saturation29

Blur

Max blur52px

Inner radius97

Outer radius61

Feather53

Layers14

Progression3

Spread X74

Spread Y94

Props are the controls

Every prop you write becomes a slider, toggle or field. No plugin API — it's just React.

03 — NARROW DOWN & TIDY UP

Use your components, design tokens, clean up styling, scroll, and responsiveness.

Pick the winner, then refine it for real: fix the flexbox, clean up the CSS, switch to Tailwind classes, sort out relative positioning and responsiveness. Tidying the design is tidying the implementation, it's the same code.

Lunagraph Desktop

Chat

Layers

Insert

Assets

Icons

components/ui/button.tsx

Button Default

Button Default Variant

Tokenstailwind.config

--primary

--primary-foreground

--accent-50

--accent-500

@yourteam/web-app

Toast

Changes savedYour edits have been synced

Selection
COPY
1import { Toast } from "./Toast"
2import { Button } from "./Button"
3import { CheckCircle } from "lucide-react"
4
5export function SavedToast() {
6 return (
7    <Toast className="bg-white border-border">
8      <CheckCircle size={18} className="text-green-600" />
9      <div>
10        <p className="text-foreground">Changes saved</p>
11        <p className="text-muted-foreground">
12          Your edits have been synced
13        </p>
14      </div>
15      <Button variant="outline">Undo</Button>
16    </Toast>
17 )
18}

04 — IMPLEMENT & ITERATE

Implement. Copy, paste, and it just works. It was code all along.

Copy the code into your repo and open it on localhost across different viewports. Refine back on the canvas as you go. The canvas runs on your codebase's own components, so nothing gets lost in translation.

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

Now update the feature comparison table too

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.

http://localhost: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.

~/projects/my-app — zsh — 80×24
❯pnpm dev
▲ Next.js16.1.4(Turbopack)
✓Ready in 5.3s
GET/200in 303ms

AI File Access

~/code/lunagraph

Choose folder...

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

{lunagraph:studio}

Want a design cofounder? Partner with the studio

We partner with you to turn users’ problem, the business outcome, and the technical constraints into the right experience and flows.

Design Studio

Standard Signal (YC P26)·Product UI/UX, Branding

Waldium (YC S23)·Product UI/UX, Web Design

Trainy (YC S23)·Web Design/Dev, Branding

Phind (YC S22)·Product UI/UX, Branding

Grade (YC W26)·Product UI/UX, Branding

Digb ·Branding, Web Design/Dev

hey, I’m Putri. Founder, designer, engineer. Designed for 10+ YC companies.

Join the code-native design era

The best way to design with code, for design-engineers and AI-native startups.

Design Studio