← Craig Stapley✕
Essay · 5 min read

I built a design process because I don't trust myself to finish one

Most process posts are aspirational. This one is a list of nineteen ways I cut corners, and the gate that stops me at each one.

Why I wrote this down

I kept shipping work that wasn't ready. Not obviously broken, but subtly. Hierarchy that didn't earn its place. Components pretending to use the design system but not actually using it. Screenshots that looked like the intent but weren't the reality.

Post-mortems showed the pattern. There was always a gate I'd skipped, a step I'd waved through, a check I'd eyeballed instead of actually running.

So I documented it. Not as aspiration. As a fence. Five gates, and I can't start the next one until this one hands me something I can hold. A measurable thing, not a feeling that it's fine.

Same process whether I'm building or Claude is. That's the point. It isn't a style guide. It's scaffolding for a brain that skips ahead.

The five gates

Each gate produces an artifact. No artifact, no next gate. No exceptions.

Gate 1. ORIENT

Read. Understand. Declare the plan.

Before code. Produce a Context Receipt: every document you actually opened (not skimmed, not from memory), one specific fact from each that proves you read it.

This exists because I jump straight to building. Claude jumps straight to building. The Context Receipt is the blocker. Blank receipt = no build.

Gate 2. THINK

Hierarchy. Emotional state. User context. Patterns.

Run the Design Compiler skill. Rank every field from first principles. Each element earns its position. "The old design had it here" is not a reason.

Run the Emotional State audit. User arrives in what state. User leaves in what state. Screen won't accidentally deliver the right state. You have to build it in.

Gate 3. BUILD

Mobile-first. No unnecessary choices. Patch mode.

Default mode is patch. Surgical edits via Edit tool, not Write tool. Rewrites need escalation. Rewrites kill features silently. I learned that the hard way. Three critical systems vanished in one visual rework.

Every change gets a screenshot of the node that changed. Not a canvas overview. The single component. Screenshot has to appear in the message or it didn't happen.

Gate 4. CRITIQUE

Mechanical audits. Not vibes.

This is the gate I skip. It is also the one that matters most. I have not made peace with what that says about me.

Self-certifying "looks polished" catches nothing. Scanning for #fff, counting uppercase labels, grepping for focus-visible rules catches everything.

The checklist runs every time.

  • Zero pure black (#000) or pure white (#fff). Tinted neutrals only.
  • Zero uppercase labels unless it's an acronym.
  • Every interactive element has :focus-visible.
  • No bounce or elastic easing.
  • Touch targets ≥ 44px.
  • Reduced-motion media query exists and works.

Then adversarial relay: Claude builds, ChatGPT critiques. If they disagree, it's not ready.

Gate 5. PRESENT

With rationale. With critique.

Show the work with:

  • What changed. The diff.
  • Why. Back to the Context Receipt and hierarchy.
  • What critics flagged and how it was fixed.
  • What's uncertain. Explicitly.

No "ta-da." No "done." Work plus rationale.

Nineteen failure modes

The gates exist because I have nineteen documented failures. Partial list:

  1. Skip Gates 1–2 and code straight.
  2. Treat all UI elements the same. No hierarchy.
  3. Don't read existing docs.
  4. Don't invoke skills.
  5. Resist external critique.
  6. Rewrite files from memory instead of surgical edits.
  7. Copy field order from old designs without earning it.
  8. Don't verify before presenting.
  9. Speed-run sessions for output count. Three deep beats seven shallow.
  10. Build before installing quality tools.
  11. Eyeball quality instead of mechanically auditing.
  12. Build containers from frames instead of component instances.
  13. Skip screenshot verification after building.
  14. Resize auto-layout parents before children.
  15. Bind variables with value=0.
  16. Don't reposition cloned variants.
  17. Use "it's just a test" to lower standards.
  18. Batch screenshots for "later."
  19. Assume last session's state carries over.

The list grows. New failures get logged. The gate that should have caught it gets a new check.

What this is really about

The 5-Gate process isn't project management. It's thinking I couldn't keep in my head, so I put it on the outside. I have ADHD. I get excited about building. Left alone, I will blow past Gate 4 every single time and feel great doing it.

The gates are the thing that stops me cold. They don't make me a better designer in the moment. They make the system, me plus Claude plus ChatGPT plus a dumb mechanical checklist, produce better work than any one of us would alone.

Most process posts are aspirational. This one is a ledger. Ways I fail, the check that catches each, the artifact the check leaves behind.

The full process file (CLAUDE.md, review checklist, gate artifacts) is on the tools page. Fork it, gut it, rebuild it around your failures, not mine. The rules barely matter. The pattern does. Name the way you cut corners. Name the check that catches it. Don't start the next gate until the check has actually run.