BACK
DESIGN EXPLORATION · BRIEF GENERATION

I used AI to design four real demos.

A single designer, an AI coding agent, and a critique loop — turning a vague prompt into four production-grade UI concepts for how an AI Agent should ask follow-up questions before generating a creator brief. Here is the one that won.

Flagship demo · live capture

Watch the AI turn one sentence
into a complete creator brief.

AI CODING AGENT
× MIRA CRITIQUE
4concepts
UI directions explored
2videos
Live interactive demos
5dims
AI-scored critique matrix
1winner
Inline chips — Design C
Scroll
01 — The Problem

When AI drafts a brief from a sentence, four things keep going missing.

missing
P.01

Product Info

What product or objective is the brand actually trying to promote?

missing
P.02

Brand Info

The key business context that grounds every creator invitation.

missing
P.03

Target Country

Delivery region is undefined — content localization breaks.

missing
P.04

Brief Language

Which language do creators receive the invitation in?

The design question: how should the AI proactively ask for these gaps — without turning a conversation into a form?

02 — Four Demos, One Afternoon

Four ways to ask. Two brought to life on video.

A▶ Video
A

Structured Form with Progress

PRO

Clear step-by-step guidance with visual progress tracking reduces decision fatigue.

CON

Excessive vertical stacking creates heavy scroll burden and visual overwhelm.

Claude generationMira critique
B▶ Video
B

Info Check Cards + Smart Suggestions

PRO

Status cards surface gaps instantly while smart suggestions accelerate input.

CON

Checkbox-to-field workflow adds unnecessary friction versus direct typing.

Codex generationMira critique
★ WinnerC
Design C — Inline conversation with quick action chips
C

Inline Conversation with Action Chips

PRO

Chips blend structured input naturally into conversational flow without context switching.

CON

Weak visual hierarchy risks users missing required fields amid chat noise.

Codex generationMira critique
D
Design D — Generated preview with readiness checklist
D

Generated Preview + Readiness Checklist

PRO

Previewing partial output upfront creates immediate gratification and completion motivation.

CON

Incomplete brief prominence may confuse users about editing above vs. filling below.

Codex generationMira critique
03 — The Critique, Scored by AI

Mira scored all four across five dimensions.

A
B
C ★
D
Winner · Design C

Inline Chips embody the "conversation as interface" philosophy — brevity without sacrificing efficiency.

Design A

Strongest guidance, but feels heavy — excessive scrolling adds friction for a lightweight agent.

Design B

Excellent status visualization, but the two-step confirmation works against "minimize friction."

Design D

Preview strategy introduces ambiguity — fill the gaps, or edit above?

◆ Recommendation

Combine Design C's inline pattern with Design A's progress visibility — lightweight guidance with progressive disclosure.

04 — How It Was Made

A tight divergence–convergence loop, powered end-to-end by AI.

🎯1
Define

Frame the problem space — the missing brief fields.

🔌2
Integrate

Pull design assets & tokens via MCP tools.

3
Generate

Spin up multiple UI concepts with an AI coding agent.

🔄4
Iterate

Refine variants through prompt-driven cycles.

⚖️5
Evaluate

Compare & score every proposal through Mira.

🤖
AI Coding Agent

Claude & Codex for rapid UI prototyping — multiple design variants from text prompts in minutes.

Skills & MCP

Leverage MCP tools for asset integration and context-aware iteration across design tools.

🔄
Prompt-Driven Iteration

Refine & compare variants iteratively — enabling fast divergence–convergence cycles.

05 — The Takeaway

From one prompt to
four shippable demos
this is AI, for design.

These aren't mockups. They're interactive, critiqued, and ready to hand to product. The demo is the deliverable.