Getting started tutorial

Follow this walkthrough for a complete tour of Lunagraph, then use the chapter links to revisit any part of the workflow.

​

Part 1: Learn the canvas

​

Chapters

• 0:07 Tour the Lunagraph interface
• 0:19 Inspect the code for your selection
• 0:42 Find assets and connect coding agents
• 1:13 Edit the canvas and code together
• 1:34 Use your CSS variables and classes
• 2:32 Design with components and props
• 3:06 Design with an AI coding agent

​

Tour the interface

Watch from 0:07 The Lunagraph interface should feel familiar if you have used Figma. Use the left sidebar to navigate pages, inspect layers, browse assets, and work with agents. Use the right sidebar to style your selection. The code panel shows the React code for your current canvas selection. Select a specific element to focus on its components and Tailwind classes.

​

Edit the canvas and code together

Watch from 1:13 The canvas works like a familiar visual design tool. You can add frames, text, and other layers. The difference is that every layer is real code: a frame is a div, and changes on the canvas update its React and CSS directly. You do not export or translate the design into React later. You are editing the implementation while you design.

​

Use your CSS variables and classes

Watch from 1:34 Lunagraph variables come from the global CSS file in your project. You can bring in the Tailwind theme and CSS classes from your codebase, then apply them from the styling panel. When you choose a variable such as bg-background or rounded-xl, Lunagraph adds the corresponding class to the element. This keeps the canvas aligned with the tokens and utilities you already use in code.

​

Use components and props

Watch from 2:32 Imported components appear in the Assets panel and on the canvas. Select a component to edit the props it exposes, such as a Button’s variant. Props play a role similar to component properties and variants in Figma, but they come directly from the React component’s interface.

​

Design with an AI coding agent

Watch from 3:06 Connect an AI coding agent from your terminal and use your own subscription, skills, and MCP servers. Give the agent access to a local folder when it needs more context from your codebase. Ask the agent to design with the components and CSS classes in your project. Follow its work on the canvas, refine the result by hand, or press Cmd + L to reference a selection in your next prompt.

​

Part 2: Connect your codebase

​

Chapters

• 0:00 Keep designs consistent with your codebase
• 0:16 Design with the chat panel or MCP
• 0:42 Give an agent access to your local codebase
• 1:07 Import your design system
• 1:41 Find imported colors, icons, and components
• 2:12 Work with component props
• 2:43 Design with your imported system

​

Design with agents

Watch from 0:16 Use the chat panel to design with Claude Code from your terminal and your own subscription. You can use your installed skills and MCP connections in the chat. You can also connect Lunagraph’s MCP to another coding tool. Your agent can design on the canvas while the Lunagraph desktop app is open.

​

Connect and import your codebase

Watch from 0:42 Add a local folder to give the chat access to your codebase. The agent can then read from and write to both your codebase and the canvas. Open the Assets panel and choose Import design system to bring in your CSS configuration and React components. Lunagraph provides a skill that helps the agent find and import the relevant files. Learn more in Bring in your codebase.

​

Design with your system

Watch from 1:41 Find imported colors, icons, and components in the Assets panel. Component instances appear in purple on the canvas. Select an instance to edit its React props, such as a Button’s variant. Combine these assets with familiar canvas controls to design with the same system you use in production. Hold Option and drag to duplicate an element. Every change remains available as code.

​

Part 3: Explore more workflows

​

Chapters

• 7:25 Pull real screens from your codebase
• 8:11 Capture live UI with the Chrome extension
• 9:01 Build components developers can use
• 11:06 Tune creative components with custom controls
• 12:15 Edit a component and save it back
• 13:42 Build and share clickable prototypes
• 14:40 Use MCP, GitHub, and developer handoff
• 15:48 Preview localhost on the canvas
• 16:38 Wrap up

​

Pull real screens from your codebase

Watch from 7:25 Connect local codebases to the chat, then ask the AI to bring existing UI onto the canvas. This helps you compare real product patterns, find inconsistencies, and reuse existing work while you design.

​

Capture live UI with the Chrome extension

Watch from 8:11 Use the Chrome extension to capture an existing page and paste it onto the canvas. Turn on Capture components when you capture your own product. Lunagraph can then preserve recognized components and their props instead of flattening them into plain elements. Learn more in Capture a webpage with the Chrome extension.

​

Build components developers can use

Watch from 9:01 Design components around the data structure your product needs. Ask developers for the expected TypeScript props, then use the chat to turn your design into a component that supports every required state. You can test those states through the properties panel while developers receive a component with the interface they need.

​

Tune components with custom controls

Watch from 11:06 Expose props for creative values such as blur, noise, bleed, animation timing, and particle effects. Lunagraph turns those props into controls that you can tune visually. Learn more in Custom controls.

​

Edit a component and save it back

Watch from 12:15 Right-click a component and choose Edit component to open its internal layers. Change its styling or structure, paste other elements inside it, then choose Save to update the component. Use Save with instructions when the change needs additional logic or context from the AI. Learn more in Edit a component.

​

Build and share clickable prototypes

Watch from 13:42 Ask the chat to connect your screens into an interactive prototype. Because the prototype uses real components, people can click, type, and interact with it in a browser. Create a share link when you are ready for feedback. Learn more in Send a prototype link.

​

Use MCP, GitHub, and developer handoff

Watch from 14:40 Use Lunagraph’s MCP with coding agents outside the built-in chat. You can also connect GitHub to pull and push repository changes. Developers can open a shared design, select an element, and copy its code. They can also ask a connected coding agent to retrieve a specific page or component from a Lunagraph project.

​

Preview localhost on the canvas

Watch from 15:48 Insert a live preview of your local application onto the canvas. Compare several viewports at once and interact with the page while you implement the design. This completes the round-trip editing workflow: design with code, implement in your codebase, and review the live result on the canvas.

​

Wrap up

Watch from 16:38 You are ready to combine the canvas, your design system, AI assistance, prototypes, and live implementation in one workflow.