Working Backwards with Agent Mode

I split my work into two distinct spaces:

• Strategy in the ChatGPT Mac app — where I think, compare options, and sharpen requirements.
• Execution in VS Code Agent Mode — where I hand off one refined instruction to get focused code.

This separation keeps architecture decisions stable and reduces churn.

Principles

Work backwards from the outcome

Start with a clear picture of what “done” looks like (a screenshot, a short demo video, a competitor feature). Deconstruct the UX and the underlying components needed to reproduce it.

Separate thinking from doing

Use the Mac app as a whiteboard for exploration and trade‑offs. Only when the plan is crisp do I call in the agent to build exactly that plan.

Prefer one‑shot handoffs

A single, well‑scoped instruction beats five fuzzy iterations. Less drift. Fewer regressions. More predictable results.

When this approach shines

• Porting features from an existing product or screenshot.
• Spiking a small vertical slice end‑to‑end.
• Guarding a codebase’s patterns (styling, data access, error handling) while still moving fast.

Strategy in the ChatGPT Mac app (exploration)

What I ask for

• A map of the UX I’m targeting (pages, states, edge cases).
• Components and data contracts needed.
• Integration points with my stack (Next.js, Turso/libSQL, etc.).
• Trade‑offs and recommendations (what to cut for an MVP).

Example prompt

I’m targeting the attached screenshot: a lightweight “Events” page in my Next.js app.

Deconstruct this into:
- UX states (empty, loading, populated, error)
- Components and their props
- Data model and minimal API surface
- Accessibility concerns (keyboard focus, aria, violations to avoid)
- Risks and cuts for a clean MVP

Stack: Next.js (App Router), Tailwind, Turso via @turso/client, Server Actions allowed.
Output: a concise plan I can hand to an agent.

Anti‑example (what I avoid)

build me an events page

Too vague → creates drift, weird dependencies, and styling mismatches.

Refinement checklist (before I leave the Mac app)

• I know the page states and transitions.
• I’ve named each component and listed its props.
• I have the minimal schema and a few example rows.
• I picked the data access pattern (server actions, API route, or RSC fetch).
• I wrote acceptance criteria (what success output should look like).

One‑shot agent instructions in VS Code (execution)

Hand‑off template

You’re operating on my existing Next.js repo.

Context:
- App Router, Tailwind, shadcn/ui already installed
- Database: Turso via @turso/client
- Coding style: TypeScript, strict, no any
- Data access: Server Actions in /app (no external ORM)

Task:
- Implement the “Events” vertical slice exactly as described below.
- Files to add/update must be listed explicitly.
- Include DB init SQL, sample seed, and a smoke test route.

Acceptance:
- Page: /events lists upcoming events (title, date, venue)
- States: loading skeletons, empty state, error boundary
- a11y: keyboard focus order valid, links have clear names

Plan (from strategy doc):
[PASTE THE PLAN FROM THE MAC APP HERE]

Example agent outcome (trimmed for clarity)

// app/events/page.tsx
export default async function EventsPage() {
  const rows = await listEvents(); // server action
  if (!rows.length) return <EmptyState />;
  return <EventsList items={rows} />;
}

Why this works

Fewer context switches for the agent

Agents do best with tight, self‑contained goals. One refined instruction bundles intent + constraints + acceptance, so the agent spends cycles building, not guessing.

Architectural consistency

Design decisions (state flow, data contracts, error handling) are chosen in the strategy phase and remain stable through execution. The agent fills in code, not the architecture.

Higher signal‑to‑noise

Exploration (“what if?”) lives in the Mac app where it’s cheap to change. The build step is deterministic, fast, and easier to review.

Common pitfalls → fixes

Pitfall: “Do everything” prompts.
Fix: Split into outcome map (Mac) and exact instruction (VS Code).

Pitfall: Ambiguous stack or patterns.
Fix: Declare framework, data layer, and code style up front.

Pitfall: Over‑scoped hand‑offs.
Fix: Ship a vertical slice. Leave variations and polish for follow‑ups.

Prompts you can reuse

Screenshot‑driven deconstruction (Mac app)

Given this screenshot, list:
- visible components with names and props
- derived states and loading/error paths
- minimal schema and seed rows
- API surface or server actions required
Return as a compact build plan.

One‑shot build (VS Code agent)

Implement exactly this plan in the current repo (Next.js App Router, TS, Tailwind, Turso @turso/client). 
List the files you’ll create or modify first, then write code. 
No external libraries unless stated. 
Provide a smoke test route I can hit in the browser.

Review & integration

What I look for

• File layout and naming aligned to my repo.
• Data fetching and mutation paths match the plan.
• Loading/empty/error states behave as described.
• Minimal diff, easy to revert or iterate.

Quick smoke test

• Seed DB → load page → toggle network errors → verify states.

Quick reference (tear‑off)

Mac app (strategy)

• Outcome image or prototype
• Component map + states
• Minimal schema + seed
• Acceptance criteria

VS Code agent (execution)

• One refined hand‑off
• Explicit files list
• Deterministic output
• Smoke test included

By working backwards and separating strategy from execution, I stay fast and intentional. The Mac app sharpens the “what”; Agent Mode delivers the “how” in one focused shot.