写 Prompt 如写代码——GenUI 生成式 UI 的"咒语"指南
上篇文章发出来后，收到最多的提问是：
“描述到底该怎么写？我写了一大段，AI 给我出来个四不像。”
好问题。
你以为写 GenUI 的 prompt 就像跟朋友聊天一样——描述越详细越好？
恰恰相反。 我发现写 GenUI prompt 跟写代码极其相似：不是字数越多越好，而是结构清晰、重点突出。
这篇把”咒语”拆开给你看。
三大误区
先说我踩过的坑：
❌ 误区 1：描述得像写作文
“我希望做一个温暖的、让人感到舒适的、适合年轻人的博客页面，颜色要柔和，最好有晨曦的感觉，然后导航栏要大一点，但是又不能太大……”
AI 输出：一个散发着迷之 2005 年风格的页面。
问题： 模型擅长理解具象功能，不擅长理解模糊美学概念。
❌ 误区 2：什么都想要
“一个完整的电商网站首页，有轮播图、商品分类、限时秒杀、热门推荐、底部导航、个人中心入口、购物车，还有搜索栏，另外要加一个弹窗提示新用户注册优惠……”
AI 输出：框架对了，但细看全是占位符，每个功能都半成品。
问题： 模型单次上下文的注意力是有限的，功能越多，每个功能分到的质量越差。
❌ 误区 3：只说”风格”不说”结构”
“科技感、现代、简洁、大气”
AI 输出：一个深色背景白字，看起来挺酷但完全没法用的页面。
问题： 风格词容易误导模型去”装饰”，而不是先搭好骨架。
一个好的 prompt 长什么样？
这里是我总结的三段式 prompt 模板：
1 | |
第一段：背景设定
告诉 AI 你这页面用来干什么。
1 | |
这是给模型一个「上下文框架」——让它知道要做什么类型的页面。
第二段：功能清单
最核心的部分。用简明的话列出页面需要包含的元素。
1 | |
这里像写代码的接口定义一样——明确、无歧义、逐条列出。
第三段：风格约束（可选）
控制在 10 个字以内。
1 | |
3 个实战拆解
案例 1：产品落地页
1 | |
为什么这个 prompt 好？
- 先设定背景（AI 产品页面）→ 模型知道尺度
- 功能清单像 wireframe → 不会漏东西
- 最后的风格约束克制 → 不会过度装饰
案例 2：个人仪表盘
1 | |
拆解：
- “个人数据看板” 设定了信息密度
- 每个区域的位置都写清楚了 → 布局可控
- 四项数据用同一格式 → 模型自动生成一致性卡片
案例 3：修改迭代（最有价值的技巧）
GenUI 最有意思的地方是：它不是一次成型，而是可以迭代。
第一次 prompt：
1 | |
生成后说：
1 | |
这是 GenUI 的真正优势——不是从零写代码，而是不断微调。
核心规律
写了几十个 prompt 之后，我发现这几条规律比什么都管用：
1️⃣ 先功能，后样式
功能写完再调样式。一步到位几乎不可能。
2️⃣ 用名词，少用形容词
✅ “三个蓝色按钮，水平排列”
❌ “三个好看的按钮”
3️⃣ 数量词明确
✅ “四个统计卡片” → 生成 4 个
❌ “几个统计卡片” → AI 可能给你 2 个也可能 8 个
4️⃣ 布局词 > 位置词
✅ “左侧导航 + 右侧内容”
❌ “导航在上面，内容在右边”
5️⃣ 接受 80%：剩下的手动调
GenUI 出的是完整可用的 HTML 代码。如果用了生成的代码后觉得”差不多 80% 对了”，那就已经是胜利——剩下 20% 你可以直接改代码，比从零写快 100 倍。
写在最后
如果你现在打开 GenUI Studio，试着用上面的三段式模板写一个页面：
1 | |
等 40 秒。 看看出来的东西，跟你想像的有几分像。
然后改一句话，再生一次。
你会发现，GenUI 不是魔法——它是一块需要调试的工具。而你会越来越擅长调试它。
下一期预告： GenUI 的原理到底是什么？AI 是怎么从零生成完整的 HTML+CSS+JS 页面的？拆解模型的思维链。