Today I'm walking you through Superdesign, an AI design agent that turns a written description into a working app or website design.
You type what you want, and it builds the screen as a page you can click, share, and hand off to a developer (or a coding agent).
(With the code “am_will”, Build with AI readers get 50% off the Pro plan)
In this edition we’ll cover how to prompt your first screen, steal proven prompts from the library, spin up variants, use wireframes to figure out layouts fast, fix details by pointing at them, and export the result to build for real.
You’ll also get a fill-in-the-blank design brief that gets you a strong first draft.
Let's get into it 👇
What is Superdesign?
A design agent is an AI that designs for you, taking actions on a canvas instead of just describing what a design could look like.
You type what you want, and Superdesign generates the screen as real, working HTML.
Most AI image tools give you a picture of an interface. Superdesign gives you the interface itself.
Buttons click, pages scroll, and navigation works.
The output is a prototype (a working preview of a product) you can put in front of a customer, your boss, or a developer today.
AI models (the engines doing the actual generating) are wildly uneven at design.
The newest heavyweights like GLM 5.2 and Claude Opus 4.8 have real taste, but smaller models mostly don't.
Superdesign levels that out by packing a detailed design brief into every request behind the scenes, so the model gets most of the answer handed to it before it writes a thing.
I've gotten usable results from every model I've run it with, including Gemma 4 31B, one small enough to run locally on a laptop.
Whatever AI you have access to, this workflow holds up.
It runs in the browser, it's free to try, and you can be producing screens within minutes.
Start at superdesign.dev, or if you already work with a coding agent like Claude Code, paste this and it sets itself up:
Help me design on the Superdesign canvas. Read superdesign.dev/INSTALL.md and follow every step.Okay, now let's build something 👇
Step 1: Prompt your first screen
Open a project in design mode and describe what you want. One sentence works: "Design a crypto wallet app."
But specific briefs get better first drafts. Tell it what you're building, who it's for, the feel you're going after, and what the page needs to accomplish. (The Prompt Drop section below is a fill-in-the-blank version of exactly this.)
A couple of minutes later you have a polished first version.
Details you'd expect from a designer show up on their own: consistent spacing, a coherent color palette, icons that match.
One tip from Superdesign's own docs: use Gemini for the first version, then switch to Claude for refinements.
The model picker is in the prompt bar.
Gemini is fast and cheap for exploring; Claude is the stronger editor once you have a direction.
The cheat code: raid the Prompt Library
You don't have to write that brief from scratch. Superdesign’s Prompt Library is a community collection of proven design prompts, sorted into landing pages, UI components, animations, and general styling.
This is where I start most projects. Browse until something catches your eye, click Copy Prompt, and you have a brief that already produces a great result.
Or remix the design directly in Superdesign and polish it into your own!
Spend a few minutes in the animations and UI components categories too. There are some gems in there.
Step 2: Never settle for version one
The first design is just a starting point.
Click Create New → Branch and describe a different direction: "Try a fully sketch-based, hand-drawn style and make the bottom nav bar sticky."
The original stays on your canvas, and the variant appears next to it.
You can spin up several directions this way, guided by color, layout, style, or typography, and compare them side by side.
Nothing gets lost. A View Version History button on every frame lets you roll back to any past iteration, so you can experiment as aggressively as you like.
Step 3: Fix details by pointing at them
Something will be off. A weird line, a button that's too loud, text that runs long. Instead of writing a paragraph describing where the problem is, click Annotate, click the element (or drag a box around the area), and type the note right there: "remove these lines."
Your annotations flow straight into the chat and the agent applies them. It's the difference between giving someone directions over the phone and pointing at the map.
Step 4: Share it, then ship it
Every design gets a Preview link: a full-screen, clickable version you can send to anyone. This is the moment your idea stops being a description in a meeting and starts being a thing people can tap through.
When you're ready to build for real, click Export.
You can download the HTML, or export the whole project into Cursor, Claude Code, or VS Code and hand it to a coding agent to wire up the working product. Design and development become one continuous motion.
The fastest way to internalize this is to run your actual tasks through it once.
Paste this into Claude, fill in the blank with a rough list of what you do in a normal week, and let it sort the list and explain the calls👇
What this website is for: [describe it, e.g. my freelance photography business, a newsletter about home cooking, my consulting practice]
Type of site: [ecommerce, blog, personal website, business page, portfolio, etc.]
Purpose of this page: [what it needs to accomplish, e.g. get visitors to book a call, sell my course, collect newsletter signups]
Target audience: [who's visiting, e.g. busy parents, small restaurant owners, hiring managers]
Branding: [attach your logo, fonts, and brand colors if you have them. If not, describe the feel in 3 adjectives and name a brand or site whose vibe you like]
Design spec: [if you copied a prompt from the Prompt Library, paste it here so the design follows it]
Additional details: [anything else, e.g. must-have sections, copy you want used word for word, things to avoid. Make it work on mobile.]You'll usually find two or three jobs you've been grinding out by hand in a chat window that should have been running themselves in Cowork or Code.
Your whole marketing stack, answering in one Slack thread.
Meta in one tab, TikTok in another, Klaviyo and GA4 in two more. Viktor is an AI employee that pulls all of them into a single Slack thread. Ask for blended CAC, yesterday's flow revenue, or the campaign to cut, and get one answer instead of four logins.
Your roundup of the latest model releases and updates from the biggest AI labs.
Figma opens its canvas to AI agents. At its Config conference on June 24, Figma shipped Code Layers (runnable code directly on the canvas), a native animation timeline called Motion, AI-generated visual effects, and, most notably, the ability for AI agents to work directly on Figma files. The industry's biggest design tool now treats agents as users. The bet Superdesign made from day one is going mainstream. (Figma)
Anthropic ships Claude Sonnet 5. Released this week, it's Anthropic's most agentic mid-tier model, with stronger reasoning, tool use, and autonomous task handling, plus a 1M-token context window (enough to hold an entire codebase in view at once). It's now the default in Claude Code, with promotional pricing through August 31. Relevant here because this is the class of model on the other end of that Export button. (Anthropic)
Google gives Gemini 3.5 Flash computer use. Gemini 3.5 Flash can now see a screen, reason about it, and take actions across desktop, mobile, and browser, letting anyone build agents that operate real interfaces. Google also released Gemma 4 12B, which runs capable local agents on a laptop with 16GB of memory. The gap between "AI that designs a UI" and "AI that uses a UI" is closing from both sides. (Google)
Advertise with Build with AI
Get in front of an audience of professionals using AI day-to-day: founders, engineers, operators, and product builders.
Interested in advertising? Respond to this email for rates and details.
Until next time,
William Ryan
Editor-in-Chief @ Build with AI
PS: Follow me on X for daily updates and AI workflows.