最近技术社区里流传着一类很有意思的演示人拿手机拍一张白板草图GPT-4就能直接补全成一套可以运行的 HTML 页面。看多了之后你会发现这已经不是AI 会写代码这么简单的事了而是交互方式的底层转变——生成式AI 不再只依赖你在对话框里敲指令它开始理解你随手画的线是什么意思。围绕 GPT-4、白板手绘、AI实时生成这三件事拼起来的完整流程本质上是把人类最原始的表达方式画图、比划、圈重点和模型的理解能力接在了一起。这篇文章我会从产品和技术两个角度拆开讲。先聊聊白板手绘这个输入方式为什么比纯文字高效再说 GPT-4 看懂草图背后的机制是什么最后给出一套完整可复现的实操流程、参数配置以及我实际踩过的坑。适合产品经理、设计师、前端工程师以及所有对生成式AI交互形态感兴趣的人阅读。文章里的方案不依赖特定硬件手边有白板和手机就能跟着走一遍。1. 白板手绘与 AI 实时生成这到底在解决什么问题1.1 为什么是白板而不是纯文字 prompt先想一个问题你平时怎么向别人描述一个界面大概率会说左边是导航栏右边是内容区顶部有一个大标题底部放两个按钮。这句话写出来很啰嗦而且每个人听到后的理解都不一样。但如果你拿笔在白板上画一个大概的框架再加两个箭头对方三秒钟就懂了。人类在设计沟通这件事上天然是用画而不是写来传达空间信息的这比文字描述的信息密度高太多。放到生成式AI 的场景里同样是这个逻辑。用纯文字让 GPT-4 生成一个页面你可能要写四五行的描述来交代布局、配色、层级、元素关系还得祈祷它理解的是你想要的那种感觉。但如果你直接把草图给它信息就一次性到位了。我自己的体验是文字 prompt 描述布局时模型容易自由发挥加很多你没想要的东西而给它一张草图它的发挥空间被约束住了生成的界面会明显更接近你脑子里的那个样子。为什么白板这种形式特别合适第一它容错率高。白板上的线条不需要多精确画歪了也没关系模型理解的是整体关系不是像素级的精准。第二它是团队协作的自然媒介。产品讨论、需求评审、方案头脑风暴时白板几乎是标配你不需要额外学习任何工具就能上手。第三白板手绘天然适合表达半成品想法——很多需求一开始就是模糊的画几笔能快速定方向而 AI 可以帮你把模糊的部分补全。1.2 实时生成带来的交互闭环转变过去用生成式AI典型场景是一个人低头对着手机或电脑敲 prompt等一段文字出来再复制粘贴到别处继续加工。这是典型的离线思考模式你一个人想好要什么再让 AI 生成。而白板手绘 实时生成把这件事变成了现场协作模式你一边画AI 一边生成大家围着白板就能聊方案。这个转变看起来很轻描淡写实际影响非常大。我举一个真实场景需求评审会上产品经理在白板上画了一个登录流程包括手机号输入、验证码、用户协议勾选旁边还画了个小弹窗说这里要加新用户引导。以前这种讨论只能形成文字纪要开发拿到纪要后再去翻译成设计稿中间损耗特别大。现在呢拍照上传GPT-4 直接把整个页面和交互逻辑生成出来现场就能看到雏形问题当场暴露当场修改。这套玩法的本质是把 AI 从一个聊天机器人变成了即时翻译器原型工具。它适合的人群也很明确产品经理可以自己画线框图生成原型给开发看设计师可以用草图快速验证视觉布局前端工程师可以把白板草图作为需求输入直接生成初版代码就连不会写代码的业务人员也能用这种方式把自己的想法变成一个看得见摸得着的东西。我身边有不少人第一次试完这种交互后第一反应都是回不去了——当你习惯了画一笔、圈一下、AI 就生成的节奏再回头去写那种长篇大论的 prompt会觉得非常低效。2. GPT-4 为什么能看懂手绘草图背后的关键能力拆解2.1 图像理解的基本逻辑从像素到布局语义很多人好奇GPT-4 看一张白板照片它到底看到了什么是像人一样看到线条、形状、文字还是只是在做图像匹配要理解这件事得先知道多模态模型的基本处理方式。GPT-4 这类支持图像输入的模型会把图片切成若干视觉块然后转换成与文本统一的 token 序列再与文本一起送入模型处理。简单说它看的不是一张完整照片而是一组被拆解后的视觉单元模型在训练时见过海量的界面截图、图表、草图、网页设计图所以它知道一个方框里面有几根横线大概率是一个输入框一个大圆角矩形放在页面中央大概率是一个按钮顶部一排小方块大概率是导航栏。这就是为什么它对白板草图的理解能力远超过传统 OCR——它不是在逐字识别你写了什么而是在理解空间布局和物体关系。你把两个矩形并排画它会理解为双栏布局你在矩形之间画个箭头它会理解为跳转关系你用红笔在某个区域画个圈它知道这个区域是重点。当然它也不是万能的。它在复杂透视下的理解会变差比如你斜着拍白板导致矩形变成梯形它可能判断不出那是个矩形它对密集手写文字的识别不如专用 OCR 准确如果线条太细、颜色太浅、背景有大量影子识别效果会大打折扣。这些都是实操中一定会遇到的问题后面我专门有章节讲怎么处理。2.2 从看懂到生成多轮对话与指令跟随能看懂草图只是第一步真正让它变成生产力的是对话能力。GPT-4 是一个对话模型这意味着同一会话里它会记住之前的上下文。放到白板场景里这个能力带来了一个关键动作迭代。你可以先拍一整块白板让它生成一个完整页面然后你又在同一张草图上用红笔圈了一个区域重新拍照上传告诉它只改这块把按钮改成圆角颜色换掉它会在保留上下文中已建立的页面结构和前面生成的内容只对你指出的部分做调整。这种选定区域局部指令的交互模式基本等同于你给开发人员提修改意见。从技术实现角度看多轮对话的上下文管理并不复杂。每次请求时把历史消息和新的图像消息一起放进 messages 数组即可。但这里存在一个实际工程问题图像 token 很贵也很占用上下文窗口。如果每一轮都重新上传整张高清大图很快就把上下文撑爆了。更合理的做法是只有第一次上传完整草图后续的修改请求只上传裁剪后的局部图片或者干脆不上传图片只发文字指令把按钮改成圆角——因为模型已经记住了之前的页面结构和代码内容。这就是我在实操中非常推荐的一个习惯先让模型基于草图生成一版结果之后的迭代尽量用文字描述配合局部裁剪图。这既能节省 context 空间也能大幅提高修改的精准度因为裁剪后的局部图像噪声更少。2.3 提示词设计把手绘意图翻译成生成指令很多新手在第一次尝试时直接扔一张白板照片给 GPT-4然后说生成一个页面结果效果不稳定有时候好有时候差。问题往往不在模型能力而在提示词设计。我的做法是把看图和生成拆成两个显式步骤。先让模型描述它看到了什么再让它基于描述去生成。这样可以强制模型先建立对画面结构的准确理解减少它跳过理解直接生成带来的幻觉。实际效果非常明显加了这一步之后生成结果与草图的匹配度显著提升。这里给一个通用模板适配白板草图生成网页的场景你是一名资深前端工程师。我会给你一张白板手绘草图请先用自己的话简要描述图中包含了哪些元素、各元素的布局位置和逻辑关系。描述完毕后基于这张草图生成一个完整可运行的 HTML 页面包含内联 CSS 和必要的 JavaScript。要求中文界面结构清晰样式尽量贴近草图的布局意图不要添加草图中不存在的多余模块代码直接放在一个 HTML 文件中可直接运行。为什么先描述后生成有效因为模型在生成代码时前一段描述相当于它给自己写的理解备忘约束了后续生成的框架。另外把输出格式用可直接运行的单个 HTML 文件来约束比让它自由发挥要稳定得多。对于其他场景比如生成流程图、生成测试用例、生成方案文档都可以套用同样的结构只是替换角色设定和输出约束即可。3. 实操从白板草图到可用页面完整搭建一套实时生成环境3.1 设备与工具准备先说结论这套流程不需要昂贵的硬件常规办公条件就够了。我用过三种组合各有利弊。第一种是实体白板手机拍照。最自然适合团队讨论后随手记录但要注意拍摄角度和光线。第二种是实体白板固定摄像头适合需要实时展示的场景比如把摄像头对准白板画一笔AI 生成一版但摄像头对焦和画质要求较高。第三种是平板数字画笔我个人最推荐因为平板屏幕本身是平的、光线均匀、手写笔迹清晰直接把屏幕截图上传识别成功率比拍实体白板高很多。笔的选择也有讲究。推荐用粗头白板笔线条越粗模型识别越容易。颜色方面主体内容用黑色重点区域用红色辅助说明用蓝色。这套颜色规则不是给模型看的是给你自己后期沟通用的——红色圈选区域在截图上特别醒目。软件侧的准备更简单。你需要一个支持图像输入的 GPT-4 API 接入方式可以直接用官方 API也可以用各种封装好的客户端。如果只是想体验流程甚至不需要写代码直接用支持图片上传的对话客户端就能完成但如果想体验实时生成需要简单写一点代码或使用自动化工具。API 调用地址、模型选择这些细节以你实际拿到的服务配置为准。3.2 一套可以直接抄的实操流程直接用一个我反复演示过的案例在白板上画一个登录页然后让 AI 生成完整代码。第一步画草图。在白板中间画一个大长方形代表页面区域。顶部画一个横条代表导航栏写logo两个字。页面中间画一个大标题占位旁边写欢迎登录。标题下方画两个横条矩形一个标注账号一个标注密码。再往下画一个更宽的大圆角矩形标注登录按钮。底部画一行小字忘记密码。画完之后用红笔在登录按钮周围画一个圈旁边写主色调蓝色。第二步拍照或截图。手机拍照时注意让手机平行于白板正面拍摄不要倾斜避免影子落到白板上。平板则直接截图省去拍照环节。上传前最好把图片裁一下只保留有用区域把无关的桌面、背景裁掉。第三步把图片和提示词一起发送给模型用上一节那个模板。我自己测试时用的提示词加了一句账号输入框和密码输入框需要显示清晰的边框——因为草图里横条矩形不太明显模型有时候会忽略掉。生成结果出来之后你会看到一个完整的 HTML 页面包含样式和交互逻辑。注意观察它在哪些地方忠实还原了草图、哪些地方自由发挥了。第四步进入迭代环节。如果生成的页面里登录按钮颜色不是你要的蓝色你可以只把那一小块截图裁剪出来附上一句话把按钮改成蓝色圆角加大再发过去。模型会在保留原结构的基础上只改这一个点。除了网页生成这套流程也适用于生成 Markdown 文档、生成表单、生成简单的数据可视化图表——区别只在提示词里把你好你是一名资深前端工程师换成对应角色即可。3.3 让生成结果更可控的关键参数与配置实操中最影响结果稳定性的其实是几个参数的配置。我用一张表总结下来方便你直接抄。参数建议值使用场景原因temperature0.2~0.4白板草图转页面、转代码降低随机性让输出更贴近草图意图temperature0.6~0.8创意方案、文案生成保留一定的发散性和联想能力max_tokens3000~4000生成完整页面代码单页 HTML 代码量较大设小了会被截断streamtrue实时生成的展示场景流式输出可以让用户边看边等体验远好于干等全部输出detaillow 或 auto草图上传草图本身线条简单过高的细节分辨率反而浪费上下文特别想强调两个点。第一是 temperature。很多人忽略它但白板生成这种场景恰恰需要低随机性。我试过在 temperature0.7 的情况下同一张草图生成两次两个版本差异大得惊人一次生成了带侧边栏的后台界面一次生成了极简居中布局而草图明明只是画了个居中布局。把温度降到 0.2~0.3 之后两次结果就开始趋于一致了。第二是图像压缩。上传前把图片尺寸缩到 1024~1536px 范围内能显著降低 API 调用成本同时识别效果几乎无损。因为白板草图大部分是大面积留白和粗线条细节信息远没有照片多。如果你用拍照方式获取草图记得压缩后再上传。4. 翻车实录与问题排查手绘交互最常见的问题4.1 草图识别不准的3个常见原因第一拍摄角度和影子。这是实体白板场景最大的坑。手机稍微倾斜一点白板上的矩形就可能变成梯形圆角按钮变成椭圆。模型会竭力理解但确实会出错。解决方法是把手机举正或者用平板截图。如果必须在实体白板前操作我建议把白板固定在垂直墙面人正对白板拍摄尽量避免侧光造成的手影落在画面里。第二线条太细太浅。用过干掉的马克笔、画到后来笔锋变钝的人都知道浅色的线条在白板照片里几乎是透明的。模型的视觉理解会在这种低对比区域失效。解决方法是换粗头白板笔并且保持线条在 5mm 以上的宽度。第三元素密度过高。一张白板画了几十个布局元素、十几处注释、无数个小箭头别说模型人眼看起来都费劲。模型在高密度小元素场景下容易混淆主从关系把注释当作页面元素或者把箭头理解成了布局的一部分。解决方法是划分区域一张白板分上中下三个区域分别拍照一块一块喂给模型。4.2 生成结果不稳定、时好时坏怎么调如果你发现同一张草图生成的结果时好时坏别急着怀疑模型能力先检查三件事。第一提示词有没有把描述草图和生成页面分开。如果没有模型可能跳过理解直接生成失败概率显著上升。第二tempature 是不是太高。参考表里的建议值调到 0.2~0.3。第三是不是一次让模型做了太多事。比如你既让它生成页面代码又让它写响应式适配又让它顺便给出交互逻辑注释模型在多项任务之间会顾此失彼。逐步拆解需求一次只让模型干一件事结果会稳定很多。另外经验是如果一次生成的结果不理想不要反复用同一段话重新发送那样大概率得到的是同样不理想的结果。更有效的做法是换一个明确的修改指令比如不要使用深色背景改用浅色背景、把左侧栏删掉改成顶部导航让模型在正确框架上做局部修正。4.3 实时性跟不上从拍照上传到边画边生成的优化思路很多人一上来就想实现边画边生成的高阶版本结果发现体验很卡。我建议分阶段演进先把基础闭环跑通再追求实时性。基础版的延迟主要来自三个地方图片上传时间、模型推理时间、输出展示时间。其中最可感知的是推理时间和输出展示。解决推理时间的思路是简化上下文和减少输出长度让模型只输出核心代码或核心内容。解决输出展示的思路是开启流式输出把内容以打字机效果逐字展示用户的心理等待时间大大降低。如果你想要进一步接近实时可以做两件事。第一把画图的动作变成截取目标区域而不是上传整块白板。局部图片更小上传更快模型理解也更聚焦。第二使用异步队列处理多张图的生成请求避免前一个请求卡住后面所有请求。这些工程优化不复杂但需要你另外动手写一点代码建议等基础流程玩顺了之后再考虑。4.4 常见问题速查表问题可能原因解决方案模型把注释文字也生成进了页面没有区分草图主体和注释上传前把注释裁剪掉或在提示词中明确忽略标注文字布局元素明显错位草图元素密度过高、拍摄角度倾斜拆分区域分块上传保证垂直拍摄两次生成结果差异很大temperature 过高把 temperature 调到 0.2~0.3输出被截断max_tokens 不够调大到 3000~4000同一关键词多次修改无效上下文过短模型忘了之前内容检查 messages 是否保留了对话历史只裁剪需要修改的局部图重发识别不了浅色线条笔太细或笔快没水换粗头马克笔加大线条粗细和颜色深度5. 这套交互还能往哪走白板生成只是一个开始5.1 从页面生成到流程生成白板手绘 GPT-4 的组合不只能生成页面代码。我在实际项目里试过另一个方向把业务流程画在白板上包括判断分支、异常回路、责任人标注然后让 AI 生成结构化的流程文档和测试用例。这套思路适合谁项目推进中需要写流程文档、画时序图、生成验收清单的人。操作方式和生成页面一模一样只是把提示词里的角色从前端工程师换成高级业务分析师把输出约束改成生成 Markdown 格式的流程文档包含步骤说明、分支条件、异常处理清单。白板给出的信息是空间化的分支与循环可以用箭头大大方方画出来AI 对这种表达的理解能力相当不错。更有价值的组合是白板画架构图、表格、时序图草图画一个系统模块关系图让 AI 生成文档说明画一个表格结构让 AI 生成 CSV 数据样本。这些操作的核心逻辑都是同一件事——用视觉信息替代文字描述让 AI 在一个更明确的信息框架里工作。5.2 从单人白板到协作白板另一个值得关注的方向是多人协作白板与 AI 生成的结合。现在的协作白板工具已经支持多人同时在线画图如果再接入生成式AI就变成了一种非常自然的会议工作台每个人都可以画自己的部分AI 实时把所有人的草图合并成完整方案。比如产品、设计、开发三个角色围着一块虚拟白板产品画需求流程设计画界面布局开发在旁边标注技术约束。AI 会自动综合这些信息生成一个包含需求、设计说明、开发要点的综合文档。整个过程不需要任何一个人去写需求文档因为草图本身就是需求AI 变成了那个读图归纳的人。这个方向目前还在早期但我觉得它切中了白板交互最大的痛点——信息还原。很多会议白板讨论完就擦掉了没人有时间整理成文档。而 AI 实时生成可以把每一版草图都转成结构化记录直接沉淀下来。对团队和个人来说这是实打实的效率提升。5.3 给你的落地建议如果你看完文章想自己动手试试我建议从最小闭环开始找一块白板没有就一张大白纸画一个你最熟悉的页面比如你正在做的产品的首页。拍照后按下文提示词模板发出去先看生成结果。不要一上来就追求完美效果先感受图像理解生成这个流程再逐步加入温度参数、提示词优化、局部迭代。等基础流程跑顺了再试试把流程图、表格也纳入进来或者把白板换成平板、把拍照换成截图、把单轮提问换成多轮局部修改。你大概率会发现当你把草图和 GPT-4 连在一起之后真正受限的不是模型的理解能力而是你自己画图时敢不敢把想法画出来——毕竟画错了可以改但想法没有载体才是最可惜的。最后再说一点个人体会。真正把这个流程用起来之后我最大的感受是它对沟通效率的改善是立竿见影的。以前聊需求是你说我记会后翻译信息在传递中不断失真现在是我画你看AI 当场翻译模糊的想法当场变成具体的东西。踩过几次坑之后我现在画草图固定两个习惯一是一定用红笔圈出重点区域二是关键文字尽量写大。这两个小习惯让后续识别成功率提升非常明显。如果白板笔找不到了我通常就用黑色粗记号笔加红色高亮笔一样够用。建议你直接从这一步开始养成习惯会少走很多弯路。 
长河君 · 2026/11/2 17:45:53 · 阅读 1.2k 从白板草图到HTML页面：GPT-4实时生成与手绘交互实战
最近技术社区里流传着一类很有意思的演示人拿手机拍一张白板草图GPT-4就能直接补全成一套可以运行的 HTML 页面。看多了之后你会发现这已经不是AI 会写代码这么简单的事了而是交互方式的底层转变——生成式AI 不再只依赖你在对话框里敲指令它开始理解你随手画的线是什么意思。围绕 GPT-4、白板手绘、AI实时生成这三件事拼起来的完整流程本质上是把人类最原始的表达方式画图、比划、圈重点和模型的理解能力接在了一起。这篇文章我会从产品和技术两个角度拆开讲。先聊聊白板手绘这个输入方式为什么比纯文字高效再说 GPT-4 看懂草图背后的机制是什么最后给出一套完整可复现的实操流程、参数配置以及我实际踩过的坑。适合产品经理、设计师、前端工程师以及所有对生成式AI交互形态感兴趣的人阅读。文章里的方案不依赖特定硬件手边有白板和手机就能跟着走一遍。1. 白板手绘与 AI 实时生成这到底在解决什么问题1.1 为什么是白板而不是纯文字 prompt先想一个问题你平时怎么向别人描述一个界面大概率会说左边是导航栏右边是内容区顶部有一个大标题底部放两个按钮。这句话写出来很啰嗦而且每个人听到后的理解都不一样。但如果你拿笔在白板上画一个大概的框架再加两个箭头对方三秒钟就懂了。人类在设计沟通这件事上天然是用画而不是写来传达空间信息的这比文字描述的信息密度高太多。放到生成式AI 的场景里同样是这个逻辑。用纯文字让 GPT-4 生成一个页面你可能要写四五行的描述来交代布局、配色、层级、元素关系还得祈祷它理解的是你想要的那种感觉。但如果你直接把草图给它信息就一次性到位了。我自己的体验是文字 prompt 描述布局时模型容易自由发挥加很多你没想要的东西而给它一张草图它的发挥空间被约束住了生成的界面会明显更接近你脑子里的那个样子。为什么白板这种形式特别合适第一它容错率高。白板上的线条不需要多精确画歪了也没关系模型理解的是整体关系不是像素级的精准。第二它是团队协作的自然媒介。产品讨论、需求评审、方案头脑风暴时白板几乎是标配你不需要额外学习任何工具就能上手。第三白板手绘天然适合表达半成品想法——很多需求一开始就是模糊的画几笔能快速定方向而 AI 可以帮你把模糊的部分补全。1.2 实时生成带来的交互闭环转变过去用生成式AI典型场景是一个人低头对着手机或电脑敲 prompt等一段文字出来再复制粘贴到别处继续加工。这是典型的离线思考模式你一个人想好要什么再让 AI 生成。而白板手绘 实时生成把这件事变成了现场协作模式你一边画AI 一边生成大家围着白板就能聊方案。这个转变看起来很轻描淡写实际影响非常大。我举一个真实场景需求评审会上产品经理在白板上画了一个登录流程包括手机号输入、验证码、用户协议勾选旁边还画了个小弹窗说这里要加新用户引导。以前这种讨论只能形成文字纪要开发拿到纪要后再去翻译成设计稿中间损耗特别大。现在呢拍照上传GPT-4 直接把整个页面和交互逻辑生成出来现场就能看到雏形问题当场暴露当场修改。这套玩法的本质是把 AI 从一个聊天机器人变成了即时翻译器原型工具。它适合的人群也很明确产品经理可以自己画线框图生成原型给开发看设计师可以用草图快速验证视觉布局前端工程师可以把白板草图作为需求输入直接生成初版代码就连不会写代码的业务人员也能用这种方式把自己的想法变成一个看得见摸得着的东西。我身边有不少人第一次试完这种交互后第一反应都是回不去了——当你习惯了画一笔、圈一下、AI 就生成的节奏再回头去写那种长篇大论的 prompt会觉得非常低效。2. GPT-4 为什么能看懂手绘草图背后的关键能力拆解2.1 图像理解的基本逻辑从像素到布局语义很多人好奇GPT-4 看一张白板照片它到底看到了什么是像人一样看到线条、形状、文字还是只是在做图像匹配要理解这件事得先知道多模态模型的基本处理方式。GPT-4 这类支持图像输入的模型会把图片切成若干视觉块然后转换成与文本统一的 token 序列再与文本一起送入模型处理。简单说它看的不是一张完整照片而是一组被拆解后的视觉单元模型在训练时见过海量的界面截图、图表、草图、网页设计图所以它知道一个方框里面有几根横线大概率是一个输入框一个大圆角矩形放在页面中央大概率是一个按钮顶部一排小方块大概率是导航栏。这就是为什么它对白板草图的理解能力远超过传统 OCR——它不是在逐字识别你写了什么而是在理解空间布局和物体关系。你把两个矩形并排画它会理解为双栏布局你在矩形之间画个箭头它会理解为跳转关系你用红笔在某个区域画个圈它知道这个区域是重点。当然它也不是万能的。它在复杂透视下的理解会变差比如你斜着拍白板导致矩形变成梯形它可能判断不出那是个矩形它对密集手写文字的识别不如专用 OCR 准确如果线条太细、颜色太浅、背景有大量影子识别效果会大打折扣。这些都是实操中一定会遇到的问题后面我专门有章节讲怎么处理。2.2 从看懂到生成多轮对话与指令跟随能看懂草图只是第一步真正让它变成生产力的是对话能力。GPT-4 是一个对话模型这意味着同一会话里它会记住之前的上下文。放到白板场景里这个能力带来了一个关键动作迭代。你可以先拍一整块白板让它生成一个完整页面然后你又在同一张草图上用红笔圈了一个区域重新拍照上传告诉它只改这块把按钮改成圆角颜色换掉它会在保留上下文中已建立的页面结构和前面生成的内容只对你指出的部分做调整。这种选定区域局部指令的交互模式基本等同于你给开发人员提修改意见。从技术实现角度看多轮对话的上下文管理并不复杂。每次请求时把历史消息和新的图像消息一起放进 messages 数组即可。但这里存在一个实际工程问题图像 token 很贵也很占用上下文窗口。如果每一轮都重新上传整张高清大图很快就把上下文撑爆了。更合理的做法是只有第一次上传完整草图后续的修改请求只上传裁剪后的局部图片或者干脆不上传图片只发文字指令把按钮改成圆角——因为模型已经记住了之前的页面结构和代码内容。这就是我在实操中非常推荐的一个习惯先让模型基于草图生成一版结果之后的迭代尽量用文字描述配合局部裁剪图。这既能节省 context 空间也能大幅提高修改的精准度因为裁剪后的局部图像噪声更少。2.3 提示词设计把手绘意图翻译成生成指令很多新手在第一次尝试时直接扔一张白板照片给 GPT-4然后说生成一个页面结果效果不稳定有时候好有时候差。问题往往不在模型能力而在提示词设计。我的做法是把看图和生成拆成两个显式步骤。先让模型描述它看到了什么再让它基于描述去生成。这样可以强制模型先建立对画面结构的准确理解减少它跳过理解直接生成带来的幻觉。实际效果非常明显加了这一步之后生成结果与草图的匹配度显著提升。这里给一个通用模板适配白板草图生成网页的场景你是一名资深前端工程师。我会给你一张白板手绘草图请先用自己的话简要描述图中包含了哪些元素、各元素的布局位置和逻辑关系。描述完毕后基于这张草图生成一个完整可运行的 HTML 页面包含内联 CSS 和必要的 JavaScript。要求中文界面结构清晰样式尽量贴近草图的布局意图不要添加草图中不存在的多余模块代码直接放在一个 HTML 文件中可直接运行。为什么先描述后生成有效因为模型在生成代码时前一段描述相当于它给自己写的理解备忘约束了后续生成的框架。另外把输出格式用可直接运行的单个 HTML 文件来约束比让它自由发挥要稳定得多。对于其他场景比如生成流程图、生成测试用例、生成方案文档都可以套用同样的结构只是替换角色设定和输出约束即可。3. 实操从白板草图到可用页面完整搭建一套实时生成环境3.1 设备与工具准备先说结论这套流程不需要昂贵的硬件常规办公条件就够了。我用过三种组合各有利弊。第一种是实体白板手机拍照。最自然适合团队讨论后随手记录但要注意拍摄角度和光线。第二种是实体白板固定摄像头适合需要实时展示的场景比如把摄像头对准白板画一笔AI 生成一版但摄像头对焦和画质要求较高。第三种是平板数字画笔我个人最推荐因为平板屏幕本身是平的、光线均匀、手写笔迹清晰直接把屏幕截图上传识别成功率比拍实体白板高很多。笔的选择也有讲究。推荐用粗头白板笔线条越粗模型识别越容易。颜色方面主体内容用黑色重点区域用红色辅助说明用蓝色。这套颜色规则不是给模型看的是给你自己后期沟通用的——红色圈选区域在截图上特别醒目。软件侧的准备更简单。你需要一个支持图像输入的 GPT-4 API 接入方式可以直接用官方 API也可以用各种封装好的客户端。如果只是想体验流程甚至不需要写代码直接用支持图片上传的对话客户端就能完成但如果想体验实时生成需要简单写一点代码或使用自动化工具。API 调用地址、模型选择这些细节以你实际拿到的服务配置为准。3.2 一套可以直接抄的实操流程直接用一个我反复演示过的案例在白板上画一个登录页然后让 AI 生成完整代码。第一步画草图。在白板中间画一个大长方形代表页面区域。顶部画一个横条代表导航栏写logo两个字。页面中间画一个大标题占位旁边写欢迎登录。标题下方画两个横条矩形一个标注账号一个标注密码。再往下画一个更宽的大圆角矩形标注登录按钮。底部画一行小字忘记密码。画完之后用红笔在登录按钮周围画一个圈旁边写主色调蓝色。第二步拍照或截图。手机拍照时注意让手机平行于白板正面拍摄不要倾斜避免影子落到白板上。平板则直接截图省去拍照环节。上传前最好把图片裁一下只保留有用区域把无关的桌面、背景裁掉。第三步把图片和提示词一起发送给模型用上一节那个模板。我自己测试时用的提示词加了一句账号输入框和密码输入框需要显示清晰的边框——因为草图里横条矩形不太明显模型有时候会忽略掉。生成结果出来之后你会看到一个完整的 HTML 页面包含样式和交互逻辑。注意观察它在哪些地方忠实还原了草图、哪些地方自由发挥了。第四步进入迭代环节。如果生成的页面里登录按钮颜色不是你要的蓝色你可以只把那一小块截图裁剪出来附上一句话把按钮改成蓝色圆角加大再发过去。模型会在保留原结构的基础上只改这一个点。除了网页生成这套流程也适用于生成 Markdown 文档、生成表单、生成简单的数据可视化图表——区别只在提示词里把你好你是一名资深前端工程师换成对应角色即可。3.3 让生成结果更可控的关键参数与配置实操中最影响结果稳定性的其实是几个参数的配置。我用一张表总结下来方便你直接抄。参数建议值使用场景原因temperature0.2~0.4白板草图转页面、转代码降低随机性让输出更贴近草图意图temperature0.6~0.8创意方案、文案生成保留一定的发散性和联想能力max_tokens3000~4000生成完整页面代码单页 HTML 代码量较大设小了会被截断streamtrue实时生成的展示场景流式输出可以让用户边看边等体验远好于干等全部输出detaillow 或 auto草图上传草图本身线条简单过高的细节分辨率反而浪费上下文特别想强调两个点。第一是 temperature。很多人忽略它但白板生成这种场景恰恰需要低随机性。我试过在 temperature0.7 的情况下同一张草图生成两次两个版本差异大得惊人一次生成了带侧边栏的后台界面一次生成了极简居中布局而草图明明只是画了个居中布局。把温度降到 0.2~0.3 之后两次结果就开始趋于一致了。第二是图像压缩。上传前把图片尺寸缩到 1024~1536px 范围内能显著降低 API 调用成本同时识别效果几乎无损。因为白板草图大部分是大面积留白和粗线条细节信息远没有照片多。如果你用拍照方式获取草图记得压缩后再上传。4. 翻车实录与问题排查手绘交互最常见的问题4.1 草图识别不准的3个常见原因第一拍摄角度和影子。这是实体白板场景最大的坑。手机稍微倾斜一点白板上的矩形就可能变成梯形圆角按钮变成椭圆。模型会竭力理解但确实会出错。解决方法是把手机举正或者用平板截图。如果必须在实体白板前操作我建议把白板固定在垂直墙面人正对白板拍摄尽量避免侧光造成的手影落在画面里。第二线条太细太浅。用过干掉的马克笔、画到后来笔锋变钝的人都知道浅色的线条在白板照片里几乎是透明的。模型的视觉理解会在这种低对比区域失效。解决方法是换粗头白板笔并且保持线条在 5mm 以上的宽度。第三元素密度过高。一张白板画了几十个布局元素、十几处注释、无数个小箭头别说模型人眼看起来都费劲。模型在高密度小元素场景下容易混淆主从关系把注释当作页面元素或者把箭头理解成了布局的一部分。解决方法是划分区域一张白板分上中下三个区域分别拍照一块一块喂给模型。4.2 生成结果不稳定、时好时坏怎么调如果你发现同一张草图生成的结果时好时坏别急着怀疑模型能力先检查三件事。第一提示词有没有把描述草图和生成页面分开。如果没有模型可能跳过理解直接生成失败概率显著上升。第二tempature 是不是太高。参考表里的建议值调到 0.2~0.3。第三是不是一次让模型做了太多事。比如你既让它生成页面代码又让它写响应式适配又让它顺便给出交互逻辑注释模型在多项任务之间会顾此失彼。逐步拆解需求一次只让模型干一件事结果会稳定很多。另外经验是如果一次生成的结果不理想不要反复用同一段话重新发送那样大概率得到的是同样不理想的结果。更有效的做法是换一个明确的修改指令比如不要使用深色背景改用浅色背景、把左侧栏删掉改成顶部导航让模型在正确框架上做局部修正。4.3 实时性跟不上从拍照上传到边画边生成的优化思路很多人一上来就想实现边画边生成的高阶版本结果发现体验很卡。我建议分阶段演进先把基础闭环跑通再追求实时性。基础版的延迟主要来自三个地方图片上传时间、模型推理时间、输出展示时间。其中最可感知的是推理时间和输出展示。解决推理时间的思路是简化上下文和减少输出长度让模型只输出核心代码或核心内容。解决输出展示的思路是开启流式输出把内容以打字机效果逐字展示用户的心理等待时间大大降低。如果你想要进一步接近实时可以做两件事。第一把画图的动作变成截取目标区域而不是上传整块白板。局部图片更小上传更快模型理解也更聚焦。第二使用异步队列处理多张图的生成请求避免前一个请求卡住后面所有请求。这些工程优化不复杂但需要你另外动手写一点代码建议等基础流程玩顺了之后再考虑。4.4 常见问题速查表问题可能原因解决方案模型把注释文字也生成进了页面没有区分草图主体和注释上传前把注释裁剪掉或在提示词中明确忽略标注文字布局元素明显错位草图元素密度过高、拍摄角度倾斜拆分区域分块上传保证垂直拍摄两次生成结果差异很大temperature 过高把 temperature 调到 0.2~0.3输出被截断max_tokens 不够调大到 3000~4000同一关键词多次修改无效上下文过短模型忘了之前内容检查 messages 是否保留了对话历史只裁剪需要修改的局部图重发识别不了浅色线条笔太细或笔快没水换粗头马克笔加大线条粗细和颜色深度5. 这套交互还能往哪走白板生成只是一个开始5.1 从页面生成到流程生成白板手绘 GPT-4 的组合不只能生成页面代码。我在实际项目里试过另一个方向把业务流程画在白板上包括判断分支、异常回路、责任人标注然后让 AI 生成结构化的流程文档和测试用例。这套思路适合谁项目推进中需要写流程文档、画时序图、生成验收清单的人。操作方式和生成页面一模一样只是把提示词里的角色从前端工程师换成高级业务分析师把输出约束改成生成 Markdown 格式的流程文档包含步骤说明、分支条件、异常处理清单。白板给出的信息是空间化的分支与循环可以用箭头大大方方画出来AI 对这种表达的理解能力相当不错。更有价值的组合是白板画架构图、表格、时序图草图画一个系统模块关系图让 AI 生成文档说明画一个表格结构让 AI 生成 CSV 数据样本。这些操作的核心逻辑都是同一件事——用视觉信息替代文字描述让 AI 在一个更明确的信息框架里工作。5.2 从单人白板到协作白板另一个值得关注的方向是多人协作白板与 AI 生成的结合。现在的协作白板工具已经支持多人同时在线画图如果再接入生成式AI就变成了一种非常自然的会议工作台每个人都可以画自己的部分AI 实时把所有人的草图合并成完整方案。比如产品、设计、开发三个角色围着一块虚拟白板产品画需求流程设计画界面布局开发在旁边标注技术约束。AI 会自动综合这些信息生成一个包含需求、设计说明、开发要点的综合文档。整个过程不需要任何一个人去写需求文档因为草图本身就是需求AI 变成了那个读图归纳的人。这个方向目前还在早期但我觉得它切中了白板交互最大的痛点——信息还原。很多会议白板讨论完就擦掉了没人有时间整理成文档。而 AI 实时生成可以把每一版草图都转成结构化记录直接沉淀下来。对团队和个人来说这是实打实的效率提升。5.3 给你的落地建议如果你看完文章想自己动手试试我建议从最小闭环开始找一块白板没有就一张大白纸画一个你最熟悉的页面比如你正在做的产品的首页。拍照后按下文提示词模板发出去先看生成结果。不要一上来就追求完美效果先感受图像理解生成这个流程再逐步加入温度参数、提示词优化、局部迭代。等基础流程跑顺了再试试把流程图、表格也纳入进来或者把白板换成平板、把拍照换成截图、把单轮提问换成多轮局部修改。你大概率会发现当你把草图和 GPT-4 连在一起之后真正受限的不是模型的理解能力而是你自己画图时敢不敢把想法画出来——毕竟画错了可以改但想法没有载体才是最可惜的。最后再说一点个人体会。真正把这个流程用起来之后我最大的感受是它对沟通效率的改善是立竿见影的。以前聊需求是你说我记会后翻译信息在传递中不断失真现在是我画你看AI 当场翻译模糊的想法当场变成具体的东西。踩过几次坑之后我现在画草图固定两个习惯一是一定用红笔圈出重点区域二是关键文字尽量写大。这两个小习惯让后续识别成功率提升非常明显。如果白板笔找不到了我通常就用黑色粗记号笔加红色高亮笔一样够用。建议你直接从这一步开始养成习惯会少走很多弯路。