Chapter 13
从截图复刻：第一次模仿练习
title: '从截图复刻：第一次模仿练习' description: '像上课一样，跟着老师把一张产品截图变成可以打开的网页或小游戏。'
从截图复刻：第一次模仿练习
前面我们已经试过用一句话让 AI 写程序。这一课，我们换一种更直观的做法：先找一张喜欢的截图，再让 AI 看着它做。
这很像小时候照着图片搭积木。你不需要先说清楚颜色、间距和每个按钮的位置，截图已经替你说明了大半。
本章导读
这一课，我们会从一张真实产品截图出发，做出一个能在浏览器中打开的小项目。你可以选择产品官网、数据看板，也可以做一个简单小游戏。
整节课只练习一件事：找一张喜欢的截图，把它交给 AI，再用自己的话说一句想做什么。
你不用会写代码，也不用提前准备一份完整的需求文档。先让 AI 做出第一版，看到结果以后，再告诉它哪里需要调整。
1. 先选一个想做的作品
动手之前，先想一想：你最想做哪一种东西？
今天的目标不是做一个功能齐全的大产品，而是完成一个能打开、能看懂、能简单操作的页面。范围越小，第一次越容易成功。
我们可以从下面三种作品中选一个：
- 产品官网：有标题、介绍、图片和按钮
- SaaS 数据看板：有侧边栏、数据卡片和图表
- 简单小游戏：可以移动、点击，或者完成一个小目标
找参考图时，不用挑最复杂、最酷的。先看下面三点：
- 一张截图能不能看清页面的主要内容
- 页面里有没有你真正喜欢的地方
- 做完以后，能不能马上看出它像不像
例如，你喜欢某个官网的大标题和配色，就截下首屏；你喜欢某个游戏的方块世界，就截下最有代表性的游戏画面。
::: tip 看看你能做到几成像 模仿得越接近，越说明你能看出画面里的细节，也越会告诉 AI 哪里需要修改。这正是 Vibe Coding 很重要的一项能力。做完以后，把作品和参考图放在一起，看看自己能模仿到五成、七成，还是九成。 :::
::: tip 先做一个页面 第一次练习只选一个页面。不要一上来就做登录、支付、聊天、后台和手机 App。我们先把眼前这一张图做出来。 :::
2. 跟着老师做一个网页
下面老师先完整做一遍。你可以先看过程，等看懂以后，再换成自己的截图操作。
老师在电脑里新建了一个空文件夹，然后用 Trae 打开它。这个项目叫 trae-screenshot-demo，刚开始里面没有网页，也没有代码。
2.1 把参考图交给 Trae
这次选择的是 Framer 官网展示的一张页面。画面里有大标题、导航栏、紫色山景和几个小按钮，主要内容很清楚。
把图片拖进 Trae 的聊天框后，老师没有写很长的提示词，只说：
照着这张图帮我做一个网页。做好后帮我打开看看。这句话已经够用了。图片告诉 Trae 页面大概长什么样，文字告诉它要把图片变成网页。
发送以后，Trae 开始创建文件。这个过程可能要等一会儿。先让它做完，不要连续发送很多条新消息。
2.2 先看第一版
Trae 创建了 index.html、styles.css 和 script.js，随后把网页启动在浏览器里。下面的动图是这次实际生成的结果：
先别急着研究代码，我们只看页面。对照前面的参考图，你会发现：
- 紫色的天空和山景保留下来了
- 页面中央仍然是醒目的大标题
- 顶部有导航，底部也有一排操作入口
- 文字、按钮和图片已经组成了一个完整首屏
它和原图并不完全一样，但已经抓住了最明显的结构和气氛。这就是一个合格的第一版。
2.3 第一版先做到“能看”
第一次生成时，不要因为字体差一点、按钮偏一点就全部推倒重来。先确认网页能打开，再找一个最明显的问题让 Trae 修改。
比如你觉得标题不够大，可以直接说：
中间的标题再大一点。改完以后重新看页面。只要比上一版更接近你的想法，这一轮就有用。
::: tip 用平常的话就可以 你现在是在和 Trae 一起做东西，不是在参加提示词考试。想到什么就先用平常说话的方式告诉它。 :::
3. 自己动手试一遍
现在轮到你了。打开 Trae，新建一个空文件夹，再用 Trae 打开这个文件夹。文件夹名字可以很简单，例如 my-first-page。
准备好以后，按照下面的顺序操作：
- 找一张喜欢的网页或游戏截图
- 点击聊天框旁边的图片按钮，选择这张截图
- 确认图片已经出现在输入框里
- 输入一句简单的话，然后发送
照着这张图帮我做一个网页。
做好后帮我打开看看。这里不需要补充使用什么框架、文件怎么分、代码写在哪里。对于第一次练习，这些事情先让 Trae 自己处理。
如果你只想参考样子，不想使用原来的名称和文案，可以多说一句：
样子参考这张图，名字和内容换成新的。发送后先耐心等它完成。Trae 如果询问是否创建文件或运行项目，确认即可。网页没有自动打开时，就告诉它：
帮我把这个项目启动起来，我想看看效果。看到网页以后，先用十秒钟快速检查：页面有没有打开、主要内容有没有出现、按钮能不能点。暂时不要同时修改五六个地方。
4. 换个方向也能做
同样的方法不只能做产品官网。为了确认它真的可行，老师又新建了两个空项目，分别做了数据看板和方块小游戏。
例子一：SaaS 数据看板
SaaS 产品经常使用数据看板来展示项目进度、销售情况或用户数据。下面这张 Linear 页面里，左边是导航，右边是看板列表，整体结构非常清楚。
课堂参考图：Linear Dashboards
老师把截图放进 Trae，输入：
帮我做一个像这样的数据看板。
数据可以先随便写。Trae 做出了侧边栏、数据卡片和图表。下面是页面打开后的操作动图：
这里的数据不是真实业务数据，但没有关系。第一次练习的重点，是把看板的结构做出来。等页面稳定以后，再把标题、数字和图表内容换成你自己的。
例子二：方块小游戏
如果你对普通网页没有兴趣，也可以拿游戏画面来练习。老师选择了一张 Minecraft 的方块世界截图作为参考。
课堂参考图：Microsoft Learn 的 Minecraft 示例
这次仍然没有写复杂说明，只说：
帮我做一个像这样的方块小游戏。
人物可以走动，也可以放方块。Trae 做出了一个可以玩的网页小游戏。人物可以移动，也可以放置和破坏方块：
先看清楚：上面这个结果是一个 2D 横版游戏。人物只能在平面里移动，画面没有前后远近。因为老师只说了“方块小游戏”，没有告诉 Trae 一定要做成 3D，所以它选择了比较简单的做法。
页面打开后，先按方向键走一走，再点一下画面，看看能不能放方块。人物能走，方块能放，这个 2D 小游戏的第一版就做好了。
再做一个 3D 版本
如果你想做成更接近 Minecraft 的第一人称画面，就要在那句话里加上“3D”。老师又新建了一个空项目，把同一张截图放进去，然后说：
帮我做一个像这样的 3D 方块小游戏。
人物可以走动，可以转动视角，也可以放方块。这次 Trae 做出了一个真正的 3D 方块世界：
点击“开始游戏”后，可以用 WASD 走动，用鼠标转动视角。左键破坏方块，右键放置方块，数字键可以更换方块。
2D 和 3D 没有谁更好。第一次做游戏，2D 更容易完成；如果你就是想在方块世界里前后走动，就要直接告诉 Trae：“我要 3D 的。”
::: tip 做出不一样的版本 参考图只是一个起点。你可以换一种颜色、换一个主题，也可以加入自己喜欢的文字、图片和玩法。每个人选择的内容不同，最后做出来的作品也应该不一样。大胆试一试，让它慢慢变成你的作品。 :::
5. 第一版不好看，怎么办
AI 第一次做得不够像，或者按钮暂时没有反应，都很正常。做项目不是“一句话结束”，而是看一遍、改一点，再看一遍。
新手最容易犯的错误，是一次把所有问题都写进一条消息。要求太多时，你自己也很难判断 Trae 到底改好了哪一项。
更简单的办法是：每一轮只找一个最明显的问题。
页面看起来不对
比如，看到卡片太高，就说：
上面的卡片太高了，矮一点。看到中间的图太小，就说：
中间的图太小了，放大一点。颜色不喜欢，也可以直接说：
背景太暗了，换成浅一点的颜色。页面用起来不对
发现按钮没有反应，就说：
这个按钮点不了，帮我修一下。如果小游戏不能移动，就说：
方向键按了没有反应，帮我修好。不知道问题怎么说
不知道问题在哪里时，可以把现在的页面再截一张图，然后说：
这是现在的效果。你看看哪里不像，再帮我改一下。你不需要知道“边距”“响应式布局”这些专业词。说“太挤了”“字看不清”“手机上乱了”，Trae 也能理解。改好一个问题，再继续下一个，这就是最适合初学者的修改节奏。
6. 课堂检查
作品生成以后，不要只看一眼截图。请你真的打开页面，自己点一遍、玩一遍。
按下面四项检查：
- 能打开：刷新页面后不会出现空白或报错
- 看得懂：别人一眼能知道这是官网、看板还是游戏
- 能操作：主要按钮能点，小游戏的基本操作能用
- 不混乱：把窗口缩窄以后，文字和图片没有严重挤在一起
如果其中一项没有通过，就把你看到的现象告诉 Trae，请它只修这个问题。四项都通过，今天的作品就完成了。
::: tip 先完成一个小作品 登录、付费、多人聊天、联网对战都不是今天的内容。能把一个小页面完整做出来，比开了十个头却一个都没完成更重要。 :::
📚 本章作业
本章小结
今天我们没有从代码开始，而是从一张截图开始。整个过程可以记成四步：
- 截图
- 丢给 AI
- 说一句话
- 哪里不像就改哪里
截图负责告诉 AI“看起来是什么样”，你的话负责告诉 AI“想把它做成什么”。第一版出现以后，再通过点击、观察和截图，一点点把问题说清楚。
提示词不需要像说明书。先说一句简单的话，让作品跑起来，再根据眼前的结果继续聊。你会慢慢发现，做项目并没有想象中那么远。