Easy-Vibe 截图克隆实战让 AI 依据一张参考图重建网页、数据面板与方块游戏【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe导读本文是 Easy-Vibe面向 AI 原生产品构建者的第一门课程Stage-1「克隆你喜欢的应用」核心练习的完整技术指南。整个练习的目标只有一个挑选一张你喜欢的页面截图把它交给 AI 编程工具以 Trae 为例用一句自然语言描述需求让 AI 生成一个能在浏览器中打开并交互的小项目。读完本文你将掌握「截图 → 一句话 → 首版 → 逐轮微调」的完整克隆工作流并能在仓库提供的 4 个真实示例网页、SaaS 面板、2D/3D 方块游戏中对照源码验证 AI 生成结果的技术细节。核心心法先模仿参考图再逐步把它变成你自己的作品。截图负责传达「长什么样」一句话负责传达「要做什么」。这个练习要训练什么在上一课中我们让 AI 从一句文字描述开始写程序这一课换一个更直观的起点——截图。它相当于拼积木时摆在面前的成品照片你不需要提前描述每个颜色、间距和按钮位置图片本身已经携带了大部分视觉信息。本练习产出一个规模明确的小成果核心产出1 个小型项目预期结果一个能打开、能交互的页面或小游戏投入时间约 2 小时训练标签截图模仿、AI 编程、零基础入门。你不需要懂编程也不需要写完整的需求文档。让 AI 生成第一版然后你观察结果、指出需要改的地方如此反复。整条流程只有四步截图或保存一张你喜欢的图把图交给 AI用一句话描述要做的东西每轮只修正一个可见差异。1. 先选定你要做的小作品类型在打开工具之前先确定今天要达成的小目标。注意不是做一个功能齐全的完整产品而是一屏能打开、看得懂、带一点交互的页面。范围越小首次成功的概率越高。从以下三种类型中选一个类型参考特征本课关注点产品首页标题、简介、配图、按钮视觉结构与氛围还原SaaS 数据面板侧边栏、数据卡片、图表布局骨架与信息层级简单小游戏移动、点击、小目标核心交互闭环挑选参考图时检查三件事能否从一张截图看懂主要内容页面上是否有真正吸引你的东西生成之后你能否快速判断结果像不像如果你喜欢某个产品首页的大标题和配色就截取它的首屏如果你喜欢某款游戏的方块世界就保存一张能清楚展示它的图片。::: tip 相似度该到多少 结果越接近参考图说明你观察细节越仔细、描述差异越准确。把参考图和结果并排放置你觉得相似度是 50%、70% 还是 90% :::::: tip 只做一屏 不要把登录、支付、聊天、后台管理和手机 App 都塞进来。这个练习只重建你眼前的那一屏。 :::2. 跟着老师完整走一遍在动手之前先看一遍完整流程看明白之后再用你自己的截图复现。老师在演示中新建了一个空文件夹并用 Trae 打开项目名为trae-screenshot-demo——最初里面没有任何页面和代码。2.1 把参考图交给 Trae老师选的参考图来自 Framer 官网的一个产品展示页大标题、顶部导航、紫色群山场景和一排小控件。参考图在仓库中的位置为 docs/zh-cn/stage-1/clone-your-favorite-app/images/framer-official-interface.jpg。把图片拖入 Trae 对话后老师只写了一句非常简短的指令照着这张图帮我做一个网页。做好后帮我打开看看。这句话与仓库中 examples/trae-screenshot-demo/prompt.txt 保存的原始提示词完全一致。图片告诉 Trae 页面大致长什么样句子则说明「把图变成网页并运行」。发送后请耐心等待 Trae 生成完文件不要在第一个请求完成前连续发多个新请求。2.2 观察第一版而不是研究代码Trae 生成了index.html、styles.css、script.js三个文件并自动在浏览器中打开页面。老师演示中的运行结果如下对照参考图观察第一版保留了紫色天空与群山的氛围中间仍有一个大标题顶部有导航栏底部有一排产品控件文字、按钮、图标共同构成了一个完整首屏。它不是逐像素复刻但抓住了最明显的结构和气质——这就是一个好的开始。这一版对应的完整实现就在仓库的 examples/trae-screenshot-demo/index.html 中nav导航区、main.hero标题区、由 7 个产品图标组成的products-row区以及底部标语区层次与参考图一一对应。补充的 examples/trae-screenshot-demo/script.js 还为标题、副标题、产品行和底部内容实现了 0.8 秒的错峰淡入动画并在点击产品项与导航链接时输出console.log——这说明 AI 不仅还原了静态布局还自动补上了能响应点击的交互。2.3 第一版只需要「看得见」不要因为字体或按钮位置差了一点就推倒重来。先确认页面能打开然后只挑最明显的一个问题去修。如果标题太小就说把中间的大标题放大一点。改完重新打开页面。如果更接近你的目标了这一轮就是有效的。::: tip 用日常语言就够了 你是在和 Trae 一起构建不是在参加命令考试。看到什么就说什么用你平时说话的方式描述即可。 :::3. 用你自己的截图试一次打开 Trae新建一个空文件夹并在编辑器中打开它名字简单即可如my-first-page。按以下步骤操作找一张你喜欢的网站或游戏截图点击对话旁的图片按钮选中截图确认图片已经出现在消息里输入一句简短提示词并发送照着这张图帮我做一个网页。 做好后帮我打开看看。第一次练习不需要指定框架、目录结构或文件名——这些交给 Trae 决定。如果你只想要视觉风格、不想要原图里的品牌名和文案可以追加一句参考这张图的风格但是把名字和内容换成新的。等待生成完成。如果 Trae 请求创建文件或运行项目的授权直接同意如果页面没有自动打开就说把这个项目跑起来我想看看效果。页面出现后花十秒钟确认三件事能打开、主要内容在、主按钮能响应。不要同时改五处。4. 同一套方法换着产品用截图克隆不只适用于产品首页。为了验证这一点老师又建了两个空白项目一个数据面板、一个方块游戏。两者的提示词与完整源码都能在仓库examples/目录下找到。4.1 示例一SaaS 数据面板SaaS 产品通常用面板展示项目进度、销售额或用户数据。老师选用的参考是 Linear 官方面板左侧导航、右侧内容区。参考图为 docs/zh-cn/stage-1/clone-your-favorite-app/images/linear-official-dashboard.png。把图放进 Trae 后提示词依然很短帮我做一个像这样的数据看板。数据可以先随便写。做好后帮我打开看看。这正是 examples/trae-linear-dashboard/prompt.txt 中的原文。生成的页面运行效果对照源码 examples/trae-linear-dashboard/index.html 可以看到AI 还原了完整的布局骨架260px 宽的深色sidebar含 Inbox、Reviews、My issues、Pulse 等导航项与团队列表、顶部topbar、Tab 栏、以及带Name / Owner两列的 dashboards 表格甚至补上了 hover 高亮和激活态。表格里的数据是演示用的假数据这很正常——第一版只练骨架标签和数字等页面稳定后再改。4.2 示例二2D 方块游戏如果不喜欢常规网页就用游戏截图。老师选择了 Minecraft 创意模式的方块世界截图 docs/zh-cn/stage-1/clone-your-favorite-app/images/minecraft-official-creative-mode.png提示词同样保持简短帮我做一个像这样的方块小游戏。人物可以走动也可以放方块。做好后帮我打开看看。这句提示词原样保存在 examples/trae-block-game/prompt.txt。Trae 生成了一个能在浏览器里运行的游戏角色可以移动、放置和拆除方块需要特别注意这个结果是二维侧视游戏——角色在平面上左右移动没有前后纵深。因为提示词只说了方块小游戏Trae 选择了最容易实现的解释。打开页面按方向键移动、点击场景试验即可能移动、能放方块第一版就算成功。从源码 examples/trae-block-game/index.html 可以验证这一点游戏使用一块 800×560 的canvas格子尺寸TILE 32定义了 GRASS、DIRT、STONE、WOOD、LEAVES、SAND、WATER 共 7 种方块genWorld()用正弦函数生成起伏地形并点缀树木与水池角色受重力与逐格碰撞检测约束支持WASD/方向键移动、空格跳跃、左键放方块、右键挖方块、数字键1-7或点击底部物品栏切换方块类型——所有交互都在 2D 平面上完成没有任何纵深轴。4.3 再生成一个 3D 版本如果你想要更接近 Minecraft 的第一人称视角就要明确写出「3D」。老师另开了一个空白项目放入同一张截图改口为帮我做一个像这样的 3D 方块小游戏。 人物可以走动可以转动视角也可以放方块。 做好后帮我打开看看。这段提示词与 examples/trae-3d-block-game/prompt.txt 完全一致。这次 Trae 生成了真正的三维方块世界点击「Start Game」进入后操作方式为WASD行走、鼠标旋转视角、左键移除方块、右键放置方块、数字键切换方块类型。两个版本没有绝对的优劣2D 版更适合第一个游戏练习如果在世界的纵深中移动是你想法里的核心部分就明确要求 3D 版——关键词「3D」本身就是一个关键的需求描述。::: tip 让它变得不一样 参考图只是起点。改变颜色、主题、文字、图片或交互方式让结果慢慢变成你自己的作品。 :::5. 首版不满意怎么办第一版看起来有偏差、按钮点不动都很正常——几乎没有项目能靠一句话一次成型。正确姿势是看 → 小改 → 再看。新手最容易犯的错误是把所有问题塞进同一条消息当多件事同时变化时你根本分不清是哪次修改产生了哪个结果。遵循一条简单规则每一轮只挑最明显的一个问题。页面看起来不对顶部卡片太高上面那张卡片太高了把它改矮一点。中间主图太小中间那张图太小了把它放大。背景太暗背景太暗了换一个浅一点的颜色。页面行为不对按钮没反应这个按钮点了没反应帮我修一下。游戏角色不动方向键按了没反应帮我修一下移动。说不清问题在哪给当前结果截个图然后说这是现在的效果。你对照参考图把差别最大的地方修一下。你不需要会说「margin」「响应式布局」这类术语。像「页面太挤」「文字看不清」「手机版排得很乱」这种大白话就很有用。修完一个问题再进入下一个。6. 完成验收清单不要满足于一张静态图片。打开结果亲自点击、亲自玩一下检查四项能打开刷新不会出现白屏或报错看得懂别人一眼能认出它是首页、面板还是游戏有响应主按钮或核心控件能用保持可读窗口缩窄时文字与图片不会严重重叠。任一项失败就把你看到的现象准确告诉 Trae让它只修这一个问题。四项全部通过本练习即完成。::: tip 交付一个完整的小成果 登录、支付、聊天群、多人联机都不在今天的课程范围内。一个完成的小页面胜过十个做了一半的开头。 :::作业从一张截图构建你的页面选一张你喜欢的网站或游戏截图交给 AI重建一屏内容保存参考截图生成页面并改进一个你不满意的部分保存修改后的结果截图。展示时把参考图与你的作品并排放置说明你提出的那一次修改。核心要点回顾本课不从代码开始而是从截图开始全程只有四步截图或保存一张图把它交给 AI用一句话描述要做的作品每轮只修正一个可见差异。截图告诉 AI「长什么样」你的话告诉 AI「要做什么」。当第一版出现后点击、观察、再截图是驱动下一轮修改的最好方式。提示词不必像技术文档那样正式——提出简单要求、把项目跑起来、基于眼前看到的结果继续对话你的构建过程就会变得既近又容易。想继续深化可直接对照仓库中的 4 个成品示例研究 AI 的产出结构examples/trae-screenshot-demo、examples/trae-linear-dashboard、examples/trae-block-game、examples/trae-3d-block-game每个目录下都有prompt.txt与完整可运行源码可作为你后续提示词与代码评审的参照样本。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Easy-Vibe 截图克隆实战：让 AI 依据一张参考图重建网页、数据面板与方块游戏
Easy-Vibe 截图克隆实战让 AI 依据一张参考图重建网页、数据面板与方块游戏【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe导读本文是 Easy-Vibe面向 AI 原生产品构建者的第一门课程Stage-1「克隆你喜欢的应用」核心练习的完整技术指南。整个练习的目标只有一个挑选一张你喜欢的页面截图把它交给 AI 编程工具以 Trae 为例用一句自然语言描述需求让 AI 生成一个能在浏览器中打开并交互的小项目。读完本文你将掌握「截图 → 一句话 → 首版 → 逐轮微调」的完整克隆工作流并能在仓库提供的 4 个真实示例网页、SaaS 面板、2D/3D 方块游戏中对照源码验证 AI 生成结果的技术细节。核心心法先模仿参考图再逐步把它变成你自己的作品。截图负责传达「长什么样」一句话负责传达「要做什么」。这个练习要训练什么在上一课中我们让 AI 从一句文字描述开始写程序这一课换一个更直观的起点——截图。它相当于拼积木时摆在面前的成品照片你不需要提前描述每个颜色、间距和按钮位置图片本身已经携带了大部分视觉信息。本练习产出一个规模明确的小成果核心产出1 个小型项目预期结果一个能打开、能交互的页面或小游戏投入时间约 2 小时训练标签截图模仿、AI 编程、零基础入门。你不需要懂编程也不需要写完整的需求文档。让 AI 生成第一版然后你观察结果、指出需要改的地方如此反复。整条流程只有四步截图或保存一张你喜欢的图把图交给 AI用一句话描述要做的东西每轮只修正一个可见差异。1. 先选定你要做的小作品类型在打开工具之前先确定今天要达成的小目标。注意不是做一个功能齐全的完整产品而是一屏能打开、看得懂、带一点交互的页面。范围越小首次成功的概率越高。从以下三种类型中选一个类型参考特征本课关注点产品首页标题、简介、配图、按钮视觉结构与氛围还原SaaS 数据面板侧边栏、数据卡片、图表布局骨架与信息层级简单小游戏移动、点击、小目标核心交互闭环挑选参考图时检查三件事能否从一张截图看懂主要内容页面上是否有真正吸引你的东西生成之后你能否快速判断结果像不像如果你喜欢某个产品首页的大标题和配色就截取它的首屏如果你喜欢某款游戏的方块世界就保存一张能清楚展示它的图片。::: tip 相似度该到多少 结果越接近参考图说明你观察细节越仔细、描述差异越准确。把参考图和结果并排放置你觉得相似度是 50%、70% 还是 90% :::::: tip 只做一屏 不要把登录、支付、聊天、后台管理和手机 App 都塞进来。这个练习只重建你眼前的那一屏。 :::2. 跟着老师完整走一遍在动手之前先看一遍完整流程看明白之后再用你自己的截图复现。老师在演示中新建了一个空文件夹并用 Trae 打开项目名为trae-screenshot-demo——最初里面没有任何页面和代码。2.1 把参考图交给 Trae老师选的参考图来自 Framer 官网的一个产品展示页大标题、顶部导航、紫色群山场景和一排小控件。参考图在仓库中的位置为 docs/zh-cn/stage-1/clone-your-favorite-app/images/framer-official-interface.jpg。把图片拖入 Trae 对话后老师只写了一句非常简短的指令照着这张图帮我做一个网页。做好后帮我打开看看。这句话与仓库中 examples/trae-screenshot-demo/prompt.txt 保存的原始提示词完全一致。图片告诉 Trae 页面大致长什么样句子则说明「把图变成网页并运行」。发送后请耐心等待 Trae 生成完文件不要在第一个请求完成前连续发多个新请求。2.2 观察第一版而不是研究代码Trae 生成了index.html、styles.css、script.js三个文件并自动在浏览器中打开页面。老师演示中的运行结果如下对照参考图观察第一版保留了紫色天空与群山的氛围中间仍有一个大标题顶部有导航栏底部有一排产品控件文字、按钮、图标共同构成了一个完整首屏。它不是逐像素复刻但抓住了最明显的结构和气质——这就是一个好的开始。这一版对应的完整实现就在仓库的 examples/trae-screenshot-demo/index.html 中nav导航区、main.hero标题区、由 7 个产品图标组成的products-row区以及底部标语区层次与参考图一一对应。补充的 examples/trae-screenshot-demo/script.js 还为标题、副标题、产品行和底部内容实现了 0.8 秒的错峰淡入动画并在点击产品项与导航链接时输出console.log——这说明 AI 不仅还原了静态布局还自动补上了能响应点击的交互。2.3 第一版只需要「看得见」不要因为字体或按钮位置差了一点就推倒重来。先确认页面能打开然后只挑最明显的一个问题去修。如果标题太小就说把中间的大标题放大一点。改完重新打开页面。如果更接近你的目标了这一轮就是有效的。::: tip 用日常语言就够了 你是在和 Trae 一起构建不是在参加命令考试。看到什么就说什么用你平时说话的方式描述即可。 :::3. 用你自己的截图试一次打开 Trae新建一个空文件夹并在编辑器中打开它名字简单即可如my-first-page。按以下步骤操作找一张你喜欢的网站或游戏截图点击对话旁的图片按钮选中截图确认图片已经出现在消息里输入一句简短提示词并发送照着这张图帮我做一个网页。 做好后帮我打开看看。第一次练习不需要指定框架、目录结构或文件名——这些交给 Trae 决定。如果你只想要视觉风格、不想要原图里的品牌名和文案可以追加一句参考这张图的风格但是把名字和内容换成新的。等待生成完成。如果 Trae 请求创建文件或运行项目的授权直接同意如果页面没有自动打开就说把这个项目跑起来我想看看效果。页面出现后花十秒钟确认三件事能打开、主要内容在、主按钮能响应。不要同时改五处。4. 同一套方法换着产品用截图克隆不只适用于产品首页。为了验证这一点老师又建了两个空白项目一个数据面板、一个方块游戏。两者的提示词与完整源码都能在仓库examples/目录下找到。4.1 示例一SaaS 数据面板SaaS 产品通常用面板展示项目进度、销售额或用户数据。老师选用的参考是 Linear 官方面板左侧导航、右侧内容区。参考图为 docs/zh-cn/stage-1/clone-your-favorite-app/images/linear-official-dashboard.png。把图放进 Trae 后提示词依然很短帮我做一个像这样的数据看板。数据可以先随便写。做好后帮我打开看看。这正是 examples/trae-linear-dashboard/prompt.txt 中的原文。生成的页面运行效果对照源码 examples/trae-linear-dashboard/index.html 可以看到AI 还原了完整的布局骨架260px 宽的深色sidebar含 Inbox、Reviews、My issues、Pulse 等导航项与团队列表、顶部topbar、Tab 栏、以及带Name / Owner两列的 dashboards 表格甚至补上了 hover 高亮和激活态。表格里的数据是演示用的假数据这很正常——第一版只练骨架标签和数字等页面稳定后再改。4.2 示例二2D 方块游戏如果不喜欢常规网页就用游戏截图。老师选择了 Minecraft 创意模式的方块世界截图 docs/zh-cn/stage-1/clone-your-favorite-app/images/minecraft-official-creative-mode.png提示词同样保持简短帮我做一个像这样的方块小游戏。人物可以走动也可以放方块。做好后帮我打开看看。这句提示词原样保存在 examples/trae-block-game/prompt.txt。Trae 生成了一个能在浏览器里运行的游戏角色可以移动、放置和拆除方块需要特别注意这个结果是二维侧视游戏——角色在平面上左右移动没有前后纵深。因为提示词只说了方块小游戏Trae 选择了最容易实现的解释。打开页面按方向键移动、点击场景试验即可能移动、能放方块第一版就算成功。从源码 examples/trae-block-game/index.html 可以验证这一点游戏使用一块 800×560 的canvas格子尺寸TILE 32定义了 GRASS、DIRT、STONE、WOOD、LEAVES、SAND、WATER 共 7 种方块genWorld()用正弦函数生成起伏地形并点缀树木与水池角色受重力与逐格碰撞检测约束支持WASD/方向键移动、空格跳跃、左键放方块、右键挖方块、数字键1-7或点击底部物品栏切换方块类型——所有交互都在 2D 平面上完成没有任何纵深轴。4.3 再生成一个 3D 版本如果你想要更接近 Minecraft 的第一人称视角就要明确写出「3D」。老师另开了一个空白项目放入同一张截图改口为帮我做一个像这样的 3D 方块小游戏。 人物可以走动可以转动视角也可以放方块。 做好后帮我打开看看。这段提示词与 examples/trae-3d-block-game/prompt.txt 完全一致。这次 Trae 生成了真正的三维方块世界点击「Start Game」进入后操作方式为WASD行走、鼠标旋转视角、左键移除方块、右键放置方块、数字键切换方块类型。两个版本没有绝对的优劣2D 版更适合第一个游戏练习如果在世界的纵深中移动是你想法里的核心部分就明确要求 3D 版——关键词「3D」本身就是一个关键的需求描述。::: tip 让它变得不一样 参考图只是起点。改变颜色、主题、文字、图片或交互方式让结果慢慢变成你自己的作品。 :::5. 首版不满意怎么办第一版看起来有偏差、按钮点不动都很正常——几乎没有项目能靠一句话一次成型。正确姿势是看 → 小改 → 再看。新手最容易犯的错误是把所有问题塞进同一条消息当多件事同时变化时你根本分不清是哪次修改产生了哪个结果。遵循一条简单规则每一轮只挑最明显的一个问题。页面看起来不对顶部卡片太高上面那张卡片太高了把它改矮一点。中间主图太小中间那张图太小了把它放大。背景太暗背景太暗了换一个浅一点的颜色。页面行为不对按钮没反应这个按钮点了没反应帮我修一下。游戏角色不动方向键按了没反应帮我修一下移动。说不清问题在哪给当前结果截个图然后说这是现在的效果。你对照参考图把差别最大的地方修一下。你不需要会说「margin」「响应式布局」这类术语。像「页面太挤」「文字看不清」「手机版排得很乱」这种大白话就很有用。修完一个问题再进入下一个。6. 完成验收清单不要满足于一张静态图片。打开结果亲自点击、亲自玩一下检查四项能打开刷新不会出现白屏或报错看得懂别人一眼能认出它是首页、面板还是游戏有响应主按钮或核心控件能用保持可读窗口缩窄时文字与图片不会严重重叠。任一项失败就把你看到的现象准确告诉 Trae让它只修这一个问题。四项全部通过本练习即完成。::: tip 交付一个完整的小成果 登录、支付、聊天群、多人联机都不在今天的课程范围内。一个完成的小页面胜过十个做了一半的开头。 :::作业从一张截图构建你的页面选一张你喜欢的网站或游戏截图交给 AI重建一屏内容保存参考截图生成页面并改进一个你不满意的部分保存修改后的结果截图。展示时把参考图与你的作品并排放置说明你提出的那一次修改。核心要点回顾本课不从代码开始而是从截图开始全程只有四步截图或保存一张图把它交给 AI用一句话描述要做的作品每轮只修正一个可见差异。截图告诉 AI「长什么样」你的话告诉 AI「要做什么」。当第一版出现后点击、观察、再截图是驱动下一轮修改的最好方式。提示词不必像技术文档那样正式——提出简单要求、把项目跑起来、基于眼前看到的结果继续对话你的构建过程就会变得既近又容易。想继续深化可直接对照仓库中的 4 个成品示例研究 AI 的产出结构examples/trae-screenshot-demo、examples/trae-linear-dashboard、examples/trae-block-game、examples/trae-3d-block-game每个目录下都有prompt.txt与完整可运行源码可作为你后续提示词与代码评审的参照样本。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考