Getting started tutorial

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

​

Tutorial chapters

• 0:00 Introduction
• 0:17 The canvas: frames are divs and everything is React
• 1:20 Variables map to your Tailwind configuration
• 2:04 Edit CSS and classes in the code tab
• 2:34 Import a design system or full repository
• 3:53 Use components and props on the canvas
• 4:51 Compose screens with familiar shortcuts
• 5:39 Design with AI and Claude Code
• 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

​

Introduction

Watch from 0:00 This walkthrough shows how Lunagraph fits into your design and development workflow. You will move from basic canvas editing to codebase imports, AI-assisted design, prototypes, and implementation.

​

The canvas is made of React

Watch from 0:17 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.

​

Variables map to Tailwind

Watch from 1:20 Lunagraph variables come from your CSS classes and Tailwind configuration. When you apply a variable such as a background color, Lunagraph adds the corresponding class to the element. This keeps the canvas aligned with the tokens and utilities you already use in code.

​

Edit code directly

Watch from 2:04 Switch to the code tab when you want more control. You can edit CSS, add classes, and use autocomplete without leaving the canvas.

​

Import from your codebase

Watch from 2:34 When you create a project, start blank, use a starter design system, or import from your codebase. You can choose between two import scopes:

• Design system only: Import UI components, CSS, tokens, and Tailwind configuration. Use this for a larger application or monorepo when you only need its visual building blocks.
• Full repository: Connect the entire codebase. Use this for UI libraries or projects where you want to work with every file and push changes back to GitHub.

Learn more in Bring in your codebase.

​

Use components and props

Watch from 3:53 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.

​

Compose screens with familiar shortcuts

Watch from 4:51 Use your components to compose complete screens. Familiar shortcuts work here too. For example, select multiple layers and press Shift + A to wrap them in a flex container, then adjust its direction and spacing.

​

Design with AI

Watch from 5:39 Install Claude Code in your terminal to use the chat panel with your own subscription. Press Cmd + L to reference a canvas element, then describe the change you want. The AI can read and edit canvas elements and inspect its work with screenshots. The result stays editable, so you can refine it manually or ask for several variations and combine the parts you like.

​

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.