一、先纠正一个常见误区（必须说明）
❌ 错误提示词
“帮我优化一下页面样式”“让页面更高级一点”“更有科技感”
问题：
· 没有评价标准
· 没有对象
· 没有边界
· 没有输出形式
结果一定是：审美描述 + 主观词堆砌。
二、样式优化 Prompt 的「必填 5 要素」
你给 AI 的提示词，至少要包含下面 5 点，否则不要指望结果可用：
1. 对象：优化的是谁（页面 / 模块 / 组件）
2. 当前问题：哪里不好（而不是“更好看”）
3. 目标风格：参照系（不是形容词，是范例）
4. 技术约束：是否能改结构 / 只能改 CSS / 用什么框架
5. 输出形式：你要设计稿、CSS、设计原则，还是可直接用的代码
三、生产级 Prompt 模板（直接可用）
模板 1：前端样式优化（工程向， 最稳 ）
角色设定
你是一名资深前端 UI 架构师，擅长 B 端 / 工业级系统界面设计。
优化对象
页面/模块：【填写具体页面，如：管理后台-模型列表页】
当前问题
· 信息层级不清晰
· 视觉密度过高
· 操作区与内容区缺乏区分
目标效果（明确参照）
风格参考：
· Datadog 控制台
· AWS Console
· Palantir Gotham（信息密度与秩序感）
约束条件
· 不调整业务逻辑
· 不大改 DOM 结构
· 技术栈：React + Ant Design
输出要求
1. 给出明确的视觉改进原则（不是形容词）
2. 指出哪些区域应该“弱化 / 强化 / 重排”
3. 给出可直接落地的 CSS / Design Token 示例
模板 2：纯视觉风格升级（偏设计）****
你是一名企业级 SaaS 产品视觉总监。
请对以下页面进行视觉风格升级建议：
页面截图 / 结构描述：【贴图或文字】
要求：
· 偏“理性、工程感、可信赖”，避免炫技
· 用「层级、对比、节奏」解释每一项建议
· 不使用“更高级 / 更好看 / 更科技感”等空洞词
输出：
· 页面级视觉结构拆解
· 标题 / 内容 / 操作 的视觉权重分配
· 字体、间距、色彩的可量化建议
模板 3：直接让 AI 当“设计审稿人”（纠错型）
你现在是设计评审专家，请挑毛病而不是美化。
以下是页面当前样式描述 / 截图：
【内容】
请从以下维度逐条指出问题：
· 信息层级
· 视觉噪音
· 操作可达性
· 工程实现成本
要求：
· 每条问题必须说明「为什么是问题」
· 每条建议必须说明「改了会带来什么实际收益」
四、一个判断 Prompt 好坏的硬标准****
把你写的提示词丢给 AI 前，自己问一句：
如果我是一个不懂你业务的外包设计师，能不能按这段话直接开工？
· ❌ 不能 → Prompt 不合格
· ✅ 能 → AI 才可能给你有价值的输出
