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

[lunagraph.com](<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.

[Graphic Design](<https://creatorstoolbox.com/communities/graphic-design>)[Web Design](<https://creatorstoolbox.com/communities/web-design>)[Development](<https://creatorstoolbox.com/communities/development>)[Artificial Intelligence](<https://creatorstoolbox.com/communities/ai>)

Media 1 of 4

## About 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.

Pricing model: Freemium

## 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 products

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

mtioonmtioon.com

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/products/mtioon>)

- [![Wonder](<https://creatorstoolbox.com/images/wonder-design-logo.jpg>)

Wonderwonder.design

Design canvas where you and your agents work on a live app, then send approved changes back to code.](<https://creatorstoolbox.com/products/wonder-design>)

- [![Google AI Studio](<https://www.google.com/s2/favicons?domain=aistudio.google.com&sz=128>)

Google AI Studioaistudio.google.com

Build, test, and deploy AI apps with Gemini — Google's free web-based IDE for generative AI prototyping.](<https://creatorstoolbox.com/products/google-ai-studio>)

- [Stageshowbenji.org

Free MIT-licensed agent skill for faux product UI stills, cursor animations, and bento grids, in React and plain CSS.](<https://creatorstoolbox.com/products/stageshow>)

- [![Bolt Slides](<https://www.google.com/s2/favicons?domain=bolt.new&sz=128>)

Bolt Slidesgithub.com/stackblitz/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/products/bolt-slides>)

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