ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

AI Website Cloner Template+Kiro使用教程:0.4.0新增Kiro支持的配置全流程

AI Website Cloner Template+Kiro使用教程:0.4.0新增Kiro支持的配置全流程 AI Website Cloner TemplateKiro使用教程0.4.0新增Kiro支持的配置全流程【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-templateAI Website Cloner Template是一个「一条命令克隆任意网站」的开源项目模板给它一个 URLAI 编程代理就会把它逆向重建为干净的 Next.js 项目。最新的0.4.0 版本2026-08-10 发布正式新增了 Kiro 支持Kiro 用户现在也能跑通完整的/clone-website克隆工作流。本文带你从原理到实操走完 Kiro 配置全流程 提示请先通过项目页的「Use this template / 使用此模板」按钮创建属于自己的副本仓库不要把克隆产物直接提交回模板仓库。一、0.4.0 更新了什么根据 CHANGELOG.md这次版本更新的核心内容新增 Kiro 支持通过自动生成的工作区/clone-website技能接入本地开发与多阶段生产构建的Docker 工作流Dockerfile、docker-compose.ymlCline / Roo Code 完整生成的工作区技能/clone-website升级再次运行时保留已有页面并为多个目标隔离路由、研究文档与资源Node.js 基线提升至24CI 强制校验「生成文件」与源文件保持同步二、Kiro 是怎么接入的原理速览整个项目的多平台支持由「单一事实源 同步脚本」驱动Kiro 也不例外内容事实源Kiro 的接入方式项目指令AGENTS.md原生读取无需生成文件/clone-website技能.claude/skills/clone-website/SKILL.md自动生成为.kiro/skills/clone-website/SKILL.md两点关键Kiro 被 scripts/sync-agent-rules.sh 明确列为「原生读取 AGENTS.md」的代理因此打开项目后项目规则自动生效Kiro 使用与源文件相同的 SKILL.md 格式和$ARGUMENTS参数语法由 scripts/sync-skills.mjs 一行命令统一生成保证各平台技能永远一致。也就是说模板仓库里已经预置好 Kiro 所需的一切开箱即用无需手动写配置。三、Kiro 克隆网站配置全流程 第 1 步获取项目在终端执行也可用「Use this template」创建副本git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template cd ai-website-cloner-template第 2 步安装依赖⚠️ 0.4.0 已将基线提升至Node.js 24请确认本地版本。npm install第 3 步用 Kiro 打开项目用 Kiro 打开项目根目录它会自动加载 AGENTS.md 中的项目规则以及.kiro/skills/下的clone-website工作区技能。第 4 步一条命令启动克隆在 Kiro 中输入/clone-website https://example.com0.4.0 支持多 URL 并行克隆输出互相隔离/clone-website https://site-a.com https://site-b.com如果当前客户端只通过自然语言触发技能直接说「用 clone-website 工作流克隆 https://example.com」即可。第 5 步预览与定制克隆完成后本地预览npm run dev再按需定制模板强调「先 1:1 还原后自定义」的设计原则见 AGENTS.md。四、克隆流水线是如何运转的/clone-website背后是一条五阶段流水线Reconnaissance 侦察—— 截图、提取设计令牌颜色/字体、交互扫描滚动、点击、悬停、响应式Foundation 地基—— 更新字体、颜色、全局样式下载全部资源Component Specs 组件规格—— 在 docs/research/ 写入精确到计算后 CSS 值的组件规格文件Parallel Build 并行构建—— 每个组件一个构建代理在独立 git worktree 中并行开发Assembly QA 组装质检—— 合并 worktree、装配页面并对原站做视觉差异比对每个阶段的检查细节都可参考官方检查清单 docs/research/INSPECTION_GUIDE.md。五、克隆效果像素级还原下图是模板官方演示中「原站 vs 克隆站」的对比效果——导航、标题、卡片布局几乎逐像素对齐这正是 Kiro 跑完上述流水线后的产出水准六、常见问题 FAQ QKiro 里看不到/clone-website执行node scripts/sync-skills.mjs重新生成.kiro/skills/下的技能文件该项目 CI 也会自动校验同步状态。Q可以用 Docker 吗0.4.0 新增了 Docker 支持docker compose up app --build # 生产构建 docker compose up dev --build # 开发模式端口 3001Q支持哪些 AI 代理Kiro 之外还支持 Claude Code推荐、Codex CLI、Cursor、Windsurf、Gemini CLI、Cline、Roo Code 等十余个平台详见 README.zh-CN.md 的「支持平台」表格。七、为什么值得关注 从项目内置的 Star 增长图可以看出这款 AI 网站克隆模板上线数月间热度持续攀升它解决的正是「平台迁移、源码丢失、源码学习」三大真实场景。现在 Kiro 用户也能一键入场了。八、延伸阅读中文完整文档README.zh-CN.md版本更新日志CHANGELOG.md网站逆向检查指南docs/research/INSPECTION_GUIDE.md技能同步脚本scripts/sync-skills.mjs代理规则同步脚本scripts/sync-agent-rules.sh【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表