feat(create): add AI-assisted builder redesign behind ?next#295
feat(create): add AI-assisted builder redesign behind ?next#295mehdibha wants to merge 2 commits into
Conversation
Opt-in "studio" reimagining of /create at /create?next=true, gated the same way as ?lab so the shipped builder and the panel lab stay untouched. Reuses the live preview iframe and useDesignSystem, so colour / radius / density edits are genuinely live. - Studio layout: top bar (identity, the ⌘K AI command bar, theme toggle, re-roll, undo, share), a left axis rail, a contextual inspector, the live canvas, and an AI assistant drawer. - AI assistant: every action — compose, refine, audit, extract — funnels into one reviewable diff primitive (toggle rows, apply, undo). UI-only; the engine returns canned diffs, no model call yet. The diff shape is the contract a real server function would later fill. - New foundation axes: typography depth (scale / weight / tracking), spacing, elevation, motion, borders, focus ring, translucent surfaces. Token-backed axes are live; the new axes persist as namespaced --next-* tokens (visual-only until components consume them). - Reuses the existing Colour, Icon, Cursor, Radius, Density, Components, and Code panels rather than reimplementing them. UI only, as requested — no publisher or model wiring.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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_e3b3bd08-fe77-4f71-a753-cd55fda66cbc) |
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_a9cee314-4da4-4f02-a008-c7ab778d8b00) |
1 participant
What
An experiment that rethinks
/createend to end — a new "studio" layout, an AI assistant as the centerpiece, and the missing foundation axes. It's opt-in and UI-only, gated exactly like?lab, so the shipped builder and the panel lab are untouched.Try it: run the app and open
/create?next=true.The layout
A persistent three-zone studio instead of the single drill-down column:
✦ Ask.It reuses the real
useDesignSystem+ preview iframe, so brand color / radius / density edits (and the assistant's applies) are genuinely live.AI, around one primitive
Every assistant action returns the same reviewable diff: a list of per-axis changes you can toggle row by row, apply, and undo — never a silent rewrite.
UI-only: the engine (
ai.ts) returns canned diffs — no model call. TheDesignSystemDiffshape it produces is the contract a real server function would later fill, so the UI wouldn't change.New axes (all proposed, per the brief)
Typography depth (scale ratio / weight / tracking), spacing, elevation (+ tint), motion (speed + easing), borders, focus ring, translucent surfaces. Token-backed axes drive the preview today; the new axes persist as namespaced
--next-*tokens and are visual-only until components consume them.Notes
lg, like the shipped mobile pane).pnpm typecheckandpnpm checkpass; verified live in the browser (compose → apply changes the preview, new-axis panels render, no console errors).Note
Low Risk
Changes are isolated behind a search flag and client-only UI; routing/layout tweaks are narrow (create route + header suppression) with no auth or server-side behavior.
Overview
Adds an opt-in studio builder at
/create?next=true(same gating as?lab=true), leaving the default/createflow unchanged.The new
BuilderNextshell replaces the single customizer column with a rail → inspector → live preview → assistant layout, a dedicated top bar (⌘K compose bar, re-roll, preset undo, share), and hides the global siteHeaderon that route so chrome does not stack.AI is UI-only in
ai.ts: compose, refine, audit, and image extract all return the same reviewable per-axisDiffRowlist (toggle, apply, undo) via canned presets—no model calls. The assistant drawer wires those diffs intouseDesignSystem.New foundation axes (spacing, elevation, motion, borders, focus, surfaces, typography depth) persist as namespaced
--next-*tokens in the inspector; most are visual-only until components consume them. Existing color, typography, components, and export panels are reused in the inspector rather than rewritten.Reviewed by Cursor Bugbot for commit 4341fef. Bugbot is set up for automated code reviews on this repo. Configure here.