A Design System an Agent Cannot Skip
Without a project design system, an AI agent quietly falls back to a generic look. So I gave OpenPlanr a system it cannot skip: a hard gate before any design runs, and a linter that fails the build on sub-AA contrast.
Asem Abdo
An AI agent will produce per-screen designs that each look fine on their own and add up to nothing coherent. The reason is simple: with no project-wide design system to anchor to, every run starts from zero and falls back to a safe, generic default. The fix is not a better prompt. It is to make a design system a prerequisite the agent is not allowed to skip.
A gate, not a suggestion
In OpenPlanr, if no design system exists when you ask for a design, a preflight gate fires before anything renders. It is a hard stop with four choices: generate a system now, point at an existing one, describe the brand, or cancel. There is no fifth option where it proceeds with something generic.
The choice is persisted and reused by every future design run and by the planning agents downstream. Continuity stops being something you hope each run remembers and becomes something the architecture guarantees.
What a system actually contains
A generated system is a real package, not a single stylesheet. It carries design tokens for light and dark on a four-point spacing grid with accessible color pairs, a manifest, a brand description, and component notes. When the brand is vague, an advisor mode proposes a few distinct directions instead of inventing one and pretending it was obvious.
The linter has teeth
A design system is only worth anything if adherence is enforced, so the linter
checks the output against it. The rule I care about most targets contrast. A WCAG
helper parses #hex, rgb(), and oklch() colors and computes the real contrast
ratio, validated against a known reference pair.
FAIL faint label on card
#8a8f98 on #ffffff = 2.9:1 (WCAG AA needs 4.5:1 for body text)Sub-AA contrast fails the build. This is the single most common defect in generated interfaces: the faint helper text that looks tasteful in a mockup and is unreadable in daylight. The linter also warns when a raw color or a font outside the system sneaks in, so the design system stays the single source of truth rather than a polite recommendation.
Anti-slop, baked in
The same pass refuses the tells of machine-made design: decorative gradients with no purpose, emoji standing in for an interface, fake imagery, lorem filler. None of it ships. These are not style opinions; they are the patterns that make a page read as generated, and keeping them out is most of what makes the output look considered.
Guardrails are the product
It is tempting to think the value of an AI design tool is the generation. It is not. The value is the gate that refuses to start without a system, the linter that fails on unreadable contrast, and the rules that keep slop out. Generation is cheap. Taste and accessibility, enforced so they cannot be skipped under deadline, are the hard part, and they are the part worth building.
Design That Ships: Design as a Contract, Not a Deliverable
Most AI design tools end the moment the picture looks good. I built OpenPlanr's design phase on the opposite stance: a design is only valuable if it survives to production. So design is the first governed phase of a pipeline, and its real output is a machine-readable contract the planner, the build, and QA are all held to.
7 min readA Design Loop for AI Agents
Most AI design is one shot and converges on the same safe look. I built a loop instead: taste-aware concepts, a spend gate, parallel variants on a live board you pin-comment, and a $0 path that needs no image API at all.
4 min readPlanning Work for AI Agents That Forget
A coding agent does an hour of great work, the session ends, and the context is gone. OpenPlanr fixes that by turning a feature spec into a durable plan the agent re-reads every session, from codebase analysis to shipped tasks.
3 min read