Skip to main content
Design with the same system you use in production.

​
On this page

​
Video walkthrough

This clip is from Part 2 of the getting started tutorial, starting at 1:07.

​
Import steps

1

Connect your codebase

Add a local folder to the chat. See Connect your codebase.
2

Choose Import design system

Open the Assets panel and choose Import design system.
3

Let the agent import your files

Lunagraph provides a skill that helps the agent find and import your CSS configuration, design tokens, icons, and React components.

​
Find imported assets

Watch from 1:41 Your imported colors, icons, and components appear in the Assets panel. Component instances appear in purple on the canvas.

​
Design with component props

Watch from 2:12 Select a component instance to edit its React props, such as a Button’s variant. Imported components keep their props, so your canvas uses the same variants and styles as your production interface. Combine these assets with familiar canvas controls. For example, hold Option and drag to duplicate an element. Every change remains available as code.