<p>你是一位有5年经验的前端UI架构师,专精React组件设计与视觉语言转化。为登录表单生成3个独立、可直接运行的React函数组件版本:【极简主义版本】jsx……【企业级蓝调版本】jsx……【轻快插画风版本】jsx……</p>
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你想让通义千问一次性生成同一前端组件的三个不同风格版本,比如一个极简风、一个商务蓝调风、一个活泼插画风,而不是反复提问三次或手动改写提示词。
明确角色+任务+三风格锚点
在提示词开头直接绑定专业身份:“你是一位有5年经验的前端UI架构师,专精React组件设计与视觉语言转化。”
用动词明确任务:“为登录表单生成3个独立、可直接运行的React函数组件版本。”
关键不是笼统说“不同风格”,而是用【不可替换的具体风格标签】锚定差异:极简主义(无图标、单色系、零装饰边框)、企业级蓝调(#1890FF主色、阴影深度2px、带加载态反馈)、轻快插画风(圆角按钮配手绘感SVG图标、输入框底部波浪线装饰、hover时微弹跳)。
立即学习“前端免费学习笔记(深入)”;
这一步漏掉任一风格标签,模型大概率会生成3个仅配色不同的雷同版本。
结构化输出强制分隔
要求模型严格按以下结构输出,不加任何解释、不合并段落、不插入额外说明文字:
【极简主义版本】
```jsx
……
```
【企业级蓝调版本】
```jsx
……
```
【轻快插画风版本】
```jsx
……
```
三组代码块之间必须用空行分隔,且每个标题必须完全匹配括号内文字——少一个字或换顺序,模型可能把三版混在一块儿输出。
注入真实约束防漂移
方法一:限定技术栈细节
每版都必须使用React 18.2 + hooks,禁用class组件;所有CSS必须内联style对象实现,不引入外部样式文件或className。
方法二:绑定交互行为一致性
三个版本的提交按钮点击后,都必须调用同一签名函数handleLogin(e: React.FormEvent),且表单字段名统一为username/password,不允许擅自改名。
方法三:嵌入最小可用示例
在提示词末尾附一句:“参考格式:`` ——请严格保持此style对象写法层级和键名规范。”















