nutlope/inspo

영감

실제 프로덕션 웹사이트는 코딩 에이전트가 UI를 작성하기 전에 MCP를 통해 공부할 수 있습니다. inspomcp.dev

있든 없든

두 번의 시도 모두 같은 브리프, 같은 모델, 디자인 스킬은 전혀 없었습니다. 유일한 차이점은: 오른쪽 페이지는 세션에서 Inspo MCP로 만들어졌다는 점입니다.

그 공백이 바로 제품입니다. 에이전트는 도구는 있지만 취향은 없고, 오픈 웹에는 이미 그들이 필요한 모든 참조가 담겨 있습니다: Inspo가 조립하고, 태그를 붙이고, 해결합니다.

안에 뭐가 들어 있을까

• 832개의 실제 사이트에 걸쳐 2,320페이지에 걸쳐 있으며, 각각 데스크톱과 모바일에서 캡처, 트레이싱된 팔레트, 실제 글꼴, 감지된 기술, 그리고 모든 페이지에 접힌 부정 검사가 포함되어 있습니다.
• 68개의 정규 참조 컴포넌트(히어로, 가격, 푸터, 내비게이션 등), 각각은 하나의 이름이 붙은 매크로구조를 보여주며, 복사 붙여넣기 가능한 JSX 기능을 제공합니다.
• **각 사이트에 대한 DESIGN.md, DOM에서 추출: 의미 팔레트 역할, 타입 램프, 간격 척도, CSS 변수, 컨테이너 너비.

15개의 도구가 모두 노출됩니다; recommend(brief)는 대부분을 하나의 호출로 구성합니다. 전체 도구 테이블은 apps/mcp/README.md에 저장되어 있습니다.

기술 스택

• TypeScript MCP 서버는 두 가지 전송을 지원합니다: 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