尧图网页设计 
AI Website Cloner Template规格文件模板深度剖析一份component spec.md的完整解剖【免费下载链接】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是一个「AI 网站克隆模板」给 AI 编程代理一个 URL它就能逐像素复刻目标网站为干净的 Next.js 应用。而整个克隆流水线里最关键的工程产物就是每个组件必须产出的component spec.md 规格文件——它决定了克隆结果到底「像不像」。本文带你完整解剖这份规格文件模板的 8 个区块和设计哲学。为什么 spec 文件是 AI 网站克隆的灵魂这个模板的核心能力是/clone-website技能它按 5 个阶段流水线执行侦察截图 设计 token 提取→ 地基字体/颜色/全局资源→组件规格spec 文件→ 并行构建 → 组装与视觉 QA其中第 3 阶段的规则写得很直白Spec Files Are the Source of Truth规格文件是唯一事实来源——没有 spec 文件就绝不允许派构建代理开工。技能文件里甚至强调不先写 spec 就派工等于「让构建者靠记忆瞎猜」。下方是克隆完成后的真实效果对比左侧 Original 原版右侧 Clone 克隆版逐像素级还原正是靠 spec 文件保证的component spec.md 模板藏在哪里完整路径速查spec 模板的「母版」定义在克隆技能的源头文件中技能定义含 spec 模板原文.claude/skills/clone-website/SKILL.md多平台同步脚本一键生成 Kiro/Cline/Roo 等各平台的技能副本scripts/sync-skills.mjs配套巡检清单docs/research/INSPECTION_GUIDE.md代理总规则AGENTS.md克隆运行时每个组件的 spec 文件会被写到一个按站点、按页面隔离的规范路径docs/research/site-key/page-key/components/component-name.spec.md配套的截图、资源也各自有固定位置docs/design-references/site-key/page-key/截图和public/sites/site-key/page-key/下载的图片/视频。这种命名空间隔离保证多 URL 批量克隆时互不覆盖。模板逐段解剖8 个必填区块逐一拆解模板本身是一个 Markdown 骨架每个区块都回答「构建代理必然会问的问题」区块回答的问题关键要求Overview产物放哪、参考图在哪、怎么驱动目标文件路径 截图路径 交互模型DOM Structure元素层级关系谁包含谁Computed Styles精确样式值只写getComputedStyle()的原始值States Behaviors触发条件与前后状态触发器 / State A / State B / TransitionPer-State Content每个状态的文案内容逐个 tab 点击后提取Assets用到哪些图片/图标含图层叠加的覆盖图Text Content原文文案逐字照抄禁止改写Responsive Behavior三档视口表现1440 / 768 / 390 pxOverview目标文件 截图 交互模型三件套模板的 Overview 区块只有三个字段却信息密度极高## Overview - **Target file:** src/components/sites/site-key/page-key/ComponentName.tsx - **Screenshot:** docs/design-references/site-key/page-key/screenshot-name.png - **Interaction model:** static | click-driven | scroll-driven | time-driven其中「交互模型」是最容易被低估的字段。技能文件指出这是克隆中最贵的错误原版是滚动驱动scroll-driven你却建成了点击切换click-driven代价不是调 CSS而是整段重写。规则要求先慢速滚动观察、后点击测试再明确写下结论例如INTERACTION MODEL: scroll-driven with IntersectionObserver。Computed Styles精确值禁止估算这是 spec 模板的灵魂区块。要求对容器和每个子元素列出所有相关属性的精确计算值### Container - display: ... - padding: ... - maxWidth: ... ### Child element 1 - fontSize: ... - color: ...为什么必须精确到 px模板里有句狠话「它看起来像text-lg」是错的——如果计算值是18px而实际行高是24px而非text-lg的28px克隆就会微妙地「差一点」。配套做法是跑一段浏览器脚本一次性把 50 个 CSS 属性从组件容器整树抽出来而不是手动量。States Behaviors把「动起来的样子」写进规格静态截图只记录默认态spec 模板要求把行为也规格化格式固定为四行### Scroll-triggered floating mode - **Trigger:** 滚动超过 50px - **State A (before):** maxWidth: 100vw, boxShadow: none - **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1) - **Transition:** transition: all 0.3s ease多状态组件tab、滚动触发的导航栏、hover 效果必须逐态捕获先在状态 A 跑抽取脚本触发状态变化再对同一元素跑一遍A/B 的差值就是行为规格。Responsive Behavior三档视口断点记录只按桌面宽度检查的克隆到平板和手机就会崩。模板强制记录 1440 / 768 / 390 三档视口下的布局变化以及断点大约发生在哪个像素。三条铁律让「零猜测」可执行模板不是孤立的SKILL.md 里有三条配套机制保证 spec 质量150 行复杂度预算如果某个构建任务的 spec 内容超过约 150 行说明区块太复杂必须拆成更小的子组件——这是机械规则不允许「反正它们相关」而跳过。spec 内联下发构建代理的 prompt 里直接粘贴 spec 全文禁止写「去看 DESIGN_TOKENS.md」——构建者不应该需要读任何外部文档。Pre-Dispatch 清单派工前逐项打勾——CSS 值是否全部来自getComputedStyle()、交互模型是否已定、每个状态的内容是否都抓了、文案是否逐字照抄。任何一项打不了勾就回去继续提取。QA 闭环spec 文件如何成为验收标准组装完成后克隆并没有「完工」还要跑视觉 QA原版与克隆版并排截图逐区块比对桌面端1440px和移动端390px。发现差异时的排查逻辑恰好以 spec 为中心spec 写错了→ 重新从浏览器提取更新 spec再修组件spec 是对的、构建者写错了→ 修组件对齐 specspec 文件因此同时扮演三重角色给代理的施工合同、给用户的可审计产物、给 QA 的验收标准。把 spec 思维用到你自己的 AI 编程项目如果你也在用 AI 编程代理做复杂任务这份模板提供了可直接迁移的方法论先写规格再派工让代理在动手前产出结构化的需求文件堵住「靠记忆猜需求」的漏洞精确值优先用工具提取真实数据而不是让代理「看起来大概是多少」小任务、完美结果单个任务越聚焦产出越精准任务过大就机械地拆完成标准前置像npx tsc --noEmit通过、构建通过这样可验证的门槛写进每个任务的定义想亲手翻一遍这份模板克隆到本地后直接打开 README.md 了解 5 阶段流水线再读 .claude/skills/clone-website/SKILL.md 中的 Step 2: Write the Component Spec File 一节即可看到本文解剖的完整模板原文git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template从 3 万 Star 的增长曲线可以看出「先规格、后构建」的这套 AI 网站克隆工作流已被大量开发者验证。与其让 AI「看着网站自由发挥」不如给它一份 component spec.md——规格越精确克隆越接近零误差。【免费下载链接】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），仅供参考 AI Website Cloner Template规格文件模板深度剖析：一份component spec.md的完整解剖
AI Website Cloner Template规格文件模板深度剖析一份component spec.md的完整解剖【免费下载链接】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是一个「AI 网站克隆模板」给 AI 编程代理一个 URL它就能逐像素复刻目标网站为干净的 Next.js 应用。而整个克隆流水线里最关键的工程产物就是每个组件必须产出的component spec.md 规格文件——它决定了克隆结果到底「像不像」。本文带你完整解剖这份规格文件模板的 8 个区块和设计哲学。为什么 spec 文件是 AI 网站克隆的灵魂这个模板的核心能力是/clone-website技能它按 5 个阶段流水线执行侦察截图 设计 token 提取→ 地基字体/颜色/全局资源→组件规格spec 文件→ 并行构建 → 组装与视觉 QA其中第 3 阶段的规则写得很直白Spec Files Are the Source of Truth规格文件是唯一事实来源——没有 spec 文件就绝不允许派构建代理开工。技能文件里甚至强调不先写 spec 就派工等于「让构建者靠记忆瞎猜」。下方是克隆完成后的真实效果对比左侧 Original 原版右侧 Clone 克隆版逐像素级还原正是靠 spec 文件保证的component spec.md 模板藏在哪里完整路径速查spec 模板的「母版」定义在克隆技能的源头文件中技能定义含 spec 模板原文.claude/skills/clone-website/SKILL.md多平台同步脚本一键生成 Kiro/Cline/Roo 等各平台的技能副本scripts/sync-skills.mjs配套巡检清单docs/research/INSPECTION_GUIDE.md代理总规则AGENTS.md克隆运行时每个组件的 spec 文件会被写到一个按站点、按页面隔离的规范路径docs/research/site-key/page-key/components/component-name.spec.md配套的截图、资源也各自有固定位置docs/design-references/site-key/page-key/截图和public/sites/site-key/page-key/下载的图片/视频。这种命名空间隔离保证多 URL 批量克隆时互不覆盖。模板逐段解剖8 个必填区块逐一拆解模板本身是一个 Markdown 骨架每个区块都回答「构建代理必然会问的问题」区块回答的问题关键要求Overview产物放哪、参考图在哪、怎么驱动目标文件路径 截图路径 交互模型DOM Structure元素层级关系谁包含谁Computed Styles精确样式值只写getComputedStyle()的原始值States Behaviors触发条件与前后状态触发器 / State A / State B / TransitionPer-State Content每个状态的文案内容逐个 tab 点击后提取Assets用到哪些图片/图标含图层叠加的覆盖图Text Content原文文案逐字照抄禁止改写Responsive Behavior三档视口表现1440 / 768 / 390 pxOverview目标文件 截图 交互模型三件套模板的 Overview 区块只有三个字段却信息密度极高## Overview - **Target file:** src/components/sites/site-key/page-key/ComponentName.tsx - **Screenshot:** docs/design-references/site-key/page-key/screenshot-name.png - **Interaction model:** static | click-driven | scroll-driven | time-driven其中「交互模型」是最容易被低估的字段。技能文件指出这是克隆中最贵的错误原版是滚动驱动scroll-driven你却建成了点击切换click-driven代价不是调 CSS而是整段重写。规则要求先慢速滚动观察、后点击测试再明确写下结论例如INTERACTION MODEL: scroll-driven with IntersectionObserver。Computed Styles精确值禁止估算这是 spec 模板的灵魂区块。要求对容器和每个子元素列出所有相关属性的精确计算值### Container - display: ... - padding: ... - maxWidth: ... ### Child element 1 - fontSize: ... - color: ...为什么必须精确到 px模板里有句狠话「它看起来像text-lg」是错的——如果计算值是18px而实际行高是24px而非text-lg的28px克隆就会微妙地「差一点」。配套做法是跑一段浏览器脚本一次性把 50 个 CSS 属性从组件容器整树抽出来而不是手动量。States Behaviors把「动起来的样子」写进规格静态截图只记录默认态spec 模板要求把行为也规格化格式固定为四行### Scroll-triggered floating mode - **Trigger:** 滚动超过 50px - **State A (before):** maxWidth: 100vw, boxShadow: none - **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1) - **Transition:** transition: all 0.3s ease多状态组件tab、滚动触发的导航栏、hover 效果必须逐态捕获先在状态 A 跑抽取脚本触发状态变化再对同一元素跑一遍A/B 的差值就是行为规格。Responsive Behavior三档视口断点记录只按桌面宽度检查的克隆到平板和手机就会崩。模板强制记录 1440 / 768 / 390 三档视口下的布局变化以及断点大约发生在哪个像素。三条铁律让「零猜测」可执行模板不是孤立的SKILL.md 里有三条配套机制保证 spec 质量150 行复杂度预算如果某个构建任务的 spec 内容超过约 150 行说明区块太复杂必须拆成更小的子组件——这是机械规则不允许「反正它们相关」而跳过。spec 内联下发构建代理的 prompt 里直接粘贴 spec 全文禁止写「去看 DESIGN_TOKENS.md」——构建者不应该需要读任何外部文档。Pre-Dispatch 清单派工前逐项打勾——CSS 值是否全部来自getComputedStyle()、交互模型是否已定、每个状态的内容是否都抓了、文案是否逐字照抄。任何一项打不了勾就回去继续提取。QA 闭环spec 文件如何成为验收标准组装完成后克隆并没有「完工」还要跑视觉 QA原版与克隆版并排截图逐区块比对桌面端1440px和移动端390px。发现差异时的排查逻辑恰好以 spec 为中心spec 写错了→ 重新从浏览器提取更新 spec再修组件spec 是对的、构建者写错了→ 修组件对齐 specspec 文件因此同时扮演三重角色给代理的施工合同、给用户的可审计产物、给 QA 的验收标准。把 spec 思维用到你自己的 AI 编程项目如果你也在用 AI 编程代理做复杂任务这份模板提供了可直接迁移的方法论先写规格再派工让代理在动手前产出结构化的需求文件堵住「靠记忆猜需求」的漏洞精确值优先用工具提取真实数据而不是让代理「看起来大概是多少」小任务、完美结果单个任务越聚焦产出越精准任务过大就机械地拆完成标准前置像npx tsc --noEmit通过、构建通过这样可验证的门槛写进每个任务的定义想亲手翻一遍这份模板克隆到本地后直接打开 README.md 了解 5 阶段流水线再读 .claude/skills/clone-website/SKILL.md 中的 Step 2: Write the Component Spec File 一节即可看到本文解剖的完整模板原文git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template从 3 万 Star 的增长曲线可以看出「先规格、后构建」的这套 AI 网站克隆工作流已被大量开发者验证。与其让 AI「看着网站自由发挥」不如给它一份 component spec.md——规格越精确克隆越接近零误差。【免费下载链接】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），仅供参考