Inspo

Inspo 是一个专为 Claude Code、Codex、OpenCode 等 AI 编程智能体设计的 MCP (Model Context Protocol) 服务器。它的核心使命是解决 AI 在构建 UI 时缺乏“审美”和“参考”的问题——通过让代理直接访问由 800+ 个精美真实网站组成的 curated 档案库，从而生成更具专业感和现代感的前端代码。

“代理有工具但没有品味，而开放网络已经拥有它们所需的所有参考。”

🎨 为什么需要 Inspo？

在没有设计参考的情况下，AI 生成的 UI 往往显得平庸、通用甚至杂乱。Inspo 通过提供真实的生产级设计数据，填补了这一空白：

• 左侧（无 Inspo）：AI 凭想象生成，布局可能失衡，配色可能突兀。
• 右侧（有 Inspo）：AI 基于真实优秀案例的结构和风格进行构建，输出结果更具专业质感。

Inspo 提供了什么？

Inspo 不仅仅是一个图片库，它是一个结构化的设计知识图谱，包含三大核心资产：

1. 视觉范围 (Visual Range)

• 832 个真实生产站点，共计 2,320 个页面（桌面 + 移动端双视图）。
• 每个页面都经过深度解析，提取了：
  • 追踪调色板：识别主色、辅色、背景色等语义角色。
  • 真实字体栈：检测使用的字体系列。
  • 技术指纹：识别站点使用的框架和库。
  • 逐折解剖：分析页面滚动过程中的布局变化。

2. 经典代码组件 (Classic Code Components)

• 68 个经典参考组件：涵盖英雄区 (Hero)、定价表 (Pricing)、页脚 (Footer)、导航栏 (Navigation) 等。
• 每个组件都展示了命名的宏观结构，并提供可复制粘贴的 JSX 代码，让代理能直接复用经过验证的设计模式。

3. 随手可得的设计系统 (Design Systems on Tap)

• 每个捕获的站点都自动生成一个 DESIGN.md 文件，从 DOM 中提取：
  • 语义化调色板角色。
  • 类型阶梯 (Type Scale)。
  • 间距尺度 (Spacing Scale)。
  • CSS 变量定义。
  • 容器宽度规范。

技术架构

• MCP 服务器：TypeScript 编写，支持 stdio (本地 npm) 和 Streamable HTTP (托管版) 两种传输方式。
• 数据采集：使用 Playwright 进行自动化捕获，结合 Together AI 进行标签分类、DOM 解剖和嵌入向量生成。
• 前端画廊：基于 Next.js 16 + Tailwind v4 构建，提供可视化的档案浏览器。
• 搜索能力：利用 Together AI 的嵌入模型支持语义搜索 (find_similar)，代理可以通过自然语言描述找到风格相似的设计。

快速开始

方式一：一键安装（推荐）

Inspo 会自动检测你正在使用的客户端（Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop）并写入配置。

npx -y inspo-mcp install

方式二：手动添加 MCP 服务器

如果你希望手动配置，可以将客户端指向托管端点：

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 # 启动画廊

如何使用？

在支持 MCP 的编程代理会话中，你可以直接通过自然语言调用 Inspo 的能力。例如：

• “帮我找一个极简风格的 SaaS 落地页参考，并提取其 DESIGN.md。”
• “使用 Inspo 推荐一个适合金融科技应用的配色方案和字体组合。”
• “基于 Inspo 中的经典 Hero 组件，为我生成一个 React 版本。”

核心工具 recommend(brief) 会将搜索、提取和代码生成组合成一次高效的调用。