AI-powered UX design for teams that ship.
Project brief
Built an AI product studio that moves from brief to blueprint, deterministic UX audit, and exportable artifacts in one guided workflow.
Hiring signal
Senior ownership across product framing, execution scope, and shipped interface quality.
Engineering read
Focus on constraints, architecture bets, external systems, and data-flow decisions.
A browser-based UX studio: generate structured page blueprints with AI, audit them against real WCAG and readability heuristics, and export production-ready design specs — without leaving the tab.
AI page generators are good at producing something that looks plausible and bad at proving it's usable. Teams end up shipping AI-generated layouts with no accessibility or readability guarantees, and no deterministic way to check them.
I split the product into a generative half and a verification half on purpose. Blueprint generation uses Anthropic Claude first, with an Ollama fallback and a deterministic mock so the tool never blocks on API availability. The audit engine is intentionally not an LLM — it's a 38-check pass over the real HTML using Cheerio, WCAG 2.1 luminance math, and Flesch-Kincaid scoring, so every finding is reproducible.
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.
Conclusion
Four stages — brief, blueprint, audit, export — take a product description to a scored, exportable page spec. A command palette (⌘K) keeps every action a keystroke away, and exports (JSON, CSS tokens, full HTML, or a client-side ZIP) require no server round-trip.
Proof list
Open channel
Architecture, AI workflows, design systems, and interfaces that need to hold up after launch.