Lunagraph

lunagraph.com/

Lunagraph is a design tool that lets someone build UI components with multiple states and interactions on a visual canvas, then export the result as production React code rather than a static mockup. Its hero copy, "Design with code, on your familiar design canvas," is followed by a three-step structure labeled numerically — "01·Design, 02·Component, 03·Code" — and the page runs a space-mission metaphor (referencing the Apollo-Soyuz mission) through its section framing, an unusual choice for a design tool. It connects to external coding agents like Claude Code and Cursor via MCP under a "bring your own agent subscription" model, and can import existing design systems and components directly from a connected repository. No About page was found; contact is a direct email address and a booking-calendar link rather than a company bio.

Category

Developer Tools

Style

LightMinimal

Stack

Next.jsFramerTailwind CSS

Fonts

LarkenCircular

Copy CSS

Palette

Copy allCopy CSS vars

Meta title

Lunagraph: Design canvas that writes code, powered by Claude Code

Sections

4

Updated

Sep 22, 2026