Showing the work

Every field is a small exam question.

Setting up a connection — sending an audience to an ad platform, for example — meant filling in a form: match keys, sync schedules, hashed identifiers. Marketers didn’t choose those words. So they copied an old setup, asked the one colleague who knew, or put it off.

Yet the platform already knew most of the answers: the goal, the audience, who had given consent. The form ignored all of that and asked anyway. An assistant next to the form would not fix that. The form’s message was: “Fill this in correctly, and good luck.” That had to change.

The agent does the work, shows its work, and you do only what only you can do.

I started from intent, not from a list of platforms to connect. The agent sees what the marketer wants to achieve, works out what the connection needs and prepares the configuration. The marketer keeps the moments that are theirs: signing in, choosing an account, accepting terms and approving the result.

One thing made this harder than it looks. The data the agent needs most — what’s actually in the ad account — sits behind the sign-in the marketer still has to do. So before signing in, the agent works from intent and stated assumptions, and says what it can’t know yet. After signing in, it reads the real data and confirms.

I built it as a hi-fi prototype in React and TypeScript with Claude Code, on the design system’s own tokens and components, and worked one connection out end to end over more than eighty versions. In code, the team could experience the flow instead of reading a spec — and every rule had to hold up on a real screen.

1. Decision 01

   Show where every value came from

   Each field in the proposed setup names its source: from your goal, a suggested default, or known only after you connect. An AI-generated interface earns trust fact by fact, not as a whole.

2. Decision 02

   One state, shown three ways

   The conversation, the item on the canvas and the side panel all show the same state. They can’t disagree, because there is no second set of bookkeeping.

3. Decision 03

   Count the decisions, not the settings

   The number of steps equals the number of moments only the marketer can own. Everything else is the agent’s work, and nothing goes live before an explicit yes.

4. Decision 04

   One template for every stage

   The same panel serves not set up, in setup and live. Once live, it becomes the place to make changes: the agent proposes, names the consequence and offers undo.

A proposal you can experience, and rules you can check.

The prototype is a proposal for setting up and managing connections without the old configuration forms. Alongside it I wrote the dialogue and states for each step, and collected the design rules the work produced — more than forty, each written so you can look at a screen and say whether it breaks the rule.

What would I want to learn next?

Does showing the source of every value make people trust the setup — or do they only look when something goes wrong? That is what I’d want to observe with real marketers.