Live Composition Editor

A live composition editor designs by editing the actual product codebase instead of static frames. In 2026 this means opening Cursor or Claude Code on a real repo, adjusting design tokens that sync across Figma and production, refining shadcn components with Tailwind, testing interactions in the browser, reviewing the git diff, and deploying the same afternoon. The role demands taste plus enough code literacy to direct AI without writing every line from scratch. Tokens sit upstream as the single source of truth. Change a radius value or motion curve once and both your design tool and live app update instantly. Figma Make might kick things off by turning an early frame into React but the live composition editor finishes the job where it actually matters. The deliverable is a working deployed component not an artboard with annotations. Judgment happens on real data and real users not simulated states.

This role is not a pixel pusher perfecting static mockups for weeks. It is not a designer who throws frames over the wall and calls it done. A live composition editor does not produce 47 button variants in Figma that never reach production. The role rejects the old handoff theater where engineers spent days translating redlines that AI now handles in minutes. It is not full stack engineering from scratch either. You do not need to architect backend services or write production grade algorithms. Live composition editors do not sell Figma decks as final deliverables in 2026 while Linear and Vercel ship running code for the same budget and win every brief. They do not hide behind the excuse that design stops at the artboard.

Linear shows exactly how this works. Their designers treat the repo as the canvas. When updating the issue filtering interface in Q1 2026 one designer opened Cursor, fed Claude Code the ticket plus references to existing token values and shadcn patterns, generated a new set of filter chips with keyboard variants, tested them against real production data in the local dev server, tweaked the elevation token for better focus contrast, confirmed the motion curve felt right at 60fps, and opened a pull request with a deployed preview. The PM reviewed the live component not a screenshot. No Figma file ever changed hands. Vercel runs the identical shape on their dashboard. Designers spin three layout options in v0 because it outputs clean shadcn and Tailwind, pull the winner into the main codebase, refine the typography scale in the token file that feeds both the app and their Figma library, adjust hover states on data tables directly in the browser, and merge before lunch. The Vercel homepage and logs viewer you use today were composed this way. Anthropic goes deeper. Their team designs the Claude interface while pairing with Claude Code itself. A recent iteration on the artifact panel started with updating the global border radius token from 6 to 8 pixels, prompting for new layout variants, testing screen reader output on the live surface, and shipping the diff that updated every surface at once. Anysphere designers eat their own dogfood hardest. They build new Cursor features while living inside Cursor editing the Cursor codebase. When they rebuilt the command palette they experienced every micro interaction exactly as users would. These four teams Linear, Vercel, Anthropic, and Anysphere share the same shape. Tokens upstream. AI as production layer. Designers in the diff. The running app as both whiteboard and final deliverable.

Deploy this role on any product UI real users will touch in 2026 and beyond. It wins for dashboards, developer tools, AI interfaces, marketing sites that need to feel like the product itself, and any surface where interactive states and real data drive quality. The faster your learning cycles need to be the better this approach performs. Once tokens are formalized and tools like Cursor, v0, and Claude Code are in the stack the live composition editor consistently ships four cycles for every one produced by a traditional Figma team. Use it when stakeholders need to click something that works instead of imagining it from frames. Avoid it during pure brand exploration or logo development where no codebase or token system exists yet. Early visual divergence, identity sketches, and moodboards still move faster in Figma or Illustrator before constraints arrive. Client strategy presentations that sell systems instead of interfaces work better as static decks. If your studio lacks upstream tokens or AI pairing habits then forcing the role creates friction instead of velocity. Brand work and pre implementation visual studies belong in flat tools until the stack catches up.

Live composition editors design the actual product instead of pictures of the product.