nutlope/inspo

インスピレーション

実際の本格的なウェブサイトは、コーディングエージェントがMCPを使ってUIを書く前に研究できます。inspomcp.dev

ありもいない

同じブリーフ、同じモデル、どちらのランでもデザインスキルはなかった。唯一の違いは、右側のページがセッション中にInspo MCPで作成されていることだ。

そのギャップこそが製品なのです。エージェントはツールは持っていますが、センスはなく、オープンウェブにはすでに必要なすべての参照が存在しています。Inspoはそれを組み立て、タグ付けし、対処します。

中身は何だ

• **832の実サイトにわたり2,320ページ。各サイトはデスクトップとモバイルでキャプチャされ、トレースパレット、実際のフォント、検出された技術、折りたたみごとに解剖が掲載されています。
• 68の標準的な参照コンポーネント(ヒーロー、価格設定、フッター、ナビなど)、それぞれが名前付きのマクロ構造を示し、コピー&ペースト可能なJSXを備えています。
• **各サイトごとに DESIGN.md を、そのDOMから抽出:セマンティックパレットの役割、タイプランプ、スペーシングスケール、CSS変数、コンテナ幅。

15のツールがすべて公開しています。recommend(brief)はそのほとんどを1つのコールにまとめています。ツールテーブル全体はapps/mcp/README.mdに保存されています。

テックスタック

• TypeScript MCPサーバーは2つのトランスポートを持ちます:npm経由のstdioと、サイト独自のVercelデプロイメントによるStreamable HTTPです。

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.

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.

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 and find_similar.
• A smoke harness that boots the server in-process and exercises the core tools.

Cloning & running

1. One command, any client: npx -y inspo-mcp install (detects Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop and writes the config; --dry-run shows the plan)
2. Or point a client at the hosted endpoint yourself: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
3. Or clone: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install
4. Gallery: pnpm dev, then open localhost:3000
5. Dev loop: pnpm --filter @inspo/mcp test

Per-client snippets (Cursor, Windsurf, Zed, Claude Desktop) are on the MCP page; the self-host runbook is DEPLOY.md.

Roadmap

• [ ] show the desktop and mobile capture side by side on every screen page
• [ ] backfill component crops so find_components returns a crop for every hit
• [ ] paginate the list tools instead of capping them