Design

---
name: design
description: The single entry point for building or reworking any user-facing UI. Grounds the work in a real reference and the user's taste, mocks it up in Paper when a canvas MCP is present, applies bundled framework-agnostic design rules while building, then renders the result in a real browser at real breakpoints and puts the screenshots in the final message as visual proof. Prefers the Mobbin, Taste and Paper MCPs and agent-browser, degrades to web search, a local taste file and playwright or Chrome, and says which tier ran. Use whenever you create or substantially rework a page, screen, component, layout, section, empty state, modal, sidebar, nav, table, form, landing page or dashboard, and when the user says "/design", "design pass", "make this look right", "build me a UI", "does this look ok", "style this", or shows a screenshot that feels off. Prefer this over writing UI from imagination, because UI built without a reference and never rendered is the single most common thing that comes back rejected.
metadata:
  version: "1.0.0"
allowed-tools: Bash, Read, Edit, Write, Glob, Grep, WebSearch, WebFetch, mcp__mobbin, mcp__taste, mcp__paper
---

# Design

This is the only skill you need for UI work.

Two failures end most UI work, and both happen before anyone reviews it.

**The first:** nobody looked at a real example of the thing before building it. The result is a layout invented from scratch that a hundred products already solved better.

**The second:** nobody looked at the result. It was written, it compiled, it was declared done. Then the user opens it and sees the border clash, the widow, the sidebar with no count.

The steps below exist so you stop being asked for both. Run them in order.

## Use for

- Building a new page, screen, section, component, layout, or flow
- Substantially reworking or redesigning an existing one
- Landing pages, dashboards, pricing grids, empty states, modals, navs, tables, forms
- Any moment the user says the UI looks off and wants it fixed

## Do not use for

- A one-line CSS tweak, a spacing nudge, or a bug fix with no design decision in it
- Copy-only edits
- Narrow mechanical jobs that a more specific skill already covers, such as converting a screenshot to markup or adding dark mode to a finished page

---

## Step 0: Work out what you have

This skill runs on whatever is installed. Decide each row from your tool list and from the filesystem, then follow the first column that applies. Load a source file only for the tier you are actually using.

| Capability | Best | Fallback | If nothing |
| --- | --- | --- | --- |
| **Reference** (the pattern) | A Mobbin MCP server is in your tool list. Read [sources/mobbin.md](./sources/mobbin.md). | Web search and fetch are available. Read [sources/web.md](./sources/web.md). | Name the two or three shipped products whose pattern you are following, from memory. No links, no invented citations. |
| **Taste** (which valid option) | A Taste MCP server is in your tool list. Read [sources/taste.md](./sources/taste.md). | A taste file exists: `.design/taste.md` in the project, then `~/.design/taste.md`. Read it. | Read [sources/defaults.md](./sources/defaults.md) and make each default a decision. |
| **Canvas** (prior work, and the mockup) | A Paper MCP server is in your tool list. Read [sources/canvas.md](./sources/canvas.md). | Another design-canvas MCP, such as Figma, is in your tool list. Same file,