A client once showed me a 500-page Figma file. Two years of work. Hundreds of beautifully designed screens, smooth transitions, a full interactive clickthrough. The client loved it.

Nobody could build it.

This is the problem I solved by building a Claude Code skill around Jesse James Garrett's Elements of User Experience framework. If you're using Claude Code for client work — or you're a product builder trying to stop AI from jumping straight to visuals — this is how it works.

The designer had worked with total freedom — adding features because they looked good, not because users needed them. Every edge case got its own screen. Every happy path split into four alternatives. The dev team showed up after the design was "done," looked at the scope, and kept moving the goalposts. After two years and a lot of money, nothing shipped.

I shelved the Figma file and started over. Strategy first. Scope second. Structure third. Skeleton fourth. Then — and only then — visuals. We shipped in phases. The client had a working product in months.

The Figma file wasn't the problem. Skipping the boring steps was the problem.

AI doesn't skip the boring steps. It makes skipping them feel fine.

A client recently spent a full day in Claude Desktop generating high-fidelity HTML pages with Tailwind CSS. By end of day one they had a dozen beautiful screens. By day two I knew we were in trouble.

No structural logic connecting the screens. Features that appeared because they felt right in the moment. Navigation that contradicted itself across pages. And because everything looked real, it felt done — even though none of the actual design decisions had been made.

AI lowers the cost of making something look finished. It does not lower the cost of getting the structure wrong.

So I built a Claude Code skill — pm-feature-plan — that runs Jesse James Garrett's five-plane framework as a structured pipeline with approval gates at each step.

You feed it meeting notes from a client call. It walks through strategy, scope, structure, and skeleton in order. It won't generate visuals until the structure is approved. Site maps use Garrett's own Visual Vocabulary notation as SVGs. Wireframes are structural — gray boxes and labels, no colors, no fonts — because visual fidelity at the wrong stage is the exact trap we're avoiding.

The output is a set of client-facing documents that build from first principles to a build estimate, exportable as a PDF.

Clients who see this process say yes faster. They can see you understood their problem, not just heard it.

After a client meeting, save your notes and run:

/pm-feature-plan meeting-notes.md

If the client shared wireframes or a staging URL:

/pm-feature-plan meeting-notes.md https://client-site.com/wireframes/

Claude walks through each plane — pausing for your approval before moving on. You end up with five documents in a plans/project-name/ directory: the four plane docs plus an executive overview ready to share with the client.

To generate a PDF:

~/.claude/skills/pm-feature-plan/generate-pdf.sh ./plans/project-name/

Requires pandoc and WeasyPrint (brew install pandoc weasyprint). It stitches everything together and opens the PDF.

When requirements change after a follow-up:

/pm-feature-plan ./plans/project-name/ follow-up-notes.md

It reads the existing docs, figures out what changed, re-runs only the affected phases, and regenerates the overview. Phases that weren't touched stay approved.

No external service. No subscription. No dashboard. Just the boring steps, done fast, in the right order.

A working product instead of a beautiful prototype nobody can build. Clients who understand what they're getting before a single line of code is written. Scope that actually fits the budget.

Garrett's framework is twenty-five years old. The trap it solves keeps getting more expensive.

How many projects have you watched stall because someone skipped straight to design? If you want to use this skill or you're building your own Claude Code workflow for client work, email me at jonathan@rubygrowthlabs.com with the subject "Claude Code skill" — tell me what you're building.