Sitepeel MCP server
Give your AI agent any website’s design: its DESIGN.md, a clone prompt, its HTML, screenshots, files, fonts, colors and tech stack.
set up sitepeel - https://sitepeel.dev/llms.txtYour agent reads the setup guide, connects Sitepeel and shows you what it can do. Free: sign in once in the browser, and it stays connected.
YouMake my pricing page look like linear.app.
sitepeel · get_design_md url: "linear.app"
DESIGN.md for linear.app · Inter Variable · #5E6AD2 on #08090A · dark
AgentSaved it as DESIGN.md and restyled the page with its colors, type and spacing. Design measured by Sitepeel (sitepeel.dev).
15 tools your agent can call
The same tools as on sitepeel.dev. In Claude, ChatGPT and VS Code the results show as cards right in the chat, with live progress while a page is measured.
- Try it
DESIGN.md of any site
Its colors, type, spacing and components in Google’s DESIGN.md format. Library files come back at once.
get_design_md(url, fresh) - Try it
Search the DESIGN.md library
168 well-known brands by name, font, color, style or category.
search_design_library(query, category, limit) - Try it
Clone prompt
One prompt that rebuilds a page’s look and layout in your coding agent.
clone_prompt(url) - Try it
Website to HTML
The rendered page as index.html and one styles.css, with links to its files.
website_to_html(url) - Try it
AI slop check
A 0 to 100 score, the tells on the page and a prompt that fixes them.
check_ai_slop(url) - Try it
Assets
Images, SVGs, icons, video, fonts, Lottie and 3D files, with download links.
extract_assets(url, kind, limit) - Try it
Videos
The MP4, WebM and streaming videos a page plays itself.
download_videos(url) - Try it
SVGs
Inline SVGs with their code, sprite icons and SVG files.
extract_svgs(url) - Try it
Favicon
Every favicon, Apple touch icon and app icon a site has.
get_favicon(url) - Try it
Fonts
Every font, where it is used, its weights and the type scale.
find_fonts(url) - Try it
Color palette
The measured palette with roles, and CSS variables ready to paste.
get_color_palette(url) - Try it
Screenshot
A full-page or first-screen picture on desktop or phone.
screenshot_page(url, fullPage, device) - Try it
Responsive check
The page on up to 4 phones, tablets and desktops, with layout problems.
check_responsive(url, devices) - Try it
Tech stack
Framework, CMS or builder, hosting, libraries and analytics.
detect_tech_stack(url) - Try it
Shopify or WordPress theme
The theme, its version and maker, plus the page builder and plugins.
detect_site_theme(url)
Add it to your app
One address works everywhere: https://sitepeel.dev/mcp
Claude Code
Run this in your terminal, then /mcp to sign in. Add --scope project to share it with your team through .mcp.json. Or install the Sitepeel plugin, which adds the server and slash commands like /sitepeel:design-md.
claude mcp add --transport http sitepeel https://sitepeel.dev/mcp/plugin marketplace add Josephbadigar/sitepeel
/plugin install sitepeel@sitepeel{
"mcpServers": {
"sitepeel": {
"type": "http",
"url": "https://sitepeel.dev/mcp"
}
}
}Claude Desktop
Open Settings › Connectors, choose Add custom connector, paste the address and add it, then sign in to Sitepeel when the browser asks. It works in Claude on the web too.
https://sitepeel.dev/mcp{
"mcpServers": {
"sitepeel": {
"command": "npx",
"args": [
"mcp-remote",
"https://sitepeel.dev/mcp"
]
}
}
}Cursor
Click Add to Cursor, or add this to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project).
{
"mcpServers": {
"sitepeel": {
"url": "https://sitepeel.dev/mcp"
}
}
}VS Code
For GitHub Copilot’s agent mode: add this to .vscode/mcp.json, or run the command.
{
"servers": {
"sitepeel": {
"type": "http",
"url": "https://sitepeel.dev/mcp"
}
}
}code --add-mcp '{"name":"sitepeel","type":"http","url":"https://sitepeel.dev/mcp"}'Codex
Run these to add it and sign in, or add the lines to ~/.codex/config.toml. The Sitepeel plugin adds the server and skills in one step.
codex mcp add sitepeel --url https://sitepeel.dev/mcp
codex mcp login sitepeelcodex plugin marketplace add Josephbadigar/sitepeel
codex plugin add sitepeel@sitepeel[mcp_servers.sitepeel]
url = "https://sitepeel.dev/mcp"Windsurf
Open Cascade’s MCP settings, view the raw config and add:
{
"mcpServers": {
"sitepeel": {
"serverUrl": "https://sitepeel.dev/mcp"
}
}
}Gemini CLI
Run this, or add it to settings.json.
gemini mcp add --transport http sitepeel https://sitepeel.dev/mcp{
"mcpServers": {
"sitepeel": {
"httpUrl": "https://sitepeel.dev/mcp"
}
}
}Zed
Add it to context_servers in Zed’s settings.
{
"context_servers": {
"sitepeel": {
"url": "https://sitepeel.dev/mcp"
}
}
}Other apps
Any app that supports remote MCP servers: use the address below with the Streamable HTTP transport. The app opens the browser once so you can sign in to Sitepeel; no API key.
https://sitepeel.dev/mcpThings to ask
Name a site and say what you want. Your agent picks the tool.
Get the DESIGN.md of linear.app and restyle my settings page to match it.
Find a fintech brand in the Sitepeel library with a dark theme and use its colors for this dashboard.
Make a clone prompt for stripe.com/pricing, then build my pricing page from it with my own copy.
Check my landing page at example.com for AI slop and fix the top three tells.
Download the SVG logo and favicon from vercel.com into /public.
What fonts and colors does notion.com use? Give me Tailwind theme values.
Questions about the MCP server
What is the Sitepeel MCP server?
A free MCP server at https://sitepeel.dev/mcp that lets AI agents use Sitepeel’s website tools: DESIGN.md files, clone prompts, AI slop checks, assets, fonts, colors and tech stack. Your agent calls them while it works and links the result on sitepeel.dev.
What does “set up sitepeel” do?
Your agent reads sitepeel.dev/llms.txt, a short guide written for agents. It adds the Sitepeel MCP server to the app it runs in with one command, then offers three things it can do for you. Nothing else is installed.
What is an MCP server?
MCP (Model Context Protocol) is the open standard AI apps use to call outside tools. An MCP server offers tools; Claude Code, Cursor, Codex, VS Code and others connect to it and call them when a task needs them.
How do I add an MCP server to Claude Code?
Run claude mcp add --transport http sitepeel https://sitepeel.dev/mcp in your terminal, then start Claude Code. Type /mcp to see that Sitepeel is connected.
Is the Sitepeel MCP server free?
Yes, with a free Sitepeel account and no API key. New measurements have a fair daily limit per account to keep it free for everyone; saved results and library files don’t count toward it.
Do I have to sign in?
Once. The first time your agent connects, it opens the browser so you can sign in to Sitepeel or make a free account, then you approve the connection. It stays signed in: it doesn’t expire until you disconnect it on your account page.
Does it work with Cursor, Codex and VS Code?
Yes. It is a remote server over Streamable HTTP, so any app that supports remote MCP servers can use it: Cursor, Codex, VS Code with GitHub Copilot, Windsurf, Zed, Gemini CLI and Claude Desktop. The setup for each is above.
How do I give Claude Code my site’s design?
Ask it to get the DESIGN.md of a site with Sitepeel, then save it as DESIGN.md in your project. Claude Code follows the measured colors, fonts and spacing when it builds UI. How to use DESIGN.md with Claude Code.
Does it work on pages behind a login?
No. It opens public pages only. For pages behind a login, use the Sitepeel Chrome extension on the page you have open.
Why does a tool say it is still measuring?
A new page takes about 15 to 40 seconds to open and measure. If it takes longer, the tool answers “pending” and your agent calls it again; the result is saved when it is ready.
Is a DESIGN.md the site’s official design system?
No. Each file is an independent measurement of the public page. Use it to learn and prototype, and don’t copy logos, names or content.