Resources

Claude builds fast.
Make it build right.

You have the design, maybe even the design system, and now you are building it with Claude Code. These are the process, rules and checklists I use for that part, packed into files that live in your project.

    • 12 patterns From lookalike components to errors that don’t help
    • 30-second checks Catch each one without reading code
    • One-line fixes Prompts you can paste into any AI tool
    • 5-minute review All twelve checks on one printable page

    Free ebook | Any AI tool

    Looks finished. Isn’t.

    12 ways AI breaks your UI, and how to catch each one in 30 seconds. For Claude, Cursor, Lovable, v0, Figma Make or any other AI tool.

    No setup. Read it once, keep the 5-minute review next to you.

    Free 20 pages, PDF. No sign-up.

    Download the free PDF Also on Gumroad
    • CLAUDE.md Rules Claude reads before it touches anything
    • REVIEW.md The senior review checklist for AI-built UI
    • 7-step process Brief to shipped, on ISO 9241-210
    • 8 visual explainers One page each

    Free | Claude Code kit

    Spec to Ship Lite

    The process and rules for building real UI with Claude Code, the way a senior designer would.

    For web projects. Setup takes ten minutes.

    Free Pay what you want, if it helps you.

    Get it free
    • spec-writer Interviews you instead of guessing
    • design-system-extract Reads Figma or your code
    • design-review Finds invented components and missing states
    • a11y-audit Maps findings to WCAG, lists the manual checks
    • 3 example specs Government, banking, industrial
    • WCAG 2.2 AA checklist Four passes

    Full kit | Claude Code

    Spec to Ship Pro

    Everything in Lite, plus the tools that work alongside you: four skills, worked examples and the accessibility checklist.

    Also works with Codex, Cursor and Copilot through AGENTS.md. 14-day money back.

    $29 One person. A Team licence for up to 10 people is $249, with an onboarding call.

    Get Spec to Ship Pro

New resources are added here as I finish them. The kits are sold through Gumroad. The free ebook downloads straight from this site.

The process

Seven steps, from brief to shipped.

It is not for generating designs. It is for the building part, where most of the quality gets lost: the component that is not in your system, the error state nobody built, the focus outline that quietly disappeared.

  1. 01

    Brief

    Who uses the flow, for what, and where.

  2. 02

    Inventory

    What already exists in your design system.

  3. 03

    Spec

    Every state, edge case, error and exact piece of copy for one flow.

  4. 04

    Build

    Plan first, then one step at a time.

  5. 05

    Review

    Findings you can paste straight back as instructions.

  6. 06

    Audit

    WCAG 2.2 AA, automated and by hand.

  7. 07

    Ship

    A handoff engineers respect.

Built on standards

So you can say why.

The process follows the human-centred design cycle of ISO 9241-210. The review follows the principles of ISO 9241-110 and -112. Accessibility targets WCAG 2.2 AA. You do not need to know any of them to use the kits. They are there when a stakeholder asks "why?".

Honest limits

What it does not do.

  • It does not make your product compliant. It catches the failures AI makes most often and gives you evidence, not a certificate.
  • It does not replace testing with real users.
  • It is independent work, not an Anthropic or Figma product.

Questions

Before you buy.

Want it set up on your team's project?

I run the whole process with product teams on their own design system, from the first brief to the audited build. Tell me where you are.