inspo

Name: inspo
Author: Nutlope

远程服务

github.com/Nutlope开发工具942今天更新

代码仓库

关于 inspo

Inspo 是一个 MCP 服务，向编码 Agent 提供真实生产网站的档案，包括配色、字体、结构拆解和参考 JSX。适合在编写界面前先参考现有网站设计的开发者与 Agent。

主要功能

012,320 个页面、832 个真实网站的档案
0268 个可复制 JSX 的参考组件
03每个网站提取的 DESIGN.md 设计规范
04recommend 工具组合多项查询
05只读工具与 SSRF 防护
06支持 stdio 与 Streamable HTTP 两种传输

适用场景

01编码 Agent 在编写 UI 前参考真实网站的结构与配色
02查找特定类型的页面区块，如定价或页脚
03从网站 DOM 中提取字体、间距和 CSS 变量等设计令牌

MCP 相关

该项目是 MCP 服务，通过十五个工具向 MCP 客户端提供网站档案、参考组件和设计系统数据。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://inspomcp.dev/api/mcp

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http nutlope-inspo https://inspomcp.dev/api/mcp

Cursor.cursor/mcp.json{"mcpServers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"nutlope-inspo":{"serverUrl":"https://inspomcp.dev/api/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

安装包

npminspo-mcp0.1.16stdio

工具

参数	类型	必填	说明
mode	enum	否	浅色或深色light \| dark
vibe	enum	否	情绪／氛围——“calm”“loud”“luxe”“technical”“soft”等。calm \| loud \| playful \| serious \| luxe \| raw \| soft \| technical \| warm \| cold
color	enum	否	颜色词——“warm”“cool”“monochrome”“neon”“earthy”。warm \| cool \| monochrome \| neon \| earthy \| pastel \| saturated \| muted \| high-contrast
limit	integer	否
query	string	否	对所需内容的自然语言描述。例如：“minimalist editorial agency portfolio”
style	enum	否	筛选一种视觉风格（例如“极简主义”“编辑风格”）minimalism \| editorial \| brutalism \| glassmorphism \| swiss \| maximalism \| playful \| dark-mode \| monochrome \| vintage \| futurist
detail	enum	否	'standard'（默认）：每行显示 northstar、调色板、字体、轴、宏观结构和标签，并对排名前 3 的结果进行逐折叠区域剖析。'full'：对每行进行剖析（每条约 300 个 token；仅在你会全部阅读时使用）。'concise'：northstar、调色板、字体。文本配置文件默认为 concise。concise \| standard \| full
device	enum	否	'mobile' 限定为具有 375px 捕获配对的网站，并内嵌移动端缩略图。默认值：desktop。desktop \| mobile
industry	enum	否	筛选一个行业（例如“saas”“fintech”“portfolio”）agency \| ai \| architecture \| automotive \| consumer-tech \| creator \| crypto \| culture \| developer-tools \| ecommerce \| education \| fashion \| fintech \| food-beverage \| furniture \| gaming \| health \| media \| music \| non-profit \| portfolio \| saas \| travel \| type-foundry
pageType	enum	否	按页面类型筛选：'landing'（默认主页）、'pricing'、'features'、'auth'、'about'、'blog'、'changelog'、'docs'、'other'landing \| pricing \| features \| auth \| about \| blog \| changelog \| docs \| other
accentHue	enum	否	强调色温度：'warm'（10-60°）、'cool'（200-300°）、'neutral'（低饱和度）、'chromatic-other'（绿色、洋红色及其他颜色）。warm \| cool \| neutral \| chromatic-other
maxTokens	integer	否	此响应的大致 token 上限。会裁剪排名较低的结果和缩略图；排名第一的结果及所有 URL 会保留。
paperBand	enum	否	从捕获内容测得的表面亮度：'dark'（<30% L）、'mid'（30-85%）、'light'（>85%）。比 `mode` 更可靠；`mode` 是标签值，在约 15% 的行中与测量结果不一致。dark \| mid \| light
displayClass	enum	否	显示字体的构成：'grotesk-sans'、'geometric-sans'、'roman-serif'、'mono'、'display-condensed-bold' 等。grotesk-sans \| geometric-sans \| roman-serif \| italic-serif \| slab-serif \| mono \| display-condensed-bold \| display-heavy \| system-native \| handwritten
macrostructure	enum	否	筛选一种宏观结构（例如“bento-grid”）bento-grid \| long-document \| marquee-hero \| stat-led \| conversational-faq \| manifesto \| photographic \| specimen \| catalogue \| letter \| index-first \| narrative-workflow \| split-studio \| feature-stack \| type-specimen \| portfolio-grid \| map-diagram \| ecosystem-index \| component-playground

详细介绍

Inspo

让你的编码 Agent 在编写 UI 前，通过 MCP 研究真实的线上网站。inspomcp.dev

使用与不使用

相同的需求、相同的模型，两次运行都没有设计技能。唯一的区别是：右侧页面是在该会话中使用 Inspo MCP 构建的。

未使用 Inspo 的 Agent 所创建的页面：深色主题、霓虹点缀、渐变应用示意图使用 Inspo 构建的页面：温暖的纸张色调、编辑风格字体、细节丰富的产品示意图

这就是产品的价值所在。Agent 有工具，却没有审美；而开放的网络早已汇集了它们所需的一切参考：Inspo 会整理、标记并索引这些内容。

内容一览

2,320 个页面，来自 832 个真实网站，每个页面都采集了桌面端和移动端版本，包含追踪得到的配色方案、真实字体、检测到的技术栈，以及逐屏分析。
68 个规范参考组件（主视觉区、定价区、页脚、导航栏等），每个组件都展示一种命名宏观结构，并提供可直接复制粘贴的 JSX。
每个网站都有一份 DESIGN.md，从其 DOM 中提取而来，包含语义化配色角色、字体阶梯、间距尺度、CSS 变量和容器宽度。

15 个工具提供所有这些内容；recommend(brief) 会将其中大部分整合为一次调用。完整的工具表见 apps/mcp/README.md。

技术栈

TypeScript MCP 服务，支持两种传输方式：通过 npm 使用 stdio，以及由网站自己的 Vercel 部署提供的 Streamable HTTP。查询时无需数据库；目录以静态种子数据的形式随项目提供。
Next.js 16 + Tailwind v4 展示站：归档浏览器和策展者仪表板。
Playwright 采集工作进程：采集桌面端和移动端截图，提取配色、字体阶梯和 CSS 变量，并通过 Together AI 执行标记和分析。
语义搜索和 find_similar 使用 Together AI 嵌入。
冒烟测试框架会在进程内启动服务并测试核心工具。

克隆与运行

一条命令，适用于任何客户端：npx -y inspo-mcp install（可检测 Claude Code、Cursor、Codex、VS Code、Windsurf、Zed、Claude Desktop 并写入配置；--dry-run 会显示执行计划）
或者自行将客户端指向托管端点：claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
或者克隆仓库：git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install
展示站：运行 pnpm dev，然后打开 localhost:3000
开发循环：pnpm --filter @inspo/mcp test

各客户端（Cursor、Windsurf、Zed、Claude Desktop）的配置示例见 MCP 页面；自托管运行指南见 DEPLOY.md。

路线图

在每个屏幕页面上并排显示桌面端和移动端截图
补齐组件裁剪图，让 find_components 为每个匹配结果都返回裁剪图
为列表工具添加分页，而不是限制结果数量
以视网膜屏幕分辨率重新拍摄移动端截图
账户和付费墙有意跳过：免费归档更有用。

想让某个网站加入归档？将它追加到 apps/worker/src/seed-urls.ts，然后提交 PR。标准是：它能让归档对网站构建者更有帮助吗？

安全

所有工具均为只读。唯一会访问外部网络的路径是 get_design_system(live:true)，它会从屏幕自身的源代码中补充采集内容里不足的设计令牌；该路径会对每个 URL 及重定向执行 SSRF 防护：仅允许使用公共命名主机，端口限于 80 和 443，响应正文大小受限，且不执行 JS。托管端点会记录每次调用的工具名称、成功状态和耗时，绝不记录 IP 或查询文本。

采用 MIT 许可证，版权归 Together AI 和贡献者所有。截图仍属于其设计者的作品：每个屏幕都会注明并链接来源，且会尊重下架请求，详见 /dmca。

支持 Markdown

登录后评论