UX design with checks, not guesses.
Project brief
Built a product studio that moves from brief to blueprint, through deterministic UX checks, and out to exportable assets.
Hiring signal
Senior ownership across product framing, scope, and shipped interface quality.
Engineering read
Focus on constraints, architecture choices, external systems, and data flow.
A browser-based UX studio: turn a brief into a structured page blueprint, check it against WCAG and readability rules, and export the result without leaving the tab.
AI page generators are good at producing something plausible and bad at proving it works. Teams end up with layouts that look fine but have no accessibility or readability checks behind them.
I split the product into a generative side and a verification side. Blueprint generation uses Anthropic Claude first, with an Ollama fallback and a deterministic mock so the tool still works if the API is down. The audit engine is intentionally not an LLM; it's a 38-check pass over real HTML using Cheerio, WCAG 2.1 luminance math, and Flesch-Kincaid scoring so findings are repeatable.
Project method
The requirement was to reduce idea-to-page time without accepting the usual weakness of AI page generators: plausible output with no proof of quality. The workflow therefore had to capture a brief, produce a structured blueprint, generate theme tokens, audit the result deterministically, and export usable artifacts.
The app became a Next.js monorepo so the studio UI, agent runtime, theme engine, UX audit package, and shared schemas could evolve independently. Provider calls were abstracted behind Anthropic, OpenAI/Gemini, and Ollama fallbacks, while Cheerio and the audit package handled HTML inspection without relying on model judgment.
The UI follows Brad Frost's atomic design: atoms, molecules, organisms, and templates with imports flowing downward. The visual system uses Product Studio tokens such as ps-canvas, ps-surface, ps-raised, ps-border, ps-accent, ps-ink, and severity colors, which made the studio feel like a coherent workbench rather than a collection of generated panels.
The MVP was the four-stage path from brief to blueprint, audit, and export. Multi-page generation, CMS integration, collaboration, and analytics were explicitly kept out so the first version could prove the core promise: generated page structure plus measurable UX quality.
Development started with canonical schemas for Brief, PageBlueprint, ThemeTokens, AuditReport, and FixPlan. The UI then layered in review checkpoints, run history, command palette actions, preview viewports, and export formats once those contracts were stable enough to keep the generated artifacts predictable.
Takeaway
Four stages — brief, blueprint, audit, export — take a product description to a scored page spec. A command palette keeps actions close, and exports to JSON, CSS tokens, full HTML, or a client-side ZIP without a server round-trip.
Evidence
Open channel
Architecture, AI workflows, design systems, and interfaces that need to hold up after launch.