Repolode
Submit
Nutlope

Nutlope/inspo

An MCP server giving coding agents searchable design references from real production websites, with screenshots, palettes, fonts and DESIGN.md files.

View on GitHubWebsite
Stars
910
Forks
58
Open issues
1
Last commit
20 days ago

What is it?

Inspo is a searchable archive of real production websites, exposed to coding agents through the Model Context Protocol (MCP). Before an agent writes UI, it can query the archive for references instead of relying only on its own sense of design. The catalogue currently covers 2,320 pages across 832 sites, each captured on desktop and mobile with extracted palettes, fonts, detected tech and a fold-by-fold breakdown.

Beyond full-page captures, the archive includes 68 canonical reference components such as heroes, pricing sections, footers and navigation bars, each with copy-pasteable JSX. Every site also gets a DESIGN.md generated from its DOM, listing semantic color roles, type scale, spacing, CSS variables and container width. Fifteen tools cover search and lookup, and a `recommend(brief)` tool combines several of them into one call.

The server runs over stdio via npm or over Streamable HTTP at inspomcp.dev. An installer command configures common clients such as Claude Code, Cursor, Codex, VS Code and Zed. The repository also contains a Next.js gallery for browsing the archive and a Playwright-based capture worker.

Key features

  • 01Searches 2,320 captured pages from 832 real websites, on desktop and mobile
  • 02Provides 68 reference components with copy-pasteable JSX
  • 03Generates a DESIGN.md per site with palette roles, type ramp and CSS variables
  • 04Exposes 15 MCP tools, including a recommend tool that combines several lookups
  • 05Runs over stdio via npm or as a hosted Streamable HTTP endpoint

Use cases

  • Giving a coding agent design references before it builds a landing page
  • Finding real examples of pricing sections, heroes or footers to adapt
  • Checking a site's color palette, type scale and spacing for inspiration
  • Browsing curated web design examples in the included gallery

Quick start

  1. 1

    Run the one-command installer for your MCP client

    npx -y inspo-mcp install
  2. 2

    Or add the hosted endpoint to Claude Code

    claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
  3. 3

    Or clone the repo and install dependencies

    git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

Things to know

  • The archive is a static seed, so it covers only the sites and pages captured so far.
  • Screenshots belong to their original designers and are subject to their copyright and takedown requests.

Topics

#mcp#design-system#ui-design#ai-agents#screenshots#css#typescript#nextjs

FAQ

What is inspo?
An MCP server giving coding agents searchable design references from real production websites, with screenshots, palettes, fonts and DESIGN.md files. Inspo is a searchable archive of real production websites, exposed to coding agents through the Model Context Protocol (MCP). Before an agent writes UI, it can query the archive for references instead of relying only on its own sense of design. The catalogue currently covers 2,320 pages across 832 sites, each captured on desktop and mobile with extracted palettes, fonts, detected tech and a fold-by-fold breakdown.
Is inspo free to use? What license does it have?
inspo is open source under the MIT license. Check the license terms before using it in commercial products.
Is inspo still maintained?
Actively maintained. The last commit to inspo was on Oct 1, 2026.
What can I use inspo for?
Giving a coding agent design references before it builds a landing page Finding real examples of pricing sections, heroes or footers to adapt Checking a site's color palette, type scale and spacing for inspiration Browsing curated web design examples in the included gallery
How do I install inspo?
Run the one-command installer for your MCP client: npx -y inspo-mcp install Or add the hosted endpoint to Claude Code: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp Or clone the repo and install dependencies: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install
Where can I get inspo?
The source code and installation instructions are on GitHub: https://github.com/Nutlope/inspo

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects