---
name: curated-design
description: Research real, live websites on Curated before designing or building any web page, landing page or section. Use whenever you build or restyle a hero, pricing table, features grid, testimonials, FAQ, footer or a whole landing page, and whenever the user mentions Curated or curated.design.
---

# Curated design

Curated (https://curated.design) is a hand-picked archive of websites that are live right now, cut into sections (heroes, pricing tables, features, reviews, FAQs, footers), each carrying the design system of the site it came from. This skill makes you look at real work before you write code, so the page reads as designed rather than generated.

## Setup

The Curated MCP server lives at https://curated.design/api/mcp/

- Claude Code: `claude mcp add --transport http curated https://curated.design/api/mcp/`
- Codex: `codex mcp add curated --url https://curated.design/api/mcp/`
- Cursor: add `"curated": { "url": "https://curated.design/api/mcp/" }` under `mcpServers` in `.cursor/mcp.json`
- Anything else: a remote MCP server named curated at that URL, OAuth or `Authorization: Bearer crd_…` from https://curated.design/dashboard/

The first call opens a browser to sign in. Every tool except `whoami` and `list_facets` needs Curated Pro; a locked tool says where to upgrade. Tell the user once and stop. If the server is not connected, say so once, then work from references the user gives you. Never invent what a Curated section looks like.

## Workflow

### 1. Brief

Before searching, write down in a few lines: what the page is for, who reads it, the tone, the stack, and brand constraints you already know. Ask the user only when the product itself is unknown.

### 2. Research

- A whole page: `plan_page` with the brief. It returns the structure and candidates for every block.
- One slot: `search_sections` with a `type` (hero, pricing, features, reviews, faq, cta, footer…).
- Search at least three ways: by product or industry, by mood or style, by layout. The index matches words, so vary them.
- Open the best two or three per block with `get_section` and study them at full size: proportions, hierarchy, rhythm, what moves.

### 3. Lock one reference

Pick one primary site: usually the one most of your sections come from. Read its system with `get_design_system` (markdown, extended; again as `tailwind` when the project uses Tailwind). Before coding, write a short reference lock:

- **Primary:** the site, and three to five traits you keep (type pairing, spacing rhythm, colour roles, radius, motion).
- **Borrow:** at most two named details from other picks.
- **Reject:** what you will not take, and why.

Never average references. One system, plus a couple of borrowed details.

### 4. Build

Build block by block in the user's stack and in the borrowed tokens. Write real copy for the brief. Responsive from 360px to 1440px, 4.5:1 contrast, visible focus states, semantic landmarks. Never copy a site's copy, logo, imagery or brand: take the structure, the rhythm and the craft.

### 5. Check

Before handing off, confirm:

- every block traces back to a section you opened;
- the tokens are used everywhere, with no stray colours or font sizes;
- no placeholder text;
- none of the generic tells: purple gradients by default, everything centred, three identical cards, emoji bullets, a hero that could sell anything.

## Tools

| Tool | When |
|---|---|
| `plan_page` | A brief in, a page structure with candidates out. Start here for whole pages. |
| `search_sections` | Sections by words, filtered by type. |
| `get_section` | One section at full size, with a prompt to build it. |
| `get_design_system` | A site's design.md: markdown, Tailwind v4, CSS variables or JSON tokens. |
| `search_sites` | Whole sites by industry and style. |
| `get_site` | One site with its sections. |
| `list_facets` | The types, categories and styles you can search by. |
| `whoami` | Which account is connected, and on what plan. |