Script Builder in action: AI extracts hotel rates, generates code, human verifies.
Case Study
/
Ubio - Automation
Role
Lead Product Designer
Timeline
2025
Team
3 Engineers, Head of Product
From hours to minutes: AI-assisted script building
AI startups were promising pure-LLM web scraping—no scripts, no maintenance, just tell the AI what you want. If they were right, Ubio's entire business model was obsolete.
I led design on a one-month feasibility sprint to explore a different approach: AI generates automation scripts once, humans verify they work, then scripts run at scale without AI. Faster, cheaper, auditable.
The test case was Google Shopping's need to verify discount codes across 10,000+ e-commerce sites—each with their own cookie banners, chatbots, pop-ups, and constantly changing layouts. We had one month to prove the hybrid approach could work.
01
/
Impact
0
0
m
Weekly Automations
Browser automations running for clients every week
0.00
0.00
b
Transactions in usd
Powered annually for enterprise clients
02
/
The Challenge
The Market Was About to Shift
LLM capabilities were accelerating fast. Pure AI automation wasn't production-ready yet — but someone would crack it soon. We had maybe a year before the market shifted underneath us.
But there was a reason no one had figured it out. Running an LLM on every request is expensive. And running Playwright at scale isn't free either — it takes serious infrastructure we'd spent years building.
You need considerable bending and twisting to extract a website's information... and then it breaks the next time."
— Boris Okunskiy, CTO
Key Constraints
LLM tokens on every execution — bankrupting at 250M runs/week
Playwright at scale needs Chromium orchestration, proxy rotation, hardware wrangling
10,000+ e-commerce sites, each with cookie banners, chatbots, pop-ups
One month to prove the hybrid approach could work
03
/
Discovery
Working at AI speed
I developed three techniques to move as fast as the technology I was designing for:
1. System diagrams from conversations
Instead of starting with boxes and arrows, I talked through the architecture with Claude. The diagrams emerged from understanding, not assumptions.
2. Documentation from conversations
Technical conversations with the CTO became searchable documentation. Every decision had context preserved.
3. Prototypes from conversations
Using Claude's HTML artefacts, I could go from concept to interactive prototype in a single session. Iteration happened in hours, not days.
The tools
Claude Projects: Maintained context across the entire sprint
Miro: Architecture mapping, agent documentation, storyboards
Figma Make: Working prototypes for testing ideas
The pivot
I originally designed for full autonomous AI. The system would just handle everything. It didn't work.
The AI made confident mistakes. Users couldn't trust output they didn't verify.
I restarted the design process twice, each time adding more points where humans could intervene, verify, and correct.
04
/
structure
The multi-agent architecture
Under the hood, five specialized agents work together:
Agent
Role
Planner
Breaks down goals into steps
Executor
Runs automation steps
Analyser
Interprets page content
Matcher
Validates expected vs actual
Helper
Handles interruptions
Users don't need to know any of this. The UI hides the complexity.
Five specialized agents coordinate behind a simple three-panel interface.
The mental model: Step composition
Users are building a reusable script, not chatting with an AI. Every step becomes code. Every decision gets saved. The conversation is just scaffolding—the script is what ships.
05
/
Design
From AI sketch to working prototype
I had the theory. I had the intervention points mapped. But the first attempt was noisy — agents talking too much, unclear separation between activity and artifact.
Early prototype build out of Claude HTML artefacts: informative but overwhelming
What clicked
The challenge with this project was that it was strongly dependent on getting the technology working and producing good results. Only when the tech stabilised I was able to start nailing the interaction elements.
The script is the product, not the conversation
Activity should be scannable, not readable
Activity feed, browser preview, script panel. The script becomes the destination.
Refined design
The feasibility sprint used promo code validation. But the same architecture handles hotel price scraping — Ubio's core business. One YAML file defines a workflow. The UI doesn't change.
How I built this
The final prototype took 1.5 days using Claude and Cursor — no Figma as a starting point. Markdown in, working software out.
Article: The Rise of the Experience Director →
What happens when the cost of creating software drops to zero?
