AI导哈

网站设计克隆工具

一键克隆网站设计并提取结构化数据（HTML、CSS、颜色、字体、布局）的工具，适用于快速复制网站设计。

  • by wplaunchify
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 wplaunchify/design-clone-mcp

使用说明

设计克隆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服务器将：

  1. 启动Puppeteer
  2. 捕捉网站设计
  3. 提取颜色、字体、HTML、CSS
  4. 返回结构化数据
  5. 然后，您可以使用它来创建页面

手动测试：

# 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": "<header>...</header>",
      "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团队

只是工作。没有配置。一个命令。 🚀

相关 MCP