A case study · SureSide

Designing four products with AI agents

I designed the process. AI did the building.

Mamoru Kijima · Product designer

1The problem
2How I work with AI
3Testing and code review
4The result
5What I'm working on now
6Personal project
Scroll, or use the arrow keys
1 · The problem

Each product looked different.

They were designed and built separately.

Voice Assist
Knowledge Hub
Workflow
Before this work. Some are prototypes or redrawn screens.
1 · The problem

Instead of Figma mockups, we built a working prototype with AI.

Our idea connects the products, and a mockup cannot show that.

Mockup: one screen at a time
→
→
Prototype: you can try the whole flow
A fixed deadline 4 products at the same time No backend: one HTML file
2 · How I work with AI

My design process with AI agents, in 5 steps

I set the steps and the rules. AI does the work inside them.

Me1 · Shared baseSame parts and rules for people and AIdesign system + harness
AI2 · AI proposesDirection, UI, codeClaude Code
Me3 · I checkAgainst the user's jobjobs to be done
AI + me4 · TestFrom user storiesprogress page
AI + people5 · ReviewAI reviews, a person mergesGitHub · CodeRabbit
What we learn goes back into the base
2 · How I work with AI

Step 1: the same base for people and AI

Design systemThe parts and the rules
HarnessHow the AI works: steps, checks, and what "done" means
→
The same setup for the whole team
Me + Claude Code
Teammates + AI
Engineers + AI

I took over the design system and added AI rules, checks and releases.

ToolsClaude CodeCodexGitHubPlaywright
2 · How I work with AI

Steps 2–3: I gave the AI the user's job, not a layout.

"I want to see only the workflows that need action from me."The job of a knowledge manager

BeforeThe current list. Every row says "Published".
→
After, built with AI from the jobOnly rows that need action show a status.
2 · How I work with AI

My feedback made the screen simpler.

"A lot of this information looks useful, but it isn't. It makes the screen messy."My feedback to the AI

AI's versionAll the numbers, and a bar on every row.
→
After more feedbackThree numbers, one list, one main action.
3 · Testing and code review

Step 4: AI turned our user stories into 60 checks.

User storiesWe write them
AI writes the checks60 steps through the whole prototype
Run before every mergeResults go in the pull request
One progress pageWhat is done, what is next
Our real progress pageThe status, then what is left before the deadline.
3 · Testing and code review

Step 5: AI reviews the pull request. A person merges it.

1My AI writes the pull requestThe code and the description
2An AI reviewer checks itCodeRabbit
3A person decides and mergesHere, I merged it

A real pull request: #83From my review notes to a merged fix.

3 · How I ran it

A lead agent ran the other agents. I set the direction and approved the merges.

MeDirection and the quality bar
Lead agentDecides inside my rules, writes every decision down
Workflow list#48
KH home numbers#49
VoC wording#45
Check: docs vs. screens#65
mainMerged after I approve
88agent runs in 13 days 125decisions logged by the lead 24PRs merged in about 4 hours
4 · The result

The four products now look like one.

Voice Assist
Knowledge Hub
Workflow
VoC (new)
Design system + harness
The prototype · 3 people · 13 days · 69 merged pull requests
5 · What I'm working on now

Three problems I'm solving now

ProblemWhat I'm doing
Quality checks and merges still wait for me.
→
Send every changed screen to a review list, and define "done" for each step.So checks, not only me, can say "ready".
In progress
AI moves faster than the team can agree.
→
Write each decision down with its reason, in one format the team shares.So people can follow and agree, at AI speed.
In progress
Docs written for AI are heavy for people.
→
Keep rules for agents, and short versions for people.A writing skill turns one into the other.
Started

My personal project comes from the same problems.

6 · Personal project

AI Design Harness: this process as a public template

A brief
→
FrameIs this the right thing?
→
Build3 clickable options
→
ReviewAgainst your rules
→
Team decides
Option APriority groups
Option BUnassigned and team columns
Option CTriage with preview
A real run: 3 options, a recommendation, a spec and a reviewgithub.com/sadakoa/AI-design-harness

Thank you.