通义千问前端组件提示词：生成三种风格版本

在AI辅助前端开发中，开发者常希望模型一次性生成同一组件的多个风格版本，例如极简风、商务蓝调风和活泼插画风，从而避免反复提问或手动修改提示词。通过精心设计提示词架构，设定几个关键要素，即可轻松实现这一目标。以下是具体的操作思路。

明确角色、任务与三风格锚点

提示词开头宜直接绑定专业身份，例如“你是一位有5年经验的前端UI架构师，专精React组件设计与视觉语言转化”。随后使用动词明确任务：“为登录表单生成3个独立、可直接运行的React函数组件版本。”

关键点在于，不要笼统地说“设计三种不同风格”，而是使用不可替换的具体风格标签来锚定差异。例如：极简主义（无图标、单色系、零装饰边框）、企业级蓝调（#1890FF主色、阴影深度2px、带加载态反馈）、轻快插画风（圆角按钮配手绘感SVG图标、输入框底部波浪线装饰、hover时微弹跳）。

若遗漏任一风格标签，模型很可能生成仅配色不同的雷同版本，效果将大打折扣。

结构化输出强制分隔

为确保输出清晰可读，需要求模型严格按特定结构输出，不加任何解释，不合并段落，不插入额外说明文字。具体格式如下：

【极简主义版本】
```jsx
……
```

【企业级蓝调版本】
```jsx
……
```

【轻快插画风版本】
```jsx
……
```

三组代码块之间必须用空行分隔。每个标题必须完全匹配括号内的文字——少一个字或换顺序，模型都可能将三个版本混在一起输出，增加后续处理工作量。

注入真实约束防漂移

为确保代码不跑偏，可从三个层面施加约束。

方法一：限定技术栈细节。每版必须使用React 18.2 + hooks，禁用class组件；所有CSS必须用内联style对象实现，不引入外部样式文件或className。

方法二：绑定交互行为一致性。三个版本的提交按钮点击后，必须调用同一签名函数handleLogin(e: React.FormEvent)，表单字段名统一为username/password，不得擅自改名。

方法三：嵌入最小可用示例。在提示词末尾附上一句范例，例如：——并要求严格保持这个style对象写法的层级和键名规范。有此参考，模型输出的代码将稳定得多。