feat(create): Atelier builder redesign with AI assistant

[mehdibha]

A UI-only experiment that rethinks /create as a three-zone instrument and explores AI inside the builder. Lives behind /create?atelier=true — the shipped builder and the panel lab (?lab=true) are untouched.

Namespaced as Atelier (own folder, flag and entry point) so it coexists file-for-file with the separate Studio left-panel redesign also in flight — zero file overlap; only create.tsx is shared.

The rethink: edit · see · converse

Zone	What it is
Inspector (left)	A domain rail (Color, Type, Shape, Space, Elevation, Motion, Interaction, Icons, Components, Modes, Voice) + that domain's controls, wide enough for real richness (ramps, status grids, component anatomy).
Stage (center)	Reuses the real live PreviewPanel wholesale, plus a new Spec sheet view that renders the system as an artifact — tonal ramps, type-scale specimen, radius/spacing/elevation samples.
AI assistant (right + bottom)	A persistent command bar under the stage + a collapsible dock with Chat / Audit / Reference.

AI exploration (the headline)

Interaction model is propose → review → accept — nothing is applied behind your back:

• Command bar / Chat — plain-language prompts ("make it feel like Linear", "warmer neutrals", "minimal and tight") return a reviewable diff (accent, gray, radius, density… before→after with swatches) and Apply / Dismiss. Verified: applying "Make it feel like Linear" recolors the live preview's ramps to indigo and tightens radius through the real token channel.
• Audit — real WCAG contrast ratios on the live seeds (e.g. Accent 4.70:1 pass, Warning 1.92:1 fail) with one-click fixes.
• Reference — start from a URL, screenshot, or pasted brand colors; each produces a proposal you review.

Under the hood (atelier/ai/engine.ts) it's a local deterministic intent engine, not a model call — interpret(prompt, ds) returns a ChangeSet { changes, apply }. That makes the interaction real and demoable with no backend; a production version swaps interpret() for a server call returning the same shape, leaving every consumer unchanged.

New tweaks

41 controls across 11 domains (~14 genuinely new axes: display tracking, heading weight, line-height, corner style/squircle, 4/8pt grid, content width, shadow tint, easing curve, hover lift, press scale, focus-ring style, icon library, icon scale, label casing). Honesty preserved: a filled live dot = drives the preview now (13 of 41); hollow = a --ds-* stub the engine will grow into.

Scope & honesty

• UI only, as briefed — stub axes don't move the preview yet (flagged); the AI engine is local; system name + reference extraction are UI shells.
• Desktop-first: below lg the side panels collapse to preview + command bar (no crash).
• Per CLAUDE.md, the new axes are product decisions — staged for evaluation, not wired into anything shippable.

Files

New module www/src/modules/create/atelier/ — index.tsx (shell), inspector.tsx, stage.tsx, spec-sheet.tsx, schema.tsx (axis catalog), store.tsx, tokens.ts, ai/{engine,command-bar,ai-dock}.tsx. One additive branch in routes/_app/create.tsx.

Verification

pnpm typecheck ✅ · pnpm check ✅ (only 2 pre-existing warnings, unrelated files) · live preview renders with no console errors · no registry source touched (no drift). Reuses useDesignSystem, so live axes drive the preview via the real channel.

🤖 Generated with Claude Code

---

Note

Low Risk
Feature-flagged UI experiment with no changes to default create flow or registry; only additive routing and layout suppression for the atelier flag.

Overview
Adds an opt-in Atelier experience at /create?atelier=true — a three-zone builder (inspector · stage · AI) that leaves the default /create and ?lab=true flows unchanged.

Layout & editing: New shell with a domain-rail inspector (11 domains, ~41 controls, live vs stub BindingDot), center stage toggling between the existing PreviewPanel and a new spec sheet (ramps, type scale, radius/spacing/elevation), plus a dedicated top bar (undo/reset/shuffle, preview vs spec). _app/route hides the global site header only for ?atelier=true.

AI surface: Command bar + collapsible AI dock (Chat / Audit / Reference). Prompts flow through a local interpret() engine that returns reviewable ChangeSet diffs (apply/dismiss only — no silent writes). Audit runs real WCAG contrast on seeds with optional one-click fixes; Reference is a capability preview (URL/screenshot/colors → proposed accent).

Wiring: StudioProvider holds UI state (domain, stage view, chat, custom undo on ?preset=); design state still uses useDesignSystem. Route adds atelier to search schema and early-returns AtelierExperience.

^{Reviewed by Cursor Bugbot for commit 6820539. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6820539

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dotui	Ready	Preview, Comment	Jun 27, 2026 10:49pm

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_81de08f7-6cc2-43e5-b87d-cbe3436273e3)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_6e7f90c9-dbf6-4380-a772-4d442ca635ff)