豆包写前端组件提示词怎么设置输出格式

你肯定遇到过这种情况：想让豆包帮忙生成一个可以直接拿去用的前端组件，结果返回了一堆解释文字、Markdown代码块符号，甚至还有多余的空行，根本没法直接复制粘贴。这其实是提示词的“边界感”没设置好。下面这几个方法，能帮你把豆包的输出格式锁死，让它老老实实只给代码。

锁定纯HTML+CSS输出，不带任何说明

核心思路就一句话：在提示词开头就把规则写“死”。

第一步，直接下硬性指令——“只输出可直接运行的HTML与内联CSS代码，不包含任何中文说明、英文注释、Markdown反引号、空行、DOCTYPE声明、html/body标签。”这一步是把所有多余的“废话”都挡在外面。

第二步，明确禁用项。比如：禁止使用script标签、禁止出现console.log、禁止调用fetch或addEventListener、禁止class名含下划线或大写字母。把这些规则一条条列清楚，豆包就不会“自由发挥”了。

第三步，强制结构收口。结尾必须以标签结束，且该标签后不能有任何字符——包括换行符和空格。这相当于给输出内容画了一条清晰的“终点线”。

让豆包只吐出CSS样式块

如果你需要的是一段纯CSS代码，那更简单，用“纯CSS代码”这四个字来做锚点。比如：“生成纯CSS代码，定义一个名为.btn-primary的按钮样式，背景色#007bff，文字白色，圆角4px，内边距12px 24px，悬停时背景变深；只输出CSS规则，不加选择器外的任何包裹、不加注释、不换行。”这样豆包就会严格按你的要求输出，不会多给一个字符。

或者，你可以用分号链式约束。比如：“输出CSS代码；每条声明后必须有分号；不缩进；不换行；不出现@规则；不出现!important；不出现url()函数。”这种写法相当于在每个环节都设了一道“检查站”，确保输出足够干净。

防止豆包自动补全HTML结构

豆包有个“坏习惯”：默认会补全、、这些骨架标签。在组件复用时，这就是个灾难。你必须在提示词末尾明确声明：“仅输出组件内部HTML结构，从第一个