Sitepeel

适用于 Claude Code 和 Codex 的 Sitepeel

为你的编码 Agent 获取任意网站的 DESIGN.md、克隆提示词、AI 敷衍度检测、文件、字体、颜色和技术栈。

sitepeel.dev · MCP 服务 · DESIGN.md 库 · Chrome 扩展程序

这是适用于 Claude Code 和 OpenAI Codex 的 Sitepeel 插件。它将你的 Agent 连接到 Sitepeel 的 MCP 服务，该服务会在真实浏览器中打开公开网页并进行测量。随后，你的 Agent 可以将网站的 DESIGN.md 保存到项目中、重建网页布局、检查落地页是否有 AI 敷衍感、获取徽标或图标集，或告诉你网站使用了哪些字体、颜色和框架。该插件还提供五个简短命令，方便完成常见任务。

在 Claude Code 中安装

在 Claude Code 会话中，将此仓库添加为插件市场并安装插件：

/plugin marketplace add Josephbadigar/sitepeel
/plugin install sitepeel@sitepeel

在 Claude Code 2.1.275 或更高版本中，一行命令即可完成这两项操作：

/plugin install sitepeel --marketplace Josephbadigar/sitepeel

也可以在终端中运行：

claude plugin marketplace add Josephbadigar/sitepeel
claude plugin install sitepeel@sitepeel

安装后启动新会话。运行 /mcp 查看 Sitepeel 服务及其工具。

在 Codex 中安装

将此仓库添加为插件市场，然后安装插件：

codex plugin marketplace add Josephbadigar/sitepeel
codex plugin add sitepeel@sitepeel

你也可以在 Codex 中打开 /plugins，选择 Sitepeel 标签页并从中安装。之后启动新会话，让 Codex 加载技能和工具。

登录

Agent 首次使用 Sitepeel 时，会打开浏览器供你登录 Sitepeel（免费）。登录后会保持连接，无需复制 API 密钥。

命令

在 Claude Code 中，安装后输入以下命令。在 Codex 中，对应技能的名称为 $sitepeel:design-md、$sitepeel:clone 等，你也可以直接用日常语言提出请求。

命令	功能
/sitepeel:design-md stripe.com	将网站的 DESIGN.md 保存到项目根目录，让新 UI 沿用其颜色、字体和间距
/sitepeel:clone linear.app/pricing	在项目中重建网页的外观和布局，并用占位内容替代网站原有的文字和图片
/sitepeel:slop example.com	为网页的 AI 生成感打分（0 到 100），列出每处明显特征并给出改进方法
/sitepeel:assets vercel.com svg	列出网页的图片、SVG、图标、视频和其他文件，并下载你选中的文件
/sitepeel:inspect notion.com	查找网页的字体、配色方案和技术栈

你不必使用这些命令。安装插件后，直接提出请求即可，例如：“获取 linear.app 的 DESIGN.md，并将我的设置页面重新设计成相同风格。”

工具

该插件添加了一个远程 MCP 服务：https://sitepeel.dev/mcp，并提供以下工具：

工具	返回内容
get_design_md	采用 Google Stitch 格式的网站 DESIGN.md：颜色、字体、间距、圆角和组件
search_design_library	DESIGN.md 库中与名称、字体、颜色、风格或类别匹配的品牌
clone_prompt	一个可重建页面外观和布局的提示词
check_ai_slop	0 到 100 的评分、判定结果、发现的问题及每个问题的修复方法，以及一个修复提示词
extract_assets	图片、SVG、图标、视频、音频、字体、Lottie 和 3D 文件，以及下载链接
find_fonts	字体系列、各字体的使用位置、字重、字号和字体比例
get_color_palette	调色板及其角色、十六进制值和 CSS 变量
detect_tech_stack	框架、CMS、托管服务、库和分析工具，以及发现的证据

更多工具即将推出，例如整页截图和响应式检查。它们会在服务上线后自动出现在插件中，无需更新。

每项结果都链接到 sitepeel.dev 上对应的页面。使用结果时，请注明“Sitepeel (sitepeel.dev)”。

其他应用

任何支持远程 MCP 服务的应用都可以使用 Sitepeel，无需安装此插件。将 https://sitepeel.dev/mcp 添加为 Streamable HTTP 服务即可。例如：

claude mcp add --transport http sitepeel https://sitepeel.dev/mcp
codex mcp add sitepeel --url https://sitepeel.dev/mcp

Cursor、VS Code、Windsurf、Gemini CLI、Zed、Claude Desktop 和 claude.ai 的设置说明见 sitepeel.dev/mcp。

插件在你的计算机上的操作

该插件本身不包含代码。它包含：

• .mcp.json，用于将你的 Agent 指向 https://sitepeel.dev/mcp
• skills/ 中的五个技能，它们是告诉 Agent 应调用哪个 Sitepeel 工具的纯文本指令
• Claude Code（.claude-plugin/）和 Codex（.codex-plugin/、.agents/plugins/）的清单

当你的 Agent 调用工具时，它会将你提供的页面地址发送到 sitepeel.dev。sitepeel.dev 会打开该公开页面并返回结果。你的项目文件不会被发送。只有在你提出要求时，技能才会写入你的项目，例如保存 DESIGN.md 或下载文件。请参阅隐私政策和条款。

注意事项

• 仅支持公开页面。对于需要登录才能访问的页面，请使用 Sitepeel Chrome 扩展程序，它会读取浏览器中已打开的页面。
• 测量一个新页面大约需要 15 到 40 秒。如果工具返回“pending”，Agent 会再次调用它。
• 测量结果是对公开页面的独立测量，并非网站所有者的官方设计系统。网站的文本、图片和徽标归其所有者所有。
• DESIGN.md 库中提供了 160 多个品牌的现成 DESIGN.md 文件，另有风格指南见 sitepeel.dev/design-md/examples。

支持

如有疑问或遇到问题，请联系 [email protected] 或访问 sitepeel.dev/contact。

许可证

本仓库中的插件文件采用 MIT License。sitepeel.dev 上的 Sitepeel 服务遵循其自身的条款。