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.

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

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.

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.

export 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>
  )
}

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.

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.

AI File Access

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

Join designers who write real code.

Design and ship in one canvas.