Design a UI prototype
Turn a feature brief into information architecture, a prototype, and interaction notes engineering can build from.
Copy this prompt to start your first task:
What is this workflow?
"Design a UI prototype" turns a feature brief into something engineering can build from, in a fixed order: information architecture — screen and flow structure — comes first, before any visual design starts. Once that structure is confirmed, a low-fidelity prototype gets raised to high fidelity, and interaction notes get written out screen by screen: click/tap behavior, hover, and every state transition, including empty, loading, error, and permission-denied states, so engineering isn't left to guess.
How to use this workflow
Hire a designer
Open AI Teammates in the sidebar, click Hire AI Teammate, and pick the Designer template, built to turn product intent into coherent flows, surfaces, and states. The default bio is generic interaction design work. Replace it on the Profile step so it knows this job starts with structure, not visuals:
Confirm the name and click Create teammate. They land in their own channel, which is where you'll send everything below. More on hiring →
Connect Notion
Interaction specs and design decisions get documented here as a living reference engineering can check against. Connect Notion →
Give it the brief
Confirm structure, then ask for the interaction notes
Once the low-fidelity structure is approved:
If you don't have a design system yet, give it your reference styles and it proposes one, then applies it consistently across every screen it designs afterward.
Tips for Better Results
| Tip | Description |
|---|---|
| Structure before visuals | Confirm the information architecture — screens and flows — before any visual design starts. Reacting to structure is faster than reacting to a polished prototype. |
| Give it a reference style | If you have existing UI to model after, name it up front. Without a design system, the teammate proposes one from your reference styles and applies it consistently across every screen afterward. |
| Ask for interaction notes explicitly | Click/tap behavior, hover, and state transitions (empty, loading, error, permission-denied) get documented screen by screen once you ask for them, after structure is confirmed. |
| Connect Notion for a living reference | Interaction specs and design decisions get written there so engineering has something to check against, not just a chat thread to scroll back through. |
Common Questions
Design
Back to the design use case overview.
Catch UI feedback and ship the fix
A daily digest triages feedback into a same-day PR or a designer's queue.
Create brand guidelines
Turn a positioning line into naming, tone, and a guideline, then check every new asset against it before it ships.
Catch UI feedback and ship the fix
A daily digest pulls UI feedback out of chat, routes the small stuff straight to an engineer for a same-day PR, and sends anything ambiguous to an actual designer instead of a guess.