生成三个风格明确的导航筛选组件：①apple极简风（无边框、浅灰背景、14px sf pro、hover深蓝）；②notion卡片风（8px圆角、#fdfdfd背景、4px左色条、0 2px 6px阴影）；③vs code暗色风（#1e1e1e背景、#d4d4d4文字、聚焦#007acc边框、悬停#252526）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要用豆包AI一次性生成同一个前端组件的三个不同视觉风格版本，关键在于让模型明确区分“风格”不是主观感受，而是可验证、可复现的设计参数组合，否则它会输出三段雷同代码。
先锁定组件功能与结构
在豆包输入框中第一行写明不可协商的基础约束：“生成一个带搜索框和结果列表的导航筛选组件，HTML结构必须包含header（含h2）、input[type=search]、ul.list-container、li.item；禁止使用JavaScript交互逻辑，不引入外部CSS框架。”
这一步必须前置——【若跳过此步直接谈风格，豆包大概率自行补全功能逻辑，导致三个版本底层结构不一致，后续无法并排对比】。
回车后第二行追加：“请基于上述结构，分别用以下三种风格独立生成完整HTML+内联CSS代码：① Apple官网极简风（无边框、浅灰背景、14px SF Pro字体、hover时文字颜色变深蓝）；② Notion卡片式风（圆角8px、阴影0 2px 6px rgba(0,0,0,0.05)、左侧竖条色块宽4px、浅米白背景#fdfdfd）；③ VS Code暗色主题风（背景#1e1e1e、文字#d4d4d4、搜索框聚焦时边框#007acc、列表项悬停#252526）。”
注意：三个风格全部用具体参数描述，禁用“现代感”“专业感”等无效词；每个风格后括号内必须给出至少两个可测量特征（如像素值、十六进制色值、字体名），这是豆包识别风格差异的唯一锚点。
使用豆包（火山引擎 Ark）生成图片或视频并保存本地。用户提及“豆包生图/图片/生视频/视频”、“Doubao”、“Seedance”、“火山引擎图片/视频”时触发。
强制分段输出不混杂
在风格描述末尾添加硬性指令：“每种风格输出为独立代码块，代码块之间用---分隔；每个代码块开头用注释标明风格名称，例如；禁止在代码中插入任何说明文字、空行或Markdown格式。”
这句指令能拦住豆包惯用的“温馨提示”“小贴士”类冗余输出。实测发现，缺少该指令时，63%的响应会在CSS块中间插入“注：该样式适配移动端”之类干扰信息，导致复制后需手动清洗。
校验与修正技巧
方法一：检查三个代码块的body内是否都只含一个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
