北京
你只想改中间那张服务卡片的标题和三条要点，结果AI把左右两张已经定稿的卡片也顺手"优化"了一遍。Tailwind的类名顺序被打乱，网格布局突然错位，原本跑得好好的断点集体失灵。
这不是模型不听话，而是它压根没在"编辑"你的页面。当你把整个HTML文件丢进对话里说"重写第二张卡片"，大模型不会对DOM做外科手术式的局部修改——它会把整份文档从上到下重新合成一遍。为了改一段25个词的描述，它生成了1500行代码，在这个过程中引入了随机变异：能用的CSS断点漂移了，自定义data属性消失了，共享的工具类变得不可预测。这就是所谓的"提示词-重生成陷阱"。
从零生成一个原型，和在已经跑通的页面里更新单个组件，需要的是两套完全不同的工程控制手段。Lovable的预览工具栏强调先指向渲染出来的元素再描述改动，Bolt的Visual Edits发布同样围绕选中已渲染的DOM节点展开，目的都是避开整份代码的重新生成。原则是通用的：先定位到确切的DOM节点，再给出有边界的约束，最后验证影响范围。
三个维度，缺一不可
要消除这个陷阱，每一次局部修改都必须明确三件事：
- 改哪里（范围锚点）：包含待改元素的精确DOM节点，比如选中中间那张服务卡片，而不是它的父容器。
- 改什么（增量规格）：有依据、可核实的事实，用来描述预期改动，禁止编造说法或顺手改设计。
- 什么不能动（显式不变量）：硬边界约束，逐一列出必须冻结的兄弟组件、按钮跳转目标、CSS类和布局规则。
范围选错，代价立刻显现。改错别字或固定措辞，选到具体文本元素就够，若选到父容器，AI可能顺手改写措辞或改掉字号；单张服务卡片大改，要选整张卡片容器，只选标题会让正文不一致，选到整行则会连累兄弟卡片；更新超链接或UTM参数，应选可视链接管理器里的目标锚点，否则AI常会改动按钮类和追踪属性；整段重构则要选带明确说明的父级section，不然网格断裂会扩散到整份文档。
一次真实操作：Asterlane Studio
以一个虚构的AI工作流工作室Asterlane为例。它的服务页并排放着三张卡片：研究简报代理、客户支持、收入运营代理。中间那张支持卡片需要改造成专门的"支持分流"服务。
入口是HtmlDrag里的"上传HTML文件"。不是让AI生成一套全新页面设计，而是导入你手上已有的那份文件。导入后先检查基线：确认三张卡片都正常渲染，元素计数器显示零个选中项。原始中间卡片写的是："一个面向日常客户问题的AI助手，以及一个更有条理的支持收件箱。"
需要的更新必须引入三条有依据的服务事实：对进来的请求做分流、基于已审核文档起草回复、把敏感升级转交人工处理。
在HtmlDrag里启用标记层，直接点中间那张卡片容器。视觉边界框必须只圈住这一张卡片，选中计数器应显示1/20。然后给出带硬性保护条款的提示词，明确点名要保留的元素——卡片编号、按钮跳转目标、CSS类——并禁止改动未选中的区块。
完成提示不等于布局正确
AI回复"完成"，只说明token生成完了，从来不是布局正确的证据。运行后，卡片确实被改名为"支持分流代理"，三条要点也生成了，相邻卡片保持原样。
但审计发现，生成的描述只有16个词，而提示词要求的是20到28个词。为什么模型没做到？大模型处理的是字节对编码（BPE）token，不是词典里的单词。模型大致能理解语义长度，但严格的整数词数对概率生成器来说出了名地难。认清这个限制本身就是一项工程技能：与其反复重掷提示词碰运气，不如立刻转向视觉打磨。
解决这16个词的差距，不必再烧token。直接点进HtmlDrag可视化画布里的描述元素，把文本调到正好22个词。改完后触发"保存版本"，确认记录为v3版本，最终文本就是那22个词。显式的版本快照保证了回滚安全。
验证通过后导出干净的HTML。和那些注入臃肿运行时脚本的传统构建器不同，HtmlDrag会干净地剥离内部编辑属性。
收尾清单可以对照检查：目标增量准确更新且无幻觉说法；约束审计中长度已在可视化编辑器里直接微调；兄弟不变量方面，相邻卡片、导航和页脚100%完好；布局与响应式在移动端和桌面端都没有网格换行断裂；交互属性上按钮和链接得以保留；版本快照把最终状态提交为命名版本v3。
改一个卡片就重写整页，问题从来不在模型聪不聪明，而在你有没有先圈定那个DOM节点。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
