Design with real code
Create UI with real HTML, CSS, and React rather than an abstract design layer, so the output matches what ships.
Lunagraph
Lunagraph is a design canvas for building UI with real HTML, CSS, and React code, powered by Claude Code. It is aimed at designers, product teams, and developers who want design and implementation to stay in sync.
Overview
Lunagraph is a design canvas that writes real HTML, CSS, and React code, powered by Claude Code. It is positioned as a place where design and implementation happen together instead of through a handoff step.
The product is built for teams that want the canvas, the chat, and the codebase to stay in sync. The source describes a workflow where designers, product people, developers, and agents can shape UI directly, preview changes in a live iframe, and compare the canvas with the implementation before shipping.
Key features
AI-assisted canvas editing
Claude Code works inside the canvas to generate and edit code as you design, with the product presented as "powered by Claude Code."
Round-trip editing
Keep the canvas and codebase aligned by editing in either place and letting changes sync in both directions.
Zero-handoff workflow
Work from the same source of truth across designers, product, developers, and agents to reduce translation between design and implementation.
Website-to-canvas capture
Use a Chrome extension to copy UI from any website and paste it into Lunagraph as a starting point.
Desktop canvas workspace
Start from the desktop app and work with pages, sidebar navigation, chat, layers, insert tools, assets, and icons as part of the canvas workflow.
Use cases
Designing UI that ships as code
Designers can work directly on the final code structure instead of handing off static mockups and waiting for implementation to catch up.
Collaborative product iteration
Product and engineering teams can use the shared canvas and codebase to keep implementation aligned with design changes.
Component refactoring with visual feedback
Developers can break apart or refine components in code while keeping the canvas representation in sync through round-trip editing.
Importing web UI as a reference
Teams can capture an existing website UI with the Chrome extension and use it as a starting point for further edits in Lunagraph.
Previewing and comparing changes
People exploring layout or styling changes can preview updates in a live iframe and compare the canvas with the rendered result before approving work.
Pros and Cons
Pros
- Uses real HTML, CSS, and React code instead of an abstract export layer.
- Supports editing in both the canvas and code with two-way sync.
- Includes Claude Code directly in the design workflow.
- Offers a Chrome extension for copying UI from websites into Lunagraph.
- Keeps design, preview, and code in one workflow to reduce handoff gaps.
Cons
- The pricing page in the provided sources returns a 404, so pricing and plan details are not confirmed.
- The documentation set provided is still limited, so some platform, integration, and deployment details are not fully documented in the source.
FAQ
What is Lunagraph?
Lunagraph is described as a design canvas that writes real HTML, CSS, and React code, with Claude Code assisting directly on the canvas. The source does not state a formal access model beyond a public beta and an invite-style "Get Access" prompt on the homepage.
How do you get started with Lunagraph?
The docs say you can download Lunagraph, install Claude Code, and use a Chrome extension to copy UI from any website into the canvas.
Who is Lunagraph for?
Lunagraph is intended for designers, product teams, developers, and agents who want the design canvas and the codebase to stay in sync.
What does Lunagraph cost?
The source shows the pricing page currently returns a 404, so there is no confirmed pricing information available from the provided pages.
Can I edit both in the canvas and in code?
The docs describe round-trip editing: you can edit in the canvas or in code, and changes sync both ways.
Quick Facts
- Category
- Design tool
- Primary workflow
- Canvas-based UI design with code generation
- Code output
- HTML, CSS, React
- AI layer
- Claude Code
- Source domain
- lunagraph.com
- Pricing page
- Returns a 404 in the provided sources
Alternative a Lunagraph
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repositories and verifies changes with the real compiler, debugger, sanitizers, and tests before showing a diff. It offers a free tier plus paid plans, with editor connectors and zero-retention handling described in the source.
GitBot
GitBot is a local browser-based workspace for creating reusable coding bots powered by Claude Code, Codex, or OpenCode. It helps developers run those agents across repository folders with persistent threads and configurable permissions.
Grok 4.7
Grok 4.7 is an xAI model for software development and knowledge work, including extended coding tasks and professional analysis. It is available through Grok Build, Cursor, the Grok API, and other developer platforms, with token pricing starting at $2 per million input tokens and $6 per million output tokens.
ClawTick
ClawTick is an AI agent automation platform for scheduling jobs from the CLI, dashboard, or REST API. It is aimed at developers and teams running LangChain, CrewAI, webhook, or custom agent workflows that need monitoring, alerts, and logs.
Falconer
Falconer is an AI-powered company brain that keeps internal documentation accurate, searchable, and up to date by syncing with tools like GitHub, Slack, and Linear. It helps engineering and cross-functional teams centralize knowledge and answer questions from a shared source of truth.
Ghost
Ghost è un assistente AI da terminale per chattare, generare codice ed eseguire task da riga di comando. Include modelli gratuiti, supporta Linux, macOS e Windows, ed è open source.