不会写代码，我画了张 A4 草图扔给豆包，二十分钟后拿到能点的网页

导语

2026 年 9 月，你手里最值钱的，是你手里有没有一样想让 AI 看的东西。

9 月 16 日，火山引擎发布豆包 2.1 Pro 的 0915 版本，API 在火山方舟全量上线，豆包 App 与 TRAE 同步接入。这次更新的主能力只有一个：看图写代码。草图、录屏、设计图，你平时怎么跟人交代活儿的，就怎么给它。

这一篇不讲虚的，从原理到实践，带你把一个草图变成能点的网页。相关内容可移步官方文档与社区进一步查阅。

过去三十年，人想使唤计算机，只有一条路：人去学机器的语言。先学编程语言，后来不用学代码了，又开始学写提示词。现在方向反过来了------机器看懂人的表达。

像环球网报道的开源游戏 Luanti，代码仓库约 38.7 万行，里面躺着 1000 个真实历史 Issue。这个模型用了不到 36 小时，把其中 83% 修到了可以合并进主分支的标准。

据 21 世纪经济报道，图像和视频推理的 Token 消耗，比上一代降了 30% 以上。Token 你就理解成看图要花的算力钱------看同样的图，账单便宜了三成。

成本降三成，小公司和个人才能把它揉进日常工作流，而不是当展览看。

中国新闻网举的例子更接地气：一个没有任何文档的老 ERP 系统，工程师录了一段操作视频，配上几张手绘草图，模型就给它长出了移动端页面。

我的学员蜗牛，徐州的一名小学英语老师，没有任何编程背景。今年在实战营里，她花了两个晚上，做出了一个给三年级学生用的英语连词成句生成器。她最费劲的环节，不是不会做，是把脑子里那张「界面长什么样」的图，硬翻译成几百字的文字描述。

放到今天，她只需要把那张图画出来，拍一张，发过去。少掉的，正是「把想法翻译成机器能懂的语言」这整道工序。

有人说：看图写代码就是个演示用的噱头，正经开发还得人写代码。

这话对了一半。大系统的架构设计、业务判断、上线决策，眼下还是人的活。但绝大多数想用 AI 的人，卡的根本不是这些。他们卡在想给家里老人做个吃药提醒页，想给班上做个值日表，想给小店做个记账表。这些活，看图写代码已经能接住了。

表达能力的权重在上升，翻译能力的权重在下降。

第零步，想清楚你要做的东西。 拿一张纸，回答三个问题：给谁用，解决什么事，在什么设备上用。比如，给三年级学生做连词成句练习，手机上用。

第一步，下载安装豆包工作。 9 月 17 日更新的桌面版就能用，现在有活动，免费领 30 天订阅，大学生完成认证还能再领 3 个月。手机装豆包 App 也行，路上有灵感直接拍图发过去。

第二步，选对模型。 在模型选择里找到「豆包 2.1 Pro（0915 新版）」，认准括号里这几个字，旧版看图能力差一截。更喜欢写代码的工具，就去 Trae 下载 TRAE，中国版 9 月 16 日当天（Day 0）就把新模型内置进去，9 月 24 日之前个人版调用限时 1 折。

第三步，画你的草图。 全程里最像「技术活」的一步，要求低到离谱：框要画大，字要写清楚，一屏只画一个页面。你画一个大方框代表页面，里面画两个小方框代表输入框，一个圆角块代表按钮，旁边标注「输入单词」「生成题目」「重新换一组」。这已经是满分草图了。

第四步，四句话派活。 把草图拍照发进对话框，配上这四句话，直接抄：

bash 复制代码

你是一名网页开发工程师。
材料 我发你的手绘草图就是页面的完整布局，按它做，别自作主张加东西。
规则 输入框必须能真的输入，按钮必须能真的点，数据先存在浏览器本地。
验收 做完在浏览器里打开跑一遍，把每个能点的地方逐个试给我看。

第一遍能对七成到八成，剩下的靠下一轮。

第五步，让它跑，别打断。 发出去之后它自己拆任务、写代码、跑起来验证，全程不用你盯。别催，别中途插话。

第六步，验收。 它说做完了，先别急着鼓掌。每个按钮都点，每个输入框都敲。哪里不对，截图圈出来发回去，写一句话。来回改三轮很正常。

第七步，交回给用的人。 东西好不好，用户说了算。蜗牛当年那个生成器，就是班上孩子试玩后，她才知道哪里要改。