设计克隆MCP服务器
使用Puppeteer进行一键式网站设计克隆
克隆任何网站的设计，并获取结构化数据（HTML、CSS、颜色、字体、布局），您可以使用这些数据来重新创建它。
🚀 安装
一个命令安装：
npx @minutelaunch/design-clone-mcp或全局安装：
npm install -g @minutelaunch/design-clone-mcp📋 先决条件
- Node.js 18+（Puppeter要求）
- 就是这样！
Puppeter（包括Chromium）会自动捆绑。
🎯 用法
在Cursor或Claude桌面中：
只需说：
"Clone the design from https://stripe.com"MCP服务器将：
- 启动Puppeteer
- 捕捉网站设计
- 提取颜色、字体、HTML、CSS
- 返回结构化数据
- 然后，您可以使用它来创建页面
手动测试：
# Start the server
design-clone-mcp
# Or with npx
npx @minutelaunch/design-clone-mcp🔧 配置
对于光标：
添加到您的 ~/.cursor/mcp.json:
{
"mcpServers": {
"design-clone": {
"command": "npx",
"args": ["@minutelaunch/design-clone-mcp"]
}
}
}对于Claude Desktop：
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"design-clone": {
"command": "npx",
"args": ["@minutelaunch/design-clone-mcp"]
}
}
}📊 什么被捕获
- ✅ 超文本标记语言 -完整渲染的HTML（最大50KB）
- ✅ 颜色 -所有背景和文本颜色（前20名）
- ✅ 字体 -使用的所有字体系列（前10名）
- ✅ 章节 -带有计算样式的页眉、主笔、页脚等
- ✅ 布局 -填充、边距、显示属性
- ✅ 元数据 -捕获时间戳、视口大小
🎨 输出示例
{
"url": "https://stripe.com/pricing",
"title": "Pricing - Stripe",
"colors": [
"rgb(99, 91, 255)",
"rgb(10, 37, 64)",
"rgb(255, 255, 255)"
],
"fonts": [
"Inter, sans-serif",
"system-ui"
],
"sections": [
{
"tag": "header",
"className": "site-header",
"html": "...",
"computedStyles": {
"backgroundColor": "rgb(255, 255, 255)",
"color": "rgb(10, 37, 64)",
"fontSize": "16px",
"fontFamily": "Inter, sans-serif",
"padding": "20px",
"margin": "0px"
}
}
],
"metadata": {
"capturedAt": "2025-10-28T12:00:00.000Z",
"viewport": {
"width": 1920,
"height": 1080
}
}
}🔌 可用工具
clone_website_design
克隆网站的设计并获取结构化数据。
参数：
url（字符串，必填）-要克隆的URL
退货：
- 结构化设计数据（JSON）
🛠️ 发展
# Clone the repo
git clone https://github.com/wplaunchify/design-clone-mcp.git
cd design-clone-mcp
# Install dependencies
npm install
# Build
npm run build
# Run locally
npm start📝 备注
- 超时： 默认每页30秒
- 尺寸限制： HTML限制为50KB，节限制为10
- 仅限公共网站： 仅捕获可公开访问的网站
- 无身份验证： 无法捕获需要登录的网站
🐛 故障排除
Puppeter不会安装
npm install puppeteer --unsafe-perm=true超时错误
增加代码中的超时时间或重试（某些站点速度较慢）
“找不到命令”
请确保已安装Node.js 18+：
node --version📄 许可证
麻省理工学院
👤 作者
MinuteLaunch团队
______________________________________________________________________
只是工作。没有配置。一个命令。 🚀