Nutlope

Inspo — Design skill for Claude Code

Design community

Real websites for your coding agent to learn design from, searchable over MCP.

How to install Inspo

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Nutlope/inspo and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Inspo does

Real websites for your coding agent to learn design from, searchable over MCP.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★

README

Inspo

Real production websites your coding agent can study, over MCP, before it writes UI. inspomcp.dev

With and without

Same brief, same model, no design skill on either run. The only difference: the page on the right was built with Inspo MCP on the session.

The bare agent's page: dark theme, neon accent, gradient app mock The page built with Inspo: warm paper, editorial type, detailed product mock

That gap is the product. Agents have tools but not taste, and the open web already holds every reference they need: Inspo assembles, tags, and addresses it.

What's inside

2,320 pages across 832 real sites, each captured on desktop and mobile, with traced palettes, real fonts, detected tech, and a fold-by-fold autopsy on every page.
68 canonical reference components (heroes, pricing, footers, navs, and more), each demonstrating one named macrostructure, with copy-pasteable JSX.
A DESIGN.md for every site, extracted from its DOM: semantic palette roles, type ramp, spacing scale, CSS variables, container width.

Fifteen tools expose all of it; `recommend(brief)` composes most of them into one call. The full tool table lives in [apps/mcp/README.md](apps/mcp/README.md).

Tech stack

TypeScript MCP server with two transports: stdio via npm, and Streamable HTTP served by the site's own Vercel deployment. No database at query time; the catalogue ships as a static seed.
Next.js 16 + Tailwind v4 gallery: the archive browser and the curator dashboard.
Playwright capture worker: desktop and mobile shots, palette, type ramp and CSS variable extraction, tag and autopsy passes via Together AI.
Together AI embeddings behind semantic search