Never Build the First Version: Async Design Variations with Claude Code

James Phoenix
James Phoenix

Ask for options before building. Drop the artifact to the desktop. Pick while something else runs.

Author: James Phoenix | Date: June 2026


The Pattern

When a design decision is non-trivial, don’t ask the agent to build the thing. Ask it to enumerate your options first. Then commit to one. Then build.

You can multiply your time by bundling the many choices that an agent can give you as an async artifact (a PNG or MD file dropped to your desktop) while the agent does synchronous work in a second terminal window. You switch tabs, review the options at your own pace, and paste your pick back in when you’re ready. No blocking. No back-and-forth rounds.

Terminal A (sync): fix the migration collision, run the integration tests, green-up the lint
Terminal B (async): enumerate 4-6 UX patterns for the chat history placement, render them as
                    a PNG at ~/Desktop/chat-history-options.png, wait for pick

Why It Works

Agents are good at generating options. Humans are good at evaluating them.

If you ask an agent to build the best version of something in one shot, it commits to implicit assumptions. You only discover you disagree after you’ve seen the result, which triggers an iteration cycle.

If you ask for 4-6 structurally different options first, you collapse the implicit assumption into an explicit choice. You pick once with full information. The implementation that follows has no ambiguity about intent.

The PNG beats the markdown list for UX decisions.

A text list of six layout options is hard to evaluate in the abstract. A PNG with six mini wireframes – each labeled, with tradeoffs – is evaluable in 30 seconds. You can paste it back into the conversation with a one-liner: “let’s go with A.”

The agent renders it while you’re doing something else. Zero marginal cost.


Real Instances from My Sessions

June 24, 2026: Post facade options before building

Octospark /agent feature. Instead of letting Claude implement whatever it thought was right for reading, editing, and deleting posts from the agent:

“Before you make the facade, what are my 3-5x options for reading post, editing post etc?”

Claude returned five options (direct API calls, Application Facade via DI, Service layer, Repository pattern, RPC). I picked “Application facade via DI”, asked two follow-up questions (“Would this be protected with auth? What is the latency tradeoff vs calling the API directly?”), then said build it. The implementation took one pass. No rework.

June 25, 2026: Chat history placement as a PNG

Octospark /agent – needed to add session history navigation to the chat surface. I asked Claude to enumerate the options first and drop them as a desktop PNG while it implemented two unrelated fixes (#1 grid selection, #3 double-click to open).

Claude’s response:

“Mockup is on your Desktop (agent-chat-history-options.png) – 6 options with mini /agent frames, Option A (top-bar History popover) marked Recommended. I held off building this one since you wanted to pick the direction first.”

Options rendered: A) top-bar history popover, B) collapsible left rail, C) cmd-K session switcher, D) session tabs above composer, E) slide-over sheet, F) session pill in the context bar.

I opened the PNG while the sync work ran, pasted back: “let’s go for history and new I like the top bar history popover.” One pick. One implementation pass. No iteration.

June 24, 2026: Context bar overflow patterns

Same session, different decision: how to handle >8 sources in the context bar. I asked for recommended-pattern screenshots dropped to my desktop. Claude generated PNG mockups of Pattern A through E (single “Context (N)” summary popover, horizontal scroll, accordion, paginated chips, collapsed tag cloud).

Picked Pattern A. Said “this cracked.” Built in one pass.

June 16, 2026: Pros/cons plan before switching AI SDK approach

Evaluating whether to move from custom streaming to the AI SDK streaming data API. Instead of building a proof-of-concept in the conversation:

“Make a plan on my desktop pros vs cons of going that way?”

Got a structured MD file at ~/Desktop/streaming-sdk-comparison.md covering latency, DX, protocol compatibility, and migration cost. Made the call in under 5 minutes without spinning up a branch.


How to Invoke the Pattern

Explicit enumeration (before a structural build):

Before you build [thing], give me 3-5 options for [the structural decision].
For each: one-line description, key tradeoff, recommended or not.

Async artifact drop (while something else runs):

[Sync task 1] [Sync task 2]

Also: enumerate [options] and save them as a PNG at ~/Desktop/[name].png.
Don't build [the thing] until I pick.

The agent completes the sync tasks and the PNG in parallel. You review the PNG on your own clock. You paste your pick as a one-liner when you come back.

For architecture decisions specifically:

Leanpub Book

Read The Meta-Engineer

A practical book on building autonomous AI systems with Claude Code, context engineering, verification loops, and production harnesses.

Continuously updated
Claude Code + agentic systems
View Book
What are my options here given [stack/constraints]? Don't implement yet.

Claude will enumerate, you ask follow-up clarifying questions (latency tradeoffs, auth implications, coupling costs), then commit.


What to Enumerate vs What to Just Build

Enumerate before committing when:

  • The choice has structural consequences (data model, API shape, UI layout, auth flow)
  • You have a preference but can’t articulate it without seeing options
  • The wrong choice means rework, not a quick tweak
  • You’re about to switch terminal windows and can review async

Just build when:

  • The implementation is mechanical (add a field, fix a lint error, rename a function)
  • You already know what you want
  • The cost of a wrong first pass is a one-line correction

The signal: if you would normally sketch options on a whiteboard before coding, use this pattern instead. The agent is the whiteboard.


The Async Bundle Trick

The biggest unlock is combining sync and async in a single prompt. While the agent is:

  • Running a test suite
  • Implementing a mechanical feature
  • Doing a context-heavy read pass

…it can simultaneously write a design artifact to your desktop. You switch to that artifact in a separate tab. You form an opinion. By the time the sync work completes, you already know your pick.

This is a small thing that meaningfully multiplies effective reasoning time. You are never blocked waiting for options. The options arrive while you were doing something else.


Related

Topics
Agent ArchitectureAgent SkillsClaude CodeDeveloper Experience

Newsletter

Become a better AI engineer

Weekly deep dives on production AI systems, context engineering, and the patterns that compound. No fluff, no tutorials. Just what works.

Join 306K+ developers. No spam. Unsubscribe anytime.


More Insights

Cover Image for Ask Your Agent to Create a Live Progress Report

Ask Your Agent to Create a Live Progress Report

When an agent runs for an hour, make it write the log you will actually read. Markdown to skim, JSON to resume.

James Phoenix
James Phoenix
Cover Image for Two Files Keep a Long /goal Run Alive

Two Files Keep a Long /goal Run Alive

The brief never changes; the state changes every turn. Put each in its own file. Point the `/goal` at the small, stable markdown brief and let the agent read and write the growing JSON state through tool calls, so the prompt stays the same size on turn one and turn three hundred.

James Phoenix
James Phoenix