Get set up in three steps.
Connect your agent, connect your codebase, then import your design system. Each guide includes a video walkthrough.
Time 0:00 / 0:09
Three guides, in order
- 01
Connect your agent
Use Claude Code in the chat panel, or connect another coding tool through MCP.
- 02
Connect your codebase
Add a local folder so your agent can read and edit your project.
- 03
Import your design system
Bring your design tokens, icons, and React components into the Assets panel.
Start with your agent.
Download Lunagraph, then follow the first guide to connect Claude Code or another agent.
More features
- Choose your agentWork with Claude Code, Codex, Cursor or OpenCode inside Lunagraph.
- Agent commentsPin a comment on the design, mention @Agent, and describe the change.
- TabsKeep multiple projects open while their agents work.
- Copy from FigmaPaste your designs into Lunagraph with more accurate layouts, text, vectors, and effects.
- Copy from ChromeUse the extension to capture a webpage or element, then paste it into Lunagraph to edit.
- Local fontsUse fonts installed on your computer in the desktop app.