Nutlope/inspo

这是什么？

核心功能

• 01检索 832 个真实网站的 2,320 个已截图页面，涵盖桌面和移动端
• 02提供 68 个参考组件，附可直接复制的 JSX 代码
• 03为每个网站生成包含配色角色、字号层级和 CSS 变量的 DESIGN.md
• 04通过 MCP 暴露 15 个工具，其中 recommend 可组合多次查询
• 05支持通过 npm 的 stdio 方式运行，或使用托管的 HTTP 端点

适用场景

• 在编码智能体搭建落地页之前，为其提供设计参考
• 查找真实的定价区、首屏或页脚案例并加以改造
• 查看网站的配色、字号和间距，获取设计灵感
• 通过附带的画廊浏览整理好的网页设计案例

快速上手

1. 1

   运行适用于你的 MCP 客户端的一键安装命令

   npx -y inspo-mcp install
2. 2

   或将托管端点添加到 Claude Code

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

   或克隆仓库并安装依赖

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

使用前须知

• !资料库是静态种子数据，只涵盖目前已抓取的网站和页面。
• !截图的版权归原设计师所有，并可能根据下架请求被移除。

标签

常见问题

inspo 是什么？

为编码智能体提供真实网站设计参考的 MCP 服务，可检索截图、配色、字体与 DESIGN.md。 Inspo 是一个可检索的真实线上网站设计资料库，通过 Model Context Protocol（MCP）提供给编码智能体调用。智能体在编写界面之前，可以先查询这些参考，而不只依赖自身的设计判断。目前收录 832 个网站共 2,320 个页面，每个页面都有桌面和移动端截图，并附带提取的配色、字体、检测到的技术栈以及逐屏拆解。

inspo 可以免费使用吗？用的什么许可证？

inspo 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

inspo 还在维护吗？

活跃维护中。inspo 最近一次提交是在 2026年10月1日。

inspo 适合用来做什么？

在编码智能体搭建落地页之前，为其提供设计参考 查找真实的定价区、首屏或页脚案例并加以改造 查看网站的配色、字号和间距，获取设计灵感 通过附带的画廊浏览整理好的网页设计案例

inspo 怎么安装和运行？

运行适用于你的 MCP 客户端的一键安装命令: npx -y inspo-mcp install 或将托管端点添加到 Claude Code: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp 或克隆仓库并安装依赖: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

在哪里获取 inspo？

源代码和安装说明在 GitHub 上：https://github.com/Nutlope/inspo