Skip to main content
Follow this walkthrough for a complete tour of Lunagraph.

​
In this walkthrough

  1. Learn the canvas
  2. Connect your codebase
  3. Designing with your components
  4. Explore more workflows

​
Part 1: Learn the canvas

​
Part 2: Connect your codebase

​
Part 3: Designing with your components

​
Part 4: 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.