Find the
friction

How I built SparkFlow with AI

ContextComponentsCriteria
Xiao LiuOctober 2026
Why now

Three ways we use computing power

Stage 1
Command line
$solve(A, b)
You need to knowSyntax and algorithms
Stage 2
GUI
You need to knowThe tool and its workflow
Stage 3
Natural language
“Plot last month's test results and flag the outliers.”
You need to knowWhat you want, and what success looks like
Specialists
Almost anyone
The new bottleneck

The agent is powerful.
It only knows what you tell it.

You don't need to memorize syntax. But you still need to read and understand what the agent is doing.
Vague request in, generic result out. The human's job is to define the problem and check the result.
The friction

I talk to agents all day.
I was typing all of it.

Speak

Say the request the way you think it

→

Clean up

Filler words removed, sentences formatted

→

Copy

One click

→

Paste

Straight into any AI agent

Live demo
Runs in your browser
Speak at the speed of thought.
How I defined it

Build the context infrastructure with three Cs

C
C1

Context

Why it exists, and what matters most

C
C2

Components

How the project breaks into parts

C
C3

Criteria

Rules the agent turns into tests

The exact wording of the prompt doesn't matter. The content does.

C1 · Context

Tell the agent why, and what matters most

Friction
Typing long prompts slows down my thinking and my interaction with the agent
Goal
Speak a request, paste it into an agent, no friction
Top priority
Privacy. Transcripts never leave the browser.
 The context, in one paragraph
Build a browser app that turns my speech into clean text I can paste into an AI agent. Users should use it with no install and no API keys. Above everything else: transcript text must never leave the browser.
C2 · Components

Break the project into parts

1

Speech capture

Browser speech recognition

2

Text cleanup

Remove fillers, format sentences

3

History and topics

Save and organize thoughts

4

Time saved

Activity rings and goals

5

Hosting

A static web page, nothing to install

6

Usage tracking

Anonymous adoption counts

Why

Each part is a small, focused task. The agent solves one at a time, so each step is more likely to succeed, and so is the whole project.

The bigger the project, the more this matters.

C3 · Criteria

Turn criteria into tests the agent runs

Each criterion becomes a test. The tests check every part after each build, so you only look at what fails.

Criterion
Test the agent wrote
Result
No transcript text ever leaves the browser
Inspect every tracking request
Pass
Tracking never breaks the app
Block the network; the app still works
Pass
Opening the app counts once per 30 minutes
Reload 3 times; 1 request is sent
Pass
Each browser's ID is created once, never changed
Reload; the ID stays the same
Pass
19/19
tests passed, by part
Browser ID3/3
App opens4/4
Transcription & privacy9/9
Resilience2/2
Regression1/1
When a test fails
See which part failed
Refine C1 Context or C2 Components
Rerun the tests
Reality check

You won't know everything up front

First version
↓
After refining
Simplified illustration of the SparkFlow layout
01

I didn't know either

My first version stacked every block in one long column.

02

I found the criteria by trying

Each problem I noticed became a new rule.

03

It gets faster every time

By the second app, you start with a much better sense of what you need.

Syntax→Tool→What you want

With natural language, the bottleneck is how clearly we define and check what we want.

What's your friction?

Try SparkFlowAsk me for a demo link
Questions
Later on

You'll start saving what you learn

Style guide

Palette, buttons, layout rules

Development workflow

Criteria before building, checks before pushing

Usage-tracking playbook

Written for an agent, reusable on the next app

The agent reads them on the next app. No re-exploring.

Each round, the agent knows me a little better
Define
Verify
Refine
Reuse
Bonus
Speaker notes · N to hide