你是一位有5年经验的前端ui架构师，专精react组件设计与视觉语言转化。为登录表单生成3个独立、可直接运行的react函数组件版本：【极简主义版本】jsx……【企业级蓝调版本】jsx……【轻快插画风版本】jsx……
☞☞☞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对象写法层级和键名规范。”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
