Atelier
Try Atelier

From Claude Code

You’re in a Claude Code session. The work has reached a point where you want a designer’s surface — a canvas, a brand, a Component library — without losing the context you’ve built up. The From Claude Code bridge brings the work over to Studio with one slash command.

What you get

Studio creates a fresh Hi-fi design project carrying:

  • The original prompt that started the Claude Code session.
  • Your project’s working directory and a depth-2 file listing.
  • A CLAUDE.md at the project root summarizing the bridge context.

You land in the design workspace, ready to keep going.

Trigger it from Claude Code

In your Claude Code session, type the bridge command (the exact name depends on your Atelier CLI setup — see Tooling → Integrating with editors → Claude Code). Claude Code:

  1. Spawns a short-lived local bridge server.
  2. Opens your browser (or the desktop app) at the right URL.
  3. The bridge shuts down once Studio confirms the handoff.

You’ll see Studio open with a status line — “Connecting to Claude Code…”, “Fetching handoff context…”, “Creating project…” — and within a few seconds you’re in the design workspace.

What the bridge sends

The bridge serves two pieces of information to Studio:

  • The original prompt — what you typed in Claude Code that started the session.
  • A file listing — your working directory, two levels deep.

That’s it. No source files cross over; the bridge tells Studio what’s there. From inside the design workspace, the chat can read individual files on demand if you want.

The CLAUDE.md Studio writes

When Studio creates the project, it drops a CLAUDE.md at the root with the bridge context. The chat agent reads it on the first turn, so you don’t have to re-explain.

# Claude Code Bridge Session
 
This project was created from a Claude Code session via the Atelier bridge.
 
## Original prompt
 
(what you asked Claude Code)
 
## CC working directory
 
/Users/.../your-project
 
## Root listing (depth 2)
 
f src/index.ts
d src/lib
…

After the handoff

You’re in a Hi-fi design project. Typical next moves:

  • Open the chat and keep working — describe what you want to design.
  • Bind a Design system so the agent uses your brand. See Bindings.
  • Promote to an App when the design’s ready to implement. See Design → Create App.
  • Export back to Claude Code with a handoff bundle when you want CC to pick the work up again. See Export → Claude Code handoff.

Security

The bridge token is short-lived and the bridge listens only on localhost. The token never reaches Atelier servers; the bridge shuts down once Studio confirms the handoff.

Slide deck instead

If you’d rather land in a slide deck than a design, pass ?type=slides in the bridge URL. The CLAUDE.md becomes the deck’s starting prompt and you land in Slide deck mode.

See also