Claude 写的前端代码总爱自己“加戏”，怎么约束它别乱改结构？

试试让它只输出diff补丁，明确禁止碰结构标签，亲测有效得多。
或者干脆把HTML改成注释让它逐行对照，别给它自由发挥的空间。

我最近也踩过类似的坑，后来发现与其反复强调“别动结构”，不如直接把要改的CSS抽出来单独喂给它，让它只输出那段样式代码，效果立竿见影。另外试试在提示词里加一句“假设这是别人维护的代码，任何非必要的结构改动都算bug”，模型会收敛很多。不过说实话，这类精细化重构用Claude还是有点大材小用，换个专注代码补全的小模型反而更听话，你可以对比试试。

这问题我太有同感了，Claude对“结构”的理解跟咱们不完全是一回事。我试过最有效的办法是给它一个“最小修改权限”的思维框架，比如在提示词里加一句“假设这是生产环境代码，任何未明确要求的改动都可能引入bug”，它就会谨慎很多。另外你说的diff格式确实有用，我一般直接丢给它一个旧版和新版的对比，让它只填充缺失的部分，而不是重写整个片段。还有个小技巧是把原文件的CSS类名用占位符粘进去，告诉它这些是“外部依赖”不能动，它往往就老实了。不过说实话，如果项目特别老旧，结构又乱，模型确实容易“看不惯”然后顺手优化，这时候我更倾向用更笨的模型或者干脆自己改，毕竟review时间也是成本。你有没有试过给每个div加注释标记，像“这里是弹窗头部，禁止改动”这种？

这个我太有同感了，Claude对“结构”的理解跟咱们不完全一样，它觉得flex布局是优化，但咱要的是纯css改动。你可以试试在system prompt里加一句“只允许修改style标签内内容，其余代码原样返回”，然后配合diff输出，让它只给改动片段，这样review时也直观，能砍掉它一半的“创作欲”。

其实小模型不一定更听话，反而可能因为理解力差连样式都改不对。我后来是给它喂了一个改好的示例，明确标注“这是目标格式”，比纯文字约束管用得多。你也试试把原HTML结构用注释锁死，比如每行加个<!-- do not remove -->，它就不敢乱动了。

还有个土办法，就是把它输出的代码跟原文件跑个diff，凡是动了结构的部分直接打回重来，多来几次它就会记住你的底线。毕竟这模型是靠概率生成，你得给它划出清晰的“安全区”，不然它总想露一手。

这个我太有同感了，Claude 对“结构不动”的理解跟咱们不太一样，它觉得 flex 布局是优化，class 合并是精简。我后来是直接给它一个“只允许修改 style 标签内内容，其余部分原样返回”的硬性指令，再配合 diff 输出让它自己检查，效果好了不少。另外你可以试试把原 HTML 里每个节点都加个注释标记，告诉它这些 id 不能删，比单纯描述管用。小模型倒不一定更听话，关键是约束条件要给得足够机械。

这问题太真实了，我也被Claude这么坑过。后来我发现一个稍微管用的办法，就是明确告诉它“只输出需要改动的CSS代码块，不要贴完整文件”，同时把原HTML结构用注释标记成不可变区域，效果会好一点。不过说实话，遇到复杂的DOM重构，它确实容易“理解过头”，有时候干脆用正则先锁住结构再让它改样式更省心。你试过把目标拆成两步走吗？先让它分析结构，再单独生成样式补丁，感觉比一次性给完整指令靠谱。

试试把改动的部分用占位符圈起来，明确告诉它别碰圈外代码，我这么干效果还行。

试过让它在改动处加注释标记，review时一眼就能看到动了哪，比单纯要求“别改”有效多了。

试试让它只输出CSS diff，用git diff格式限定改动范围，亲测比口头约束管用。

我一般是让它单独改样式文件，把HTML部分直接注释掉，它就没法动结构了。

这问题我也踩过坑，后来发现光靠prompt强调没用，模型对“结构”的理解跟咱们不完全一样。我现在的做法是让它只输出diff格式的CSS patch，原HTML直接不给它看，它就没机会改结构了。另外你提到用小模型，我试过反而更听话，但得在简单场景下用。你也可以试试把要改的样式拆成具体指令，比如“把padding改成16px”而不是“优化间距”，效果会好很多。

这事儿太真实了，我拿它改老项目也踩过一样的坑。后来我发现，光在prompt里喊“别动结构”没用，它脑子里对“优化”的理解根深蒂固。你可以试试把输出格式锁死，比如明确让它“只返回CSS样式代码，不包含任何HTML标签”，甚至给它一个模板占位符，让它往里头填。另一个偏方是，把原HTML结构里的关键class名改成那种一看就是业务命名、没法合并的（比如“modal__header--legacy”），它就没法自作聪明了。至于换小模型，我试过，反而更爱乱来，因为理解力不够，更倾向于“猜”你的意图。归根结底，你得像防着实习生一样，把边界划到最窄，它才能老实。

试试把目标代码直接作为唯一上下文，别给旧结构，让它照着现有DOM写CSS，加戏几率小很多。

我也踩过这个坑，后来发现光在prompt里强调“别动结构”根本没用，因为模型对“结构”的理解跟咱不一样。你试试让它只输出patch格式的diff，明确指定只允许修改style属性或者css类里的内容，其他一律原样返回。另外有个土办法挺管用，就是给每段要保留的DOM加个特殊的注释标记，比如，然后告诉它凡是带这个标记的块必须逐字保留。不过说实话，如果项目够老，我反而建议别用大模型重构，直接用正则或者codemod处理样式部分更可控，Claude写新组件确实强，但这种精细活它还是容易放飞自我。你那个flex布局其实还算轻的，我遇到过它把事件绑定方式都改了，review起来真的血压高。

我试过类似的情况，后来发现让它直接输出完整文件反而更容易跑偏，改成只输出需要改动的CSS片段会好很多。另外可以在代码里加一些唯一标识性的注释，比如“此处结构勿动”，模型对这类强约束的遵守率会高不少。不过说实话，这种细粒度控制确实得靠多轮检查，小模型可能更听话但能力又不够，挺两难的。

我自己的经验是，与其在提示词里反复强调，不如直接把目标代码切成小块喂给它，一次只改一个模块，它“加戏”的空间就小多了。还有，用diff格式给它看改动前后对比，它会倾向于模仿你的修改模式，而不是自己发挥。你试试每次让它改完再问你“结构是否保持不变”，效果可能比一次性给整个文件强。

有个土办法挺管用，就是故意在代码里埋几个无意义的空class或者注释节点，然后明确告诉它这些是结构标记不能动，模型为了让标记保留往往会更保守。另外，你也可以试试把DOM结构的校验写进prompt里，要求输出前自己检查一遍嵌套层级和class数量，虽然不能百分百避免，但至少能少折腾几轮review。

试试让它只输出修改后的CSS片段，别给完整代码，我试过这招能少改不少结构。

或者直接换个思路，把改动点列成需求清单让它逐条执行，比系统提示管用。

这题我熟，之前搞类似重构也踩过坑。后来我试了把目标代码直接写成“只改这些行，其他一律别碰”，再配上diff格式的输出要求，它基本就老实多了。你也可以试试故意给个带错误结构的例子，让它照着改，比单纯说“别动”管用。

我试过类似的情况，后来发现把需求拆成两步走会好很多：先让它只输出修改后的CSS，再拿原HTML自己手动合一下。另外提示词里别写“重构”这种词，容易触发它的“创作欲”，就说是“保持现有标签和class不变，仅调整样式属性”，会老实不少。