Design with code. Code with design.

Explore, refine, and hand off everything in React code.
Ready for your engineers and coding agents.

Download Docs

Continue

Mission controlCSM-111 · Apollo-Soyuz

Linking

CSM-111

In orbit

3In orbit

1Docked

2On pad

Orbit 29 to Soyuz docking1h 42m left

Telemetry 12 seconds ago

View trajectory

Start burn

CSM-111

In orbit

Stats

3In orbit

1Docked

2On pad

Orbit 29 to Soyuz docking1h 42m left

Mission control dashboard

Button

csm-111.svg

Use our Button to build a mission control card. Show every state above it.

Worked for 42s

Made 3 changes · Read 2 files

Added Button states and Mission control to the canvas. Both use your Button.

Mission control

Ask anything

Fable 5.1

High

Bring your own agent subscription. Connect your agent to the in-app chat, or use the MCP to start designs wherever you work.

Claude Code

Codex

Cursor

and any agent via

MCP

Design on the canvas, ship it as code.

01·Design

Design on the canvas

Draw your screens, set styles, and lay out every state of a flow side by side.

02·Componentize

Add states and interaction

Turn your designs into React components with props, states, and interactions. Then refine it all on the canvas.

03·Code

Deliver as code

Copy the React code or send it to your coding agent. The code matches what you designed on the canvas.

Learn more about designing with code

Bring your own agent.

Lunagraph works with the subscriptions you already have.
Connect Claude to power the in-app agent, or work anywhere over MCP.

Mission control · Lunagraph

Burn plan

Add a go/no-go checklist and keep Start burn locked until every item is go.

Worked for 8sMade 3 changes · Canvas updated

Added a Go / No-go checklist under the stats. Start burn stays locked until guidance and crew both read go.

Delta-v · Stat

Show how Delta-v trends since last orbit and flag it past 26.

Worked for 6sMade 2 changes · Canvas updated

Delta-v now shows its trend since orbit 28 and turns amber past 26 m/s. Duration is unchanged.

Ask anything

Fable 5.1High

Claude Code · Maxmara@orbitlabs.co

Lunagraph · Canvas

ORBIT 29Soyuz dockingBurn window opens in 1h 42m

24 m/sDelta-v+0.4 vs O28

Stat

38 sDuration

GO / NO-GO

GuidanceGo

CrewGo

Codex

Mission controlShare

Put my Burn plan component from the repo on the canvas.

Friday 3:14 PM

Placed Burn plan on your canvas from components/BurnPlan.tsx. Its Card and Button map to your project components.

Used Lunagraph integration, read files

Used Lunagraph integration, added to canvas

Do anything

GPT-5.6 Luna Medium

Chat with your agent on the canvas

Select an element on the canvas and describe the change you want. Lunagraph sends the selection to your agent along with your message, so the agent edits that element.

Connect other tools over MCP

Use the MCP server from Claude Code, Codex, Cursor or any other agent to work with Lunagraph. Import a component in from your repo, or send a finished design back to your codebase.

Mission control · Lunagraph

Burn plan

Add a go/no-go checklist and keep Start burn locked until every item is go.

Worked for 8sMade 3 changes · Canvas updated

Added a Go / No-go checklist under the stats. Start burn stays locked until guidance and crew both read go.

Delta-v · Stat

Show how Delta-v trends since last orbit and flag it past 26.

Worked for 6sMade 2 changes · Canvas updated

Delta-v now shows its trend since orbit 28 and turns amber past 26 m/s. Duration is unchanged.

Ask anything

Fable 5.1High

Claude Code · Maxmara@orbitlabs.co

Lunagraph · Canvas

ORBIT 29Soyuz dockingBurn window opens in 1h 42m

24 m/sDelta-v+0.4 vs O28

Stat

38 sDuration

GO / NO-GO

GuidanceGo

CrewGo

Chat with your agent on the canvas

Select an element on the canvas and describe the change you want. Lunagraph sends the selection to your agent along with your message, so the agent edits that element.

Mission control · Lunagraph

Lunagraph · Canvas

ORBIT 29Soyuz dockingBurn window opens in 1h 42m

24 m/sDelta-v+0.4 vs O28

Stat

38 sDuration

GO / NO-GO

GuidanceGo

CrewGo

Codex

Mission controlShare

Put my Burn plan component from the repo on the canvas.

Friday 3:14 PM

Placed Burn plan on your canvas from components/BurnPlan.tsx. Its Card and Button map to your project components.

Used Lunagraph integration, read files

Used Lunagraph integration, added to canvas

Do anything

GPT-5.6 Luna Medium

Connect other tools over MCP

Use the MCP server from Claude Code, Codex, Cursor or any other agent to work with Lunagraph. Import a component in from your repo, or send a finished design back to your codebase.

Learn more about connecting an agent

Select the screens in a flow and ask chat to turn them into a clickable prototype. Share the link with your team, then keep editing on the canvas as feedback comes in.

Mission controlOrbit 29 · 402 km

Linking

CSM-111

Ready to burn

Ready for your first burnStart the burn to open the live console. Mission control answers in chat while it runs.

Guidance nominal

Comms linked

Window opens in 1h 42m

Step 1 of 3

Start burn

Mission controlOrbit 29 · T+00:00:14

CSM-111

SPS firing · 7.7 of 24 m/s

00:01ENGIgnition confirmed, chamber 98 psi
00:04GNCAttitude hold nominal, drift 0.02°/s
00:09NAVDelta-v 6.1 of 24 m/s
00:12COMMSoyuz T-4 range 1.18 km, closing 0.4 m/s
00:14ENGThrottle steady at 100%

Fable 5.1

High

Burn console

Mission controlOrbit 29 · T+00:00:14

CSM-111

SPS firing · 7.7 of 24 m/s

00:01ENGIgnition confirmed, chamber 98 psi
00:04GNCAttitude hold nominal, drift 0.02°/s
00:09NAVDelta-v 6.1 of 24 m/s
00:12COMMSoyuz T-4 range 1.18 km, closing 0.4 m/s
00:14ENGThrottle steady at 100%

Mission control

Online

Why is the closing rate dropping?

Worked for 2s

Read burn plan · Checked 3 sensors

Soyuz T-4 is braking on schedule. Closing rate eases from 0.4 to 0.1 m/s inside 500 m so the capture latches cleanly. Nothing to do on your side.

Fable 5.1

High

Chat docked

Start burn

Burn console

Chat docked

Turn these frames into a prototype.

Fable 5.1

High

Ask chat to prototype the flow

Select the screens or states in your flow, then ask chat to connect them into an interactive prototype.

lunagraph.com/p/onboarding

Mission controlOrbit 29 · 402 km

Linking

CSM-111

Drawing plan

Ready for your first burnStart the burn to open the live console. Mission control answers in chat while it runs.

Guidance nominal

Comms linked

Window opens in 1h 42m

Step 1 of 3

Share the prototype as a link

Copy a link to the prototype from the canvas and send it to your team. You don't need to deploy anything or open a pull request.

Learn more about sharing prototype links

Canvas to codebase, and back.

Import your design system and components from your repo onto the canvas, design with them, and send the finished code back to the repo.

Your repoCanvas

Import

mission-ops~/code

components

read

button.tsx

card.tsx

input.tsx

BurnPlanCard.tsx

+84

app

.claude/skills

CLAUDE.md

globals.css

read

globals.css
--ink:#16161a;
--slate:#5d5d6b;
--mist:#8a8a94;
--line:#ededf0;
--paper:#ffffff;

Put our colors and components on the canvas.

Ask for a change

Opus 5 High

Mission Ops design systemImported from mission-ops

Color

ink

slate

mist

line

paper

Type

Inter9 · 11 · 13 · 16 · 28

Components

Search vehicles

Import a local codebase

Open a project folder from your computer to bring its components and styles onto the canvas.

Connect your GitHub

Connect a GitHub repository to bring its components and styles onto the canvas.

Learn more about bringing in your codebase

Made in Lunagraph.

Components, interactions, and graphics that people have built in Lunagraph.

“I have been using the app to create components for baked supply - it's what figma should be for designers!”

Nick Cbaked.design

“Japanese stale ID card Component. Made using figma & @lunagraphHQ using Codex.”

Aditya Surample.studio

“Website graphic for agent x canvas interaction Designed & animated in @lunagraphHQ”

Putri KaruniaLunagraph

“The moment I saw it, I knew it is exactly the right approach for this problem (in fact I once built a small version of this in house to enable our designers).”