# [Lunagraph](<https://www.lunagraph.com/>)

Design canvas that writes code, powered by Claude Code — design and create UI using real HTML, CSS, and React with zero designer-to-dev handoff.

Freemium·AI·Design Tool·React·Claude Code·Code Generation

Freemium·AI·Design Tool·React·Claude Code+1

![Lunagraph preview 1](<https://lunagraph.com/og.png>)

![Lunagraph preview 2](<https://creatorstoolbox.com/images/galleries/lunagraph-og-ef9c443fca5543c98bda550db3b16d4af541496b63836af56f282041ec0c8e7b.jpg>)

![Lunagraph preview 3](<https://creatorstoolbox.com/images/galleries/lunagraph-051c91498b41d8da563bbf3b16907aad4fce61b35351d66822bce4fc165ba6f3.jpg>)

![Lunagraph preview 4](<https://creatorstoolbox.com/images/galleries/lunagraph-e19e20cd4f8838b10f7ff33342c40e317b7304f0299058b94f8629fdb1e4eba4.jpg>)

## What is Lunagraph?

Lunagraph is a design canvas powered by Claude Code that produces real HTML, CSS, and React as you design. Instead of building a high-fidelity mock in Figma and then re-implementing it in code, you design directly on a canvas that emits production-grade markup. Designers, developers, and agents all share the same artifact, so consistency between design and implementation comes for free.

## Features

- Design canvas that writes real HTML/CSS/React

- Powered by Claude Code under the hood

- Zero handoff between design and dev

- Designers, developers, and agents in one tool

- Stay consistent across the design system

## FAQs

Common questions about Lunagraph

Is Lunagraph free?

Lunagraph has a free tier with paid plans for higher usage. See the site for current pricing.

What does Lunagraph output?

Real HTML, CSS, and React code — not exported screenshots or design tokens.

How is this different from Figma Make / v0?

Lunagraph emphasizes a design canvas (visual-first) plus Claude Code under the hood, with the explicit goal of zero designer-to-dev handoff.

Similar Launches

[![mtioon](<https://mtioon.com/icon.png>)

mtioon

Prompt-driven motion design editor that connects to Claude Code, reads your project assets, and builds editable videos on a real timeline.](<https://creatorstoolbox.com/tools/mtioon>)[![Wonder](<https://creatorstoolbox.com/images/wonder-design-logo.jpg>)

Wonder

AI design tool that generates UI designs and exports production-ready React + Tailwind code.](<https://creatorstoolbox.com/tools/wonder-design>)[![Google AI Studio](<https://www.google.com/s2/favicons?domain=aistudio.google.com&sz=128>)

Google AI Studio

Build, test, and deploy AI apps with Gemini — Google's free web-based IDE for generative AI prototyping.](<https://creatorstoolbox.com/tools/google-ai-studio>)[![Bolt Slides](<https://www.google.com/s2/favicons?domain=bolt.new&sz=128>)

Bolt Slides

Open-source building blocks any AI agent (Claude Code, Codex, Bolt) can use to compose presentation decks that are real, shareable web apps.](<https://creatorstoolbox.com/resources/bolt-slides>)

---
Canonical source: https://creatorstoolbox.com/tools/lunagraph