Use the agent you prefer. In browser or MCP. Tweak, edit, all on your subscription. No more lock in. Free yourself.

Join the waitlist

Built by Alastair Driver

Just say what you want

Studio is a conversation. Ask for a screen, a section, or a change, and it assembles from real Grade components, live.

  • Type a request like “add in a pricing section” and watch it appear.
  • Every generation is real, themeable components, never throwaway markup.
  • Keep chatting to refine: move it, restyle it, swap the copy.
Studio

Real code underneath

Every screen is real React, built from Grade components, nothing to reverse-engineer when you ship.

  • Colours bind to live theme tokens, so changing the theme never touches the code.
  • Copy it straight into your app. No runtime, no lock-in.
  • The same components power Studio, the docs, and this page.
brand-pops.tsxtsx
import { SwatchGroup, Swatch } from "@gradeui/ui";


export function BrandPops() {
  return (
    <SwatchGroup size="lg">
      {[1, 2, 3, 4, 5, 6, 7, 8].map((n) => (
        <Swatch key={n} token={`brand-${n}`} />
      ))}
    </SwatchGroup>
  );
}

Share and embed

Send a working screen as a link, or drop it into any site. It's the real thing running, not a screenshot.

…and so much more

Templates

Full screens and flows to start from, every one of them re-themeable to your taste in seconds.

Playground

A sketchbook for ideas. Drop in a reference and riff on it inside your design language.

Revisions

Every change is kept. Step back through a screen's history and branch from any point.

Your assets

Bring your own images and media, so prototypes look like your product, not stock.

Brand pops

Eight loud accent slots per theme for the moments a design needs to shout.

Demos

Turn a live screen into a directed walkthrough: camera moves, captions, focus.

Frequently asked questions

Make it yours

Join the waitlist