feat(create): rebuild the builder as an adaptive Studio#284
Conversation
Replace the drill-down customizer panel (and the ?lab exploration) with a single adaptive surface: an icon-rail of nine chapters, an inspector that reveals fine controls along a Quick/Studio depth toggle, a live brand swatch, wired undo/redo + re-roll, a schema-derived command palette, and a mobile layout that drops the old 15px preview sliver. New axes (Material style family, Motion, typographic rhythm, border/spacing/ focus, icon weight) write namespaced --ds-* vars so they go live the moment a component consumes them; each control wears a live/UI honesty dot. Synced component groups fan one edit across all members in a single undo step, and opening a component now switches the preview to it. Chapter transitions use a transform-only CSS keyframe whose resting state is always visible, so the panel can never be stranded blank.
|
github-actions
Bot
added
documentation
Bugbot couldn't run - usage limit reachedBugbot 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_97c8b679-cf63-47c5-9bf3-12fb2f15bc90) |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reclaim ~50px of vertical space for the inspector. The footer drops the multi-line URL box for a single-line, truncated, copyable install command plus a compact action row (code-style icon · deeplink · share). The header collapses from three rows to two and drops its theme toggle — the global site header already owns it, so it only cost a row. Search becomes a compact ⌘K chip; the code-style dialog gains a 'trigger' prop and the command palette a 'compact' one.
Bugbot couldn't run - usage limit reachedBugbot 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_4c9fc8ac-ede8-4d35-a450-4bd88e5d62e0) |
Bugbot couldn't run - usage limit reachedBugbot 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_c7343793-09d5-41fc-9320-63ce0544b678) |
1 participant
What changed
Removes the old left panel entirely — the 288px drill-down
customizer-panel.tsx, the wholepanel/?labexploration, and thepanel/labsearch params — and replaces it with Studio (www/src/modules/create/studio/): one living surface that sharpens as you lean in.The right-side live preview, export, and code-options modules are kept and reused.
The experience
lgthey collapse to one switchable pane (both kept mounted, so the iframe never reloads). Fixes the old "15px preview sliver" mobile break.One surface, two postures
Quick shows only macros (the few decisions that re-skin everything); Studio reveals the micros in place. Lowering depth never discards values (they live in the
?preset=URL).Covers the brief
Each control wears a live dot (drives the preview) vs a hollow one (UI, not yet wired). UI-only axes write
--ds-*vars, so they go live when a component reads them — no rewiring.Bugs found & fixed (by driving it in-browser)
AnimatePresence mode="wait"stalled the incoming chapter on the outgoing exit; replaced with a keyed remount.opacity:0enter, frozen, pins the panel blank. Now a transform-only CSS keyframe whose resting state is always visible.Verification
Live at 1440×900 and 390×844, dark mode. No console errors ·
pnpm typecheck0 errors ·pnpm checkformat clean. Verified: all nine chapters mount/switch; write path control→URL→postMessage→preview; undo/redo; mobile full-width pane; ⌘K (34 entries); synced-group fan-out; depth reveal.How the design was chosen
A multi-agent design workflow generated five independent visions, an adversarial judge panel scored them, and a synthesis merged the best into the buildable spec. Full write-up:
docs/research/2026-06-27-create-studio-redesign.md.Notes / not in this PR
CLAUDE.md.Note
Medium Risk
Large UX swap on the primary builder route with many controls only partially wired to preview consumers; preset URL and undo history behavior must stay correct across the new chapters.
Overview
Replaces the entire
/createleft-panel stack — drill-downcustomizer-panel, the?labpanel/prototype, andpanel/labURL params — with a new Studio module that is always rendered from the create route.Studio is a rail + inspector layout beside the reused preview iframe: nine chapters (brand through interaction), a dedicated top bar (brand swatch, name, ⌘K, Quick/Studio depth, working undo/redo/reroll/reset), compact export footer, and mobile Customize/Preview toggle with both panes kept mounted. Design edits still flow through
?preset=viauseDesignSystem; builder-only UI state lives inStudioProvider.New product surface includes one-seed brand generation, presets, command palette, synced component-group edits with preview coupling, live vs UI-only live dots, and many
--ds-*token axes (material, motion, typography, etc.).CodeOptionsDialoggains an optional custom trigger for the compact export bar. Chapter switching uses keyed remount + transform-only.studio-enterCSS instead ofAnimatePresenceto avoid blank inspector panels.Adds experiment documentation at
docs/research/2026-06-27-create-studio-redesign.md.Reviewed by Cursor Bugbot for commit c80d188. Bugbot is set up for automated code reviews on this repo. Configure here.