Skip to content
AI Primer
release

Claude Design adds repo-based design-system imports and Claude Code sync in beta

Anthropic updated Claude Design with design-system imports from repos, codebases, or design files, plus bidirectional sync with Claude Code and a canvas editor. The update moves it from generic mockups toward designs checked against real components.

4 min read
Claude Design adds repo-based design-system imports and Claude Code sync in beta
Claude Design adds repo-based design-system imports and Claude Code sync in beta

TL;DR

  • Claude Design's beta now imports a design system from a repo, design files, or a codebase, and Claude's import post says it checks generated output against those real components before you see it.
  • Claude's launch thread and the editor update post frame this ship around three concrete changes: on-brand generation, direct canvas editing, and tighter handoff into Claude Code.
  • Bidirectional sync is the workflow change that matters most: Claude's sync post says you can hand a design to Claude Code for build-out, or start in Claude Code and sync design projects back from the terminal.
  • Distribution is broad from day one, because Claude's availability post says Claude Design is in beta on all paid plans across web and desktop.
  • Lovable's connector post and Lovable's terminal post extend the story past mockups, with Claude chat access to a Lovable workspace plus terminal commands like /build, /deploy, and /db.

Anthropic's own posts say you can import a design system, edit layouts directly on canvas, and sync both directions with Claude Code. The odd little extra is that Lovable immediately turned the launch into an app pipeline, with a Claude connector flow and a terminal-first command set.

Design system imports

The interesting shift is upstream. Claude Design is no longer pitched as a blank-slate mockup tool. According to Claude's import post, it can pull a design system from repos, design files, or a codebase, then validate its own output against that system before showing the result.

That makes the launch less about prettier generations and more about constraining generations with real component inventories and brand rules, which is the part engineers usually end up rebuilding by hand.

Canvas editor

Anthropic also redesigned the editor for day-to-day use. The editor update post says the new canvas adds direct drag, resize, and alignment controls.

That matters because the interaction model moves closer to a normal design tool. The model can propose a layout, but the user can still make deterministic adjustments without leaving the canvas.

Claude Code sync

The biggest workflow claim is the two-way link with Claude Code. Claude's sync post says teams can hand a design off for implementation, or start in Claude Code and sync design projects from the terminal.

The same post also bundles export targets and downstream tooling into the launch:

  • Export to PDF.
  • Export to PowerPoint.
  • Send work into other connected tools.
  • Sync design projects from the terminal via Claude Code.

Availability is simple. Claude's availability post says Claude Design is in beta on all paid plans, on web and desktop.

Lovable connector

Lovable shipped the fastest ecosystem response. Lovable's connector post says Claude users can connect Lovable through Claude's connectors menu, chat with a workspace, export from Claude Design, and ship with Claude Code through Lovable's MCP server.

Lovable split that integration into three concrete surfaces:

  • Claude chat can access an existing Lovable workspace for audits, live app data queries, or a new build, per Lovable's workspace access post.
  • Claude Design can export a prototype into Lovable, where Lovable's export post says auth, databases, live URLs, and built-in AI features can be added.
  • Claude Code can drive Lovable from the terminal, where Lovable's terminal post packages /build, /deploy, and /db as single commands.

That last piece is new information relative to Anthropic's own thread: the launch immediately picked up a terminal-native app backend path, not just a design-to-code handoff.

Further reading

Discussion across the web

Where this story is being discussed, in original context.

On X· 2 threads
TL;DR1 post
Lovable connector1 post
Share on X