io.github.Nutlope由 GitHub 帳號 Nutlope 發布v0.1.16更新於 Nov 2, 2026
Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX.
讓程式助理在寫介面前先研究真實上線網站——配色、字型、版型與可複製的參考 JSX。
Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。
把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。
閱讀 https://sourceweft.com/mcp/io.github.Nutlope%2Finspo/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。把它新增到你客戶端的 mcpServers 設定中。
{
"mcpServers": {
"inspo": {
"type": "http",
"url": "https://inspomcp.dev/api/mcp"
}
}
}Real production websites your coding agent can study, over MCP, before it writes UI. inspomcp.dev
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.
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.
find_similar.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)claude mcp add --transport http inspo https://inspomcp.dev/api/mcpgit clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm installpnpm dev, then open localhost:3000pnpm --filter @inspo/mcp testPer-client snippets (Cursor, Windsurf, Zed, Claude Desktop) are on the MCP page; the self-host runbook is DEPLOY.md.
find_components returns a crop for every hitWant a site in the archive? Append it to apps/worker/src/seed-urls.ts and open a PR. The bar: does it make the archive better for someone building a website?
Every tool is read-only. The one path that touches the outside world - get_design_system(live:true), which supplements thin captured tokens from the screen's own source - passes each URL and redirect through an SSRF guard: public named hosts only, ports 80 and 443, byte-capped body, no JS execution. The hosted endpoint logs tool name, success and duration per call, never IPs or query text.
MIT, copyright Together AI and contributors. The screenshots remain the work of their designers: every screen credits and links its source, and takedowns are honoured at /dmca.
來源：README.md，提交 5d2f4ea
Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.
modevibecolorlimitquerystyledetaildeviceindustrypageTypeaccentHuemaxTokens另有 3 個Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.
slug必填The full DESIGN.md for one screen - real fonts, frequency-ranked palette, CSS variables, detected tech, colour roles, type ramp. Thin captured tokens are supplemented by a live fetch of the source; `live=false` skips that.
liveslug必填A screen's nearest design neighbours - ranked by design-similarity embeddings where available, else by macrostructure / industry / style overlap. One result per site.
slug必填limitdetailsameSitemaxTokensCompare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width. Returns per-site breakdowns plus what they share - triangulates a house style from a few references.
slugs必填Real sites whose extracted palette sits near a hex colour (OKLAB distance, so 'close' means the same colour family, not just the same hue). Use when a brief names a brand colour.
hex必填limitdetailmaxTokenstoleranceReal sites exemplifying one of the 19 named macrostructures. Call it at the macrostructure-pick step. Accepts slugs ('bento-grid') or display names ('Bento Grid').
name必填limitdetaildevicemaxTokensList every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.
無需輸入參數。
Every value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types. Zero input. Call it when unsure - an out-of-vocabulary value errors.
無需輸入參數。
A site's captured pages as an ordered flow (landing → pricing → features → ...) with titles, northstars and thumbnails - how a real product sequences its pages. No arguments returns the directory of flow-capable sites. Accepts a site or screen slug.
limitsiteSlugmaxTokensReal sites featuring a specific UI component (hero, pricing, features, cta, nav, footer, testimonial, logo-cloud, faq, stat), with a per-element crop where one exists. For copy-pasteable code use get_reference_jsx.
modetype必填vibecolorlimitstyledeviceindustrypageTypemaxTokensmacrostructureFetch one issue by slug, including the editor's blurb and ordered screen list.
slug必填detailmaxTokensThe canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype. Pick one, then get_reference_jsx(type, id) for its source.
typemacroOrchestrator - start here for a brief. One call returns a macrostructure pick, 5 real exemplars, matching reference components (source via get_reference_jsx), a palette suggestion, and an `evidence` packet measuring the genre's paper band / display class / accent hue. Pass a macrostructure to skip the pick step. No LLM call.
modevibebrief必填colordetaildevicepageTypemaxTokensmacrostructureThe full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states. Copy-pasteable; tweak tokens to the target brand.
id必填type必填已滿足適用檢查項的 100%
該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。