2026-03-21

The Design Harness

A three-layer system that lets engineers ship real design work — skills, canvases, and inspiration.

I came across a post from Neethan Wu that resonated. He's an engineer who never touched design until three months ago. He put together what he calls a "harness" — three layers that gave him real design capability without becoming a designer.

The framework is simple: Skills for expertise, Canvases for a design surface, and Inspiration to train the eye.

Layer 1: Skills

Skills are instruction files you install into your AI agent — Claude Code, Cursor, Codex, whatever you use. They transfer someone else's design expertise into your workflow. You're borrowing taste from seasoned designers.

  • Impeccable — Built by the original creator of jQuery UI. 20+ commands like /audit, /polish, /animate, /typeset, /arrange. It catches the anti-patterns that make AI-generated UI look obviously AI-generated: overused fonts, gray-on-color text, pure blacks, nested cards. The /delight command is the standout.

  • Emil Kowalski's Design Engineer Skill — Emil is a design engineer at Linear (previously Vercel), creator of Sonner and Vaul. His skill encodes how he thinks about animations, UI polish, and the small details most people skip.

  • Interface Design — Solves the most annoying problem with AI-assisted design: your agent forgets every design decision between sessions. This skill stores your specs in a persistent system.md file that loads automatically.

  • UI Skills — By Julien Thibeaut, creator of motion-primitives. 15 open-source skills covering baseline UI, accessibility, motion performance, and metadata.

Layer 2: Canvas

Agent canvases are design surfaces that don't have a built-in agent — they use your agents. The canvas is the shell; your agent is the kernel.

  • Paper — Built on real HTML and CSS, not a proprietary format. What you design is actual code. No translation layer, no handoff. Exposes MCP tools with full read/write access. Good for design systems, design tokens, and page iterations.

  • Pencil — Uses a JSON-based .pen format that's Git-diffable and agent-manipulable via MCP. Design files sit in your repo, versioned like code. Has a swarm mode where you can spin up multiple agents (up to six) working on the canvas simultaneously.

Layer 3: Inspiration

Skills give you expertise. Canvases give you a surface. But you still need to train your eye — to know what good looks like before you can ask an agent to make it.

  • Variant — Type an idea, scroll through endless non-repeating design interpretations. The Style Dropper feature absorbs the visual DNA of any design (color palette, typographic rhythm, spatial density) and transfers it onto another. You can export as React or copy prompts with HTML references to hand directly to your coding agents.

  • Mobbin and Awwwards — Mobbin covers how top apps handle onboarding, settings, checkout. Awwwards is jury-scored cutting-edge web craft.

  • Cosmos — A place to collect inspiration and explore collections from others. Web design, interiors, typography, photography, architecture. Has a hex color search and vague description search that surfaces unexpected references.

The pattern

Three layers. Skills for expertise. Canvases for agents to work on. Inspiration to train the eye.

You don't need to become a designer. You need the right harness.