Building design-genius: Killing the AI Design Monoculture

Ask any coding agent to build a landing page. You know what it will produce before the output stream finishes:

• A centered headline with a faint radial blur behind it.
• A purple gradient on the primary button.
• Three identical feature cards in a row.
• Inter or Roboto at default line heights.
• Floating metric pills with made-up percentages.

This is the AI design monoculture. It happens because models output the mathematical mean of every SaaS template scraped from the web. The average of thousands of generic templates is nothing distinct.

I built design-genius to fix this.

Why Models Default to Slop

Coding agents fail at design because they write from pre-training memory instead of project files.

When you ask a model to write a database migration, it inspects your SQL schema. When you ask it to fix a compiler error, it reads the compiler diagnostics. But when you ask it to design an interface, it falls back to raw weights. It guesses colors, picks arbitrary corner radii, and copies layout tropes it saw during pre-training.

Getting distinct interfaces out of an autonomous agent requires treating design like an engineering discipline:

1. Block access to ungrounded memory.
2. Force the model to read real design systems from disk before writing any code.
3. Enforce mathematical gates that reject generic outputs.

The 4-Stage Specification Engine

design-genius is a Claude Code and Antigravity skill that acts as a pure specification layer. It emits a verified DESIGN.md specification instead of raw component code.

The engine executes four stages:

1. Harvest Intent

Instead of running a long questionnaire, the engine asks at most three sharp choices. It locks down the audience, mood, target platform, and the core constraint. If the repository already makes intent clear, it skips questioning.

2. Read the Library

This is the hard read-gate. The skill accesses a local library of 74 distinct design systems stored on disk, including IBM Carbon, Nothing Hardware, Apple HIG, Raycast, and Swiss Gazette.

The model must read at least two structurally distinct systems from disk. If it generates design tokens without reading disk files, execution halts. The engine also enforces hue spacing: the selected systems must span distinct hue families with accent hues at least 40 degrees apart on the color wheel.

3. Force Uniqueness Through 9 Levers

Every specification must satisfy nine rules:

• Layout Geometry: Explicit grid rules. Bans the 3-card layout. Requires asymmetric Swiss grids, continuous typographic spines, or telemetry matrices.
• Causal Pigments: All colors use OKLCH color math. Every accent color traces to a physical object (like sealing-wax vermillion from historical Indian gazette stamps). Bans pure black or white digital voids.
• 2+1 Typography: Maximum two font families plus one monospace for telemetry and tabular data.
• Kinetic Bounds: Analytical ODE springs or cubic-beziers capped under 200ms. Bans default CSS transitions and unphysical scale-zero entrance animations.
• Signature Detail: Requires one physical signature mechanism (like a mechanical detent, a sealing-wax verification stamp, or an exploded SVG diagram).
• Copy Discipline: Zero marketing rhetoric or filler phrases.

4. Emit the Specification

The engine writes a complete DESIGN.md containing exact tokens, type scales, and spacing math.

The 2-Stage Pipeline

A specification needs an implementation counterpart. That is where akash-design-engineering connects.

The workflow splits into two layers:

1. Specification Layer (design-genius): Reads the brief, inspects the local disk library, and writes DESIGN.md.
2. Implementation Layer (akash-design-engineering): Consumes DESIGN.md and implements code using modular packages (@design-engineer/tokens, @design-engineer/physics, @design-engineer/shaders, @design-engineer/react).

The implementation repo includes an automated 10-dimension audit tool (node bin/audit.mjs). It checks:

• Concentric corner radii: R_inner = max(0, R_outer - padding).
• Kinetic spring parameters and frame-budget limits.
• OKLCH anchor chroma compliance.
• Absence of corporate buzzwords and text emojis.

If any check fails, the build exits with an error.

Real Surfaces

I used this two-stage pipeline to build the documentation and marketing sites for design-genius, akash-design-engineering, and kharcha.

They look like physical artifacts: an archival gazette on Munken newsprint with sealing-wax stamps, a 16-field Swiss grid with typographic clip reveals, and a factory service manual with interactive torque specs.

The entire stack is open-source, runs locally on your machine, and requires zero paid subscriptions or cloud APIs.

Source repositories:

• design-genius
• akash-design-engineering