[{"data":1,"prerenderedAt":31},["ShallowReactive",2],{"i-lucide:grip":3,"i-lucide:chevron-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:languages":14,"i-lucide:chevron-down":16,"i-lucide:shield-check":18,"i-lucide:mail":20,"blog-body-ai-html-visual-cowriting-zh":22,"i-lucide:lightbulb":23,"i-lucide:code":25,"i-lucide:pen-tool":27,"i-lucide:mouse-pointer-click":29},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>改网页时，对话里的源码看不到盒模型和换行。不要把整页丢给 AI 再生成一遍；\u003Cstrong>让它写进正在预览的那一页，人看渲染结果再点选微调\u003C\u002Fstrong>。小改动手点，结构改动才请助手。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-html-visual-cowriting\u002Fcover.webp\" alt=\"文章核心论点配图\">\u003C\u002Fp>\n\u003Ch2>为什么在对话里改 HTML，总要贴很多轮才知道布局对不对？\u003C\u002Fh2>\n\u003Cp>因为浏览器的渲染结果（折行、间距、移动端宽度）无法从源码字符「看」出来。模型每次交一卷完整 HTML，你只能整页替换后再找差异。已经满意的配色、图片、那句标题，都可能在「再出一版」里消失。\u003C\u002Fp>\n\u003Cp>更小的改动根本不该回到对话。改一个按钮文案、换一张图、删掉多余区块，在渲染后的页面上点一下即可。这一条已经写过：\u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fedit-ai-html-no-code\u002F\">AI 生成的网页想改个字，要重新喂一遍 prompt 吗？\u003C\u002Fa>。本文补的是另一半：\u003Cstrong>结构还要大改\u003C\u002Fstrong>——加一节、改导航、拆成多页、统一 CSS——这时才值得把正在用的助手接到同一块画布上，而不是再开一个新的生成会话。\u003C\u002Fp>\n\u003Cp>人机双写在网页上的含义很具体：助手写的是文件，你看见的是预览；你在画布上点过的字，再被读入口文件时，应包含那些可视化修改。两边若各改各的副本，就会打成两套页。\u003C\u002Fp>\n\u003Ch2>怎么让 AI 写入当前这一页，又保住你点过的内容？\u003C\u002Fh2>\n\u003Cp>打开 \u003Ca href=\"\u002Fzh\u002Fhtml\u002Feditor\u002F\">HTML 可视化编辑器\u003C\u002Fa>，载入已有 HTML 或从空白开始，打开「连接你的 AI」，标签保持打开。助手应先列出文件、再读入口页（通常是 \u003Ccode>index.html\u003C\u002Fcode>）。入口内容来自\u003Cstrong>当前预览\u003C\u002Fstrong>，因此你刚才点选改过的标题，已经在文件里。\u003C\u002Fp>\n\u003Cp>一次来回可以是这样——AI 加快加一节结构，你在画布上把控标题和间距：\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你：\u003C\u002Fstrong>\u003Cbr>\n在第一屏下面加一节三个特点：快、清楚、可撤回。不要改现有配色。写到当前页，我对着预览点选微调。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>助手：\u003C\u002Fstrong>\u003Cbr>\n已经写入首页。请看画布上三个卡片是否挤在一起——标题要改直接点选，不必再让我整页重生成。\u003C\u002Fp>\n\u003Cp>不要靠想象猜布局——左边是对话，箭头连到右边正在打开的可视化编辑页，三个特点已经出现在画布上：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-html-visual-cowriting\u002F02-ai-flow.webp\" alt=\"左边和 AI 对话，右边 MeTool HTML 页立刻出现三个特点卡片\">\u003C\u002Fp>\n\u003Cp>标题只差一个字，用手点；结构还要大改，再让助手少次写入。人机双写在这里，就是同一块画布上加速生产和把控细节。接入见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fconnect-ai-to-online-tools\u002F\">怎么让 AI 操作网页工具\u003C\u002Fa>，概念见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fhuman-ai-cowriting\u002F\">人机双写\u003C\u002Fa>。\u003C\u002Fp>\n\u003Cp>写文件时记住一条工程限制：\u003Cstrong>每一次写入都会重载预览，并清空撤销历史。\u003C\u002Fstrong> 同一轮「把页脚改成三栏并统一按钮颜色」应合并成少次 edit\u002Fwrite，不要让模型改一个颜色就传一次。人的精细点选，放在助手这一轮写完之后。\u003C\u002Fp>\n\u003Cp>从单页变成小站点，也是一次写入触发的：新增 \u003Ccode>about.html\u003C\u002Fcode> 或 \u003Ccode>css\u002Fstyle.css\u003C\u002Fcode> 后，当前文档会落到 \u003Ccode>index.html\u003C\u002Fcode> 旁，工程模式打开。文本类文件（html\u002Fcss\u002Fjs\u002Fsvg\u002Fmd 等）可读写；你上传的图片、字体只读，字节不经中继交给模型。单个文本文件经中继时大约需小于 \u003Cstrong>180 KiB\u003C\u002Fstrong>。没有远程删除或重命名——要删文件，在页上自己处理。\u003C\u002Fp>\n\u003Cp>对人可说：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>「抽出重复样式到 css\u002Fstyle.css，首页只保留结构。」\u003C\u002Fli>\n\u003Cli>「按现在画布上的文案，只修移动端间距。」\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>什么改动手点，什么改动交给已连接的 AI？\u003C\u002Fh2>\n\u003Cp>改动能在画布上指着完成的，就手点；必须改结构和多文件的，才交给助手。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>你要做的事\u003C\u002Fth>\n\u003Cth>更合适\u003C\u002Fth>\n\u003Cth>原因\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>改标题、换图、删一块、调字号\u003C\u002Ftd>\n\u003Ctd>画布点选\u003C\u002Ftd>\n\u003Ctd>秒级、不清空整页撤销\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>加一节、改导航信息架构\u003C\u002Ftd>\n\u003Ctd>已连接的 AI 少次写入\u003C\u002Ftd>\n\u003Ctd>源码级结构\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>拆成多页、抽 CSS\u003C\u002Ftd>\n\u003Ctd>AI 写入新路径\u003C\u002Ftd>\n\u003Ctd>进入多文件工程\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>只要整页海报式截图\u003C\u002Ftd>\n\u003Ctd>页上导出截图\u003C\u002Ftd>\n\u003Ctd>不必经对话传图\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>从零再生成一个完全不同的页\u003C\u002Ftd>\n\u003Ctd>新开生成，再导入本页\u003C\u002Ftd>\n\u003Ctd>共写的是「当前稿」，不是「任意新稿」\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>边界：关标签即断开。不要让模型编造它没见过的二进制图片路径。截图和源码都走本机下载，MCP 回传的不是文件字节。复杂前端框架工程（带构建链、node_modules）不是这一页的目标——这里是单页或小型静态站点的画布。\u003C\u002Fp>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>让 AI 改网页，把「看不见的源码往来」换成「写进当前预览」。不要把整页丢回大模型独自重生成。小改动手点，大改动合并成少次写入，因为远程写会清空撤销。图片留在浏览器只读；要带走的是源码包或截图。已经点选满意的部分，和共写可以同时成立，只是粒度不同。\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":24},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\"\u002F>\u003Cpath d=\"m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 4.1L12 6M5.1 8l-2.9-.8M6 12l-1.9 2M7.2 2.2L8 5.1m1.037 4.59a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z\"\u002F>",1788171096998]