---

背景痛点：为什么你的AI设计总翻车？

刚接触AI生成UI时，我常遇到这些糟心事：生成的按钮长得像表情包、配色赛博朋克风突然变农家乐、同一组提示词跑三次出三种布局。总结下来主要有三大坑：

• 描述太抽象：比如"做一个好看的登录页"，AI可能给你生成带彩虹特效的悬浮按钮
• 缺乏约束条件：没说明尺寸和平台，移动端设计出现在PC界面上
• 元素逻辑混乱："加个购物车和日历"可能变成购物车里塞满日历的诡异组合

技术对比：散装提示词vs结构化提示词

用Figma插件测试两组提示词，效果差距惊人：

1. 散装提示词： "蓝色科技感仪表盘，要现代风"
2. 生成耗时：平均45秒
3. 一次通过率：23%

4. 主要问题：87%产出缺少数据可视化区域

5. 结构化提示词：

   角色：B端Saas系统UI设计师
   风格：Material Design 3规范
   元素：
     - 左侧导航栏(5个图标)
     - 中央折线图数据区
     - 右上角通知铃铛
   约束：
     - 色系#1E88E5主色调
     - 1280px宽度

6. 生成耗时：32秒
7. 一次通过率：68%
8. 关键提升：元素完整度达92%

核心方法：三层式提示词构建法

1. 角色定义（Who）

就像和人类设计师沟通一样，先说清楚给谁做设计： - 错误示范："做个按钮" - 正确示范："面向Z世代的二次元社交APP注册按钮"

2. 风格约束（How）

用设计师能懂的术语锁定风格：

{
  "style": "iOS human interface guidelines",
  "color": {
    "primary": "#5856D6",
    "text": "rgba(0,0,0,0.8)"
  },
  "spacing": "8px网格系统"
}

3. 元素清单（What）

用Markdown列表明确元素层级：

- 顶部：返回箭头+标题栏（居中）
- 中部：
  - 手机号输入框（带86区号）
  - 密码输入框（眼睛图标切换明文）
- 底部：圆角登录按钮（禁用态为浅灰色）

避坑指南：血泪经验总结

抽象词具象化

• × "大气" → ○ "留白占比40%以上"
• × "年轻化" → ○ "使用圆角半径12px"

多模态一致性控制

在Stable Diffusion中可用：

--consistent_character 参数保持元素统一
--seed 1234 固定随机种子

版权风险规避

• 慎用"类似某品牌"描述
• 推荐使用："遵循Apache 2.0许可的设计系统"

进阶技巧：让AI成为你的设计搭档

Few-shot学习示例

给AI看2-3个参考样式（Midjourney格式）：

/imagine prompt: [参考图URL] 类似风格的电商banner，主推夏日防晒霜，包含：
1. 水滴元素
2. 紫外线渐变效果
--cref [参考图URL] --cw 80

CLIP评估法

用Python快速筛选最佳方案：

from clip import evaluate_design
top3 = evaluate_design(
    prompt="医疗APP首页",
    candidates=[img1, img2, img3],
    criteria=["专业感", "易用性"]
)

实践任务：电商登录页改造

初始提示词： "做一个电商登录页，要好看"

你的升级任务： 1. 添加响应式约束（桌面端/移动端） 2. 明确第三方登录图标要求 3. 加入无障碍设计说明

参考模板：

{
  "breakpoints": {
    "mobile": "375px",
    "desktop": "1440px"
  },
  "social_login": ["微信", "支付宝"],
  "a11y": {
    "contrast_ratio": 4.5,
    "font_size": "≥16px"
  }
}

最近用这套方法做后台系统，原来3天的设计稿产出现在压缩到4小时。关键是把AI当实习生一样给明确需求，而不是指望它读心术。建议大家从JSON模板开始练习，慢慢就能形成自己的提示词库了。