Running the Full Command Code /design Flow on a Real Platform

How the /design system caught real bugs across three production sites, and why the order matters more than any single tool.

By JTT @devbyjt

By JTT @devbyjt Follow on X ↗ 16 August 2026 · 6 min read

TL;DR: I ran the complete Command Code /design flow across all three By JTT properties (byjtt.com, experiments.byjtt.com, games.byjtt.com). The audits scored the design honestly, the fix pass caught bugs a "make it prettier" pass would have missed, and the systems layer left the platform with real design infrastructure: 9 semantic color tokens, one type scale, skip links, iOS safe areas, and zero generic AI-tells.

Running the Full Command Code /design Flow on a Real Platform

The /design command in Command Code is not one tool. It is a sequence of tools designed to be run in a specific order: audit, fix, systems, ship. I ran the whole thing on a real, production platform with three live sites and real SEO stakes. Here is what happened, what it caught, and why the order is the point.

The flow

The skill routes into four layers:

Audit — checkup (fast vitals, /60), smell (AI-tell detector, /10), review (honest critique, /50). These write reports to .commandcode/design/. Report only. Never fix in the same turn.
Fix — deslop, redesign, relayout, a11y, refine. These consume the reports. The report is the diagnostic; the change is the treatment.
Systems — typeset, recolor, tokenize, motion, interaction, responsive. Build the foundations properly, not as one-off tweaks.
Ship — finish, refine, voice, surface. Friction removal and character.

What the audits actually scored

checkup: 50/60 — "Needs changes." Healthy intentionality, readability, usability, and speed. Watch on responsiveness (fixed hero type) and accessibility (focus rings only on cards).
smell: 10/10 CLEAN — zero generic tells. Warm paper + carbon ink + signal vermilion, Space Grotesk + Geist Mono, hairline editorial. This is the design making choices, not a template.
review: 41/50 — "Approve with refinements." First impression 9/10, color voice 9/10, hierarchy 8/10, type 8/10, interaction 7/10.

What the flow caught that a polish pass would miss

This is the part that made it worth running properly.

experiments.byjtt.com was still running the old pre-rebuild design. The pre-migration CSS (Clear Sans, tan background) had survived the Eleventy migration. The platform was "consistent" in name only. The fix pass re-themed it to the canonical warm-paper design with all content styles preserved.
No skip link anywhere. Keyboard users tabbed through the entire nav on every page before reaching content. This is an accessibility escalation trigger — HIGH on sight.
No viewport-fit=cover. The iOS notch was eating the bottom tab bar despite the safe-area CSS. One meta attribute fixed it.
Zero design tokens. Every color was a hardcoded hex. The tokenize pass produced 9 semantic roles: --paper, --ink, --surface, --line, --muted, --signal, --signal-soft, --ok, --chip.
The work page was silently empty. A Nunjucks selectattr filter failed without error, hiding all three non-draft projects. The relayout pass replaced it with a proper data file, and the editorial hairline rows now render correctly.
Em dashes in UI copy. The finish pass replaced them with colons per the copy discipline.

The systems layer, applied

typeset — a formal 4-step scale: display (clamp), section, lead, body. Fixed the section-head collision the review flagged.
recolor + tokenize — 9 semantic tokens replacing every hardcoded hex, propagated across all three properties.
interaction + motion — :active press states on buttons and the tab bar; prefers-reduced-motion disables transforms.
responsive — viewport-fit=cover and verified safe areas.
a11y — skip links added to all three base layouts.

Why the order is the point

Running finish before audit would have polished a design with a broken work page and a missing skip link. Running recolor before typeset would have tokenized colors that were still fighting the old scale. The sequence is not ceremony: each layer consumes the previous one's output.

The reports are also continuity. The next /design pass reads .commandcode/design/*.md before touching anything, so the diagnosis survives between sessions and between agents.

The result

Three properties, one design language, real design infrastructure, and a written record of why each decision was made. The X post that points here has the short version. This is the long version with the receipts.

If you run Command Code's /design on a real project, run the whole flow. The tools are individually good. The sequence is what makes them a system.

Built and published in public. Evidence over hype.