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
- Engineering & Infrastructure
- Style
- LightMinimal
- Stack
- Next.jsFramerTailwind CSS
- Fonts
- LarkenCircular
- Palette
- Meta title
- Lunagraph: Design canvas that writes code, powered by Claude Code
- Sections
- 4
- Updated
Lunagraph's landing page, section by section
Each section below is cropped straight from Lunagraph's live page — useful references for engineering & infrastructure landing page design.
Lunagraph design review: how the homepage is built
Lunagraph's 9,457-pixel page is a white software essay, framed by a grainy dark oval and punctuated by large serif statements. Metadata lists Larken and Circular, reflected in editorial headings and compact interface labels. The page connects canvas editing to React code through pale application windows, code panels, and local-preview screens. Black rounded actions and faint grey borders keep the layout restrained. A process sequence leads to studio examples, a final call to join the code-native design era, and a three-column footer.
Hero canvas
The dark texture sits behind the Lunagraph logo and two top links, “Design studio” and “Get the canvas”. A monospace “{code, visually}” label introduces “Your familiar design canvas, but everything is React code”, followed by the React, HTML, and CSS subhead. “Get the canvas” and “Design Studio” sit side by side. Below, “Lunagraph Desktop” is a working window: Chat, Layers, Insert, Assets, and Icons tabs flank a selected component, web preview, code editor, and terminal.
Belief and process
A belief section centers “{what we believe}” above sculptor language and a selected text object reading “design, with code.” The next statement, “Design that ends with code, should start with code.”, restarts the process. “01 — EXPLORATION” introduces “Paste inspo, ask Claude, copy, paste, remix across versions.” A large image combines a chat request, draggable objects, inspector panel, and floating prompt bar, making the sequence concrete.
Four code-native stages
The subsequent stages are presented as a vertical method rather than feature tiles. “02 — MAKE COOL STUFF” pairs custom visual controls with a code snippet and a blurred image object. “03 — NARROW DOWN & TIDY UP” shows a component asset panel beside saved-toast code. “04 — IMPLEMENT & ITERATE” returns to the multi-pane desktop with codebase access, preview, and terminal. Each stage leaves broad white intervals between copy and image, giving the demonstrations the same measured tempo as the opening canvas.
Studio and closing action
A pale-grey studio area asks “Want a design cofounder? Partner with the studio” and displays project thumbnails in a horizontal strip. A small founder introduction sits below the work. The close returns to white with “Join the code-native design era”, a short supporting line, and the paired original actions. The footer is divided into “Let's Chat”, “Connect”, and “Company”, collecting Book a call, email, LinkedIn, X, Support, Privacy Policy, and Terms of Service beneath the logo.
On mobile
At 390 pixels, the grainy top field still frames the title, but the wide application compresses into a narrow montage of chat, canvas, preview, code, and terminal. Opening actions remain paired. The belief statement, process headings, and stage titles become a vertical reading track, while each capture becomes a smaller full-width illustration. The studio carousel displays one lead project with a partial neighboring card. The final pair stays side by side, and the footer becomes three stacked groups.
Worth borrowing
- Repeated application views can demonstrate a workflow while a page remains editorial in tone.
- Large white intervals let serif claims and technical diagrams alternate without competing.
- A numbered process can organize varied product evidence into a clear through-line.
