feat(create): rebuild /create as a design-system studio#282
Conversation
Replace the left CustomizerPanel with a three-zone studio: an axis rail, the live canvas, and a context-sensitive inspector, plus a top bar and a "Generate from brand" onboarding overlay. The route renders <Studio/>; ?lab=true still serves the legacy panel. Color, radius, density, cursor and per-component params stay genuinely live (existing engine); typography, depth, motion, icons, spacing and border are designed controls writing --ds-* vars (marked with binding dots). Experiment, UI-only.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
documentation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 6 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
| sessionStorage.setItem('dotui-onboarded', '1') | ||
| setOnboardingOpen(true) | ||
| // oxlint-disable-next-line react/exhaustive-deps -- mount-only greeting | ||
| }, []) |
There was a problem hiding this comment.
Onboarding ignores stored preset
High Severity
The onboarding effect checks the preset URL parameter on mount. This happens before a saved preset from localStorage can hydrate the URL, causing returning users with an existing design system to see the onboarding overlay.
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
| 'neutral', | ||
| on ? (seeds.accent ?? DEFAULT_COLOR_CONFIG.seeds.accent) : '#808080', | ||
| ) | ||
| } |
There was a problem hiding this comment.
Tint switch out of sync
Medium Severity
The "Tint neutrals with brand" switch's local state is initialized once from the neutral seed. This state doesn't update when the neutral seed changes from other parts of the color recipe (e.g., undo, reset), causing the switch to display an incorrect position relative to the actual neutral color.
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
| className="font-medium text-fg underline-offset-2 hover:underline" | ||
| > | ||
| {titleCase(s.name)} | ||
| </button> |
There was a problem hiding this comment.
Synced links only go back
Medium Severity
In the ComponentDetail view, the sibling component links within the "synced-group" notice incorrectly call onBack. This returns to the component list instead of navigating to the selected sibling's detail view and updating the canvas preview.
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
| ) | ||
| } | ||
| return <ComponentList onSelect={setSelectedComponent} /> | ||
| } |
There was a problem hiding this comment.
Preview scene inspector mismatch
Medium Severity
selectedComponent in the studio store stays set when the canvas scene selector changes preview via the route. The inspector can keep editing one component’s params while the iframe shows a different scene.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
| density: 'default', | ||
| elevation: 'glass', | ||
| }, | ||
| ] |
There was a problem hiding this comment.
Duplicate vibe definitions
Low Severity
Personality vibes are defined twice: a four-item set in onboarding (Minimal / Modern / Playful / Soft glass) and a six-item set in the Brand inspector (Minimal / Bold / Playful / Corporate / Editorial / Soft glass) with different ids, accents, and elevation defaults. The two flows can apply different “same label” personalities.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
| </button> | ||
| </span> | ||
| ))} | ||
| . Changes apply to the whole group. |
There was a problem hiding this comment.
Group sync claim is wrong
Medium Severity
The inspector tells users that style is synced and that changes apply to the whole group, but setComponentParam only updates componentParams for the active component name, so siblings keep their own param entries in the preview.
Reviewed by Cursor Bugbot for commit 92596a2. Configure here.
Deepen the studio: a ⌘K command palette (jump to axes/components, run actions), canvas view modes Preview/Tokens/Code (live token browser + real emitPrimitivesCss output), color-vision simulation over the preview, and a gallery of curated presets that fork the whole system. Shuffle and reset move into a shared actions hook.
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_ba369dc8-0140-4de4-9cab-8a615140a183) |
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_661c4f3c-0151-4001-8371-edfc07abd1f6) |
1 participant
What changed
CustomizerPanelis no longer rendered.routes/_app/create.tsxrenders the new<Studio/>;?lab=truestill serves the legacyLabExperience. Old files remain on disk but unwired.www/src/modules/create/studio/— a canvas-first three-zone studio.The experience
Coverage (maps to the brief)
Live vs designed
Live now (reuses the existing pure engine, no new logic): color, radius, density, cursor, component params, shuffle/undo/reset, export. Designed (write real
--ds-*vars, marked ○, go live when a consumer reads them): typography, depth, motion, icon stroke, spacing scale, border width.Verification
pnpm typecheckpasses;pnpm checkclean (0 errors, 0 new warnings). Browser-tested end-to-end: onboarding, axis switching, color engine + ramps + foundation, Components → Alert with real params + canvas switch, light/dark split, mobile layout, and a live shuffle recoloring the preview.Full report:
docs/research/2026-06-27-create-studio-redesign.md.Notes
Note
Medium Risk
Large UI-only surface on the primary
/createroute with layout/header behavior changes; core preset/preview pipeline is reused rather than rewritten.Overview
Replaces the default
/createlayout (288pxCustomizerPanel+ preview) with a new Studio module: top bar, left axis rail, center canvas, and per-axis inspector.create.tsxnow renders<Studio />;?lab=truestill loads the legacyLabExperience. The app layout hides the siteHeaderon/create(except whenlabis set) so the studio top bar owns the viewport.The studio reuses the existing preset URL,
useDesignSystem, iframepostMessagepreview, color engine, component params, and export targets. New UI adds onboarding (brand color + vibe), per-axis inspectors with live vs “designed” binding dots, canvas Preview / Tokens / Code (iframe stays mounted when switching), device/zoom/light-dark split, color-vision simulation, ⌘K command palette, presets gallery, custom undo over?preset=, and a.studio-riseCSS enter animation instead of problematic Motion SSR patterns.Reviewed by Cursor Bugbot for commit 6a2bc9a. Bugbot is set up for automated code reviews on this repo. Configure here.