Design Harness for Claude Code

A 3-layer design system for engineers who want to ship great UI without being designers. Based on Neethan Wu's "Design Without Designing".

Layer 1 — Skills (the expertise)

Skills are instruction files that load design expertise into your agent. This plugin bundles 6 of them.

Bundled in this plugin

Sources: emilkowalski/skill · ibelick/ui-skills · Dammyjay93/interface-design

Also install separately

Impeccable (pbakaus/impeccable) — 20+ commands including /delight, /polish, /audit, /animate, /typeset, /arrange. The most-used skill in the harness.

/plugin add impeccable@impeccable

Layer 2 — Agent Canvas (the surface)

Design surfaces that use your agent as the kernel. No built-in AI — they expose MCP tools and let Claude do the work.

Pencil

Git-diffable .pen format. Design files live in your repo, versioned like code. Supports agent swarm mode (up to 6 agents working on the canvas simultaneously).

• Install: pencil.dev — free
• MCP: Installed via the Pencil desktop app (auto-registers MCP server)
• Permission: already added to settings.json → permissions.allow: ["mcp__pencil"]

Paper

HTML/CSS canvas — what you design is actual code, no translation layer. MCP exposes full read/write to design files.

• Install: paper.design — free tier available
• MCP: Runs locally when the Paper desktop app is open with a file

# Already added to your Claude Code user config:
claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user

Paper MCP starts automatically when you open a .paper file in the desktop app. If tools stop responding, restart the agent session to re-establish the connection.

Available Paper MCP tools: get_basic_info, get_selection, get_node_info, get_children, get_tree_summary, get_screenshot, get_jsx, get_computed_styles, create_artboard, write_html, set_text_content, rename_nodes, duplicate_nodes, update_styles, delete_nodes

Layer 3 — Inspiration (the eye)

Tools for training visual taste. Use before design work to calibrate what "good" looks like.

Workflow: Spend ~20 minutes in Variant or Cosmos before any design session. Build clusters of visual references. Then prompt your agent with specific references or export Variant components directly to code.

How the layers work together

Inspiration (Layer 3)
  ↓ calibrates taste, gives references
Skills (Layer 1)
  ↓ encode expertise, enforce quality
Agent Canvas (Layer 2)
  ↓ Claude executes with real tools
→ shipped design

1. Open Variant or Cosmos, find a direction that fits your product
2. Open Pencil or Paper with a design file
3. Invoke the right skill for the task:
   • Starting fresh → /interface-design (domain exploration + intent)
   • Polishing existing UI → /delight or /polish (Impeccable)
   • Reviewing animations → /emil-design-eng
   • Checking a11y → /fixing-accessibility
   • Auditing overall → /audit (Impeccable)
4. Let Claude work on the canvas via MCP
5. Export code directly — no handoff

Credits

• Neethan Wu — the harness concept
• Emil Kowalski — design engineering skill
• Julien Thibeaut — UI Skills
• Oyindamola Akinleye — Interface Design
• Paul Bakaus — Impeccable