CloneKit - Website Cloning Tool在浏览器中使用的扩展工具，这款工具支持在分析之前选择您的框架，系统会自动为您选择的框架生成提示。
介绍
CloneKit - 网站克隆工具
提取任何网站的设计 DNA，并在几秒钟内使用 AI 克隆它！
框架选择
- Tailwind CSS → React + tailwind.config.js
- Bootstrap 5 → HTML + CSS 变量
在分析之前选择您的框架，系统会自动为您选择的框架生成提示。
提取数据
🎨 调色板 - 所有使用的颜色（十六进制代码）
🔤 字体 - 字体系列和使用计数
📦 资源 - 图像、SVG 和图标计数
🧩 组件 - 按钮、表单、卡片、链接计数
📑 部分 - 英雄、功能、页脚、CTA 检测
📐 布局 - 页眉/页脚/侧边栏结构
📏 间距 - 填充、边距、边框半径值
📸 全页截图 - 带滚动+缝合的视觉参考
主要特点
- 组件优先 - 页面分为几个部分，每个部分都有自己的提示
- 布局检测 - 自动检测 Flex/Grid 结构
- 任意值 - Tailwind 的精确像素：p-[32px]、rounded-[16px]
- 全页屏幕截图 - 捕获整个页面（最多 8 个视口）
- 提示生成器 - ChatGPT、Claude、Gemini 的准备粘贴提示
- 多框架 - Tailwind CSS 或 Bootstrap 5 输出
导出选项
📋 JSON - 复制所有提取的数据
🤖 提示 - AI 就绪的整页提示
📸 屏幕截图 - 滚动+缝合整个页面 (JPEG)
📑 部分提示 - 每个部分的单独提示
适合谁？
- 前端开发人员 - 快速原型设计
- 网络机构 - 客户参考站点分析
- 设计师 - 实地考察寻找灵感
- 学生 - 从真实网站学习
如何使用
1. 导航到您要克隆的网站
2. 单击 CloneKit 图标
3.选择框架（Tailwind/Bootstrap）
4. 单击“分析页面”按钮
5.复制🤖提示+📸截图
6. 粘贴到 AI → 像素完美的代码！
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
