提示词工程在设计系统场景中的最佳实践：模板、约束与迭代策略
一、引子：同样的需求，十次生成十个结果
"生成一个符合 Material Design 3 规范的用户资料卡片，包含头像、姓名、简介和两个操作按钮。"把这个 Prompt 丢给同一个 LLM 十次，你会得到十种不同的布局。有时头像在左侧，有时在上方。有时按钮是填充样式，有时是描边样式。有时卡片有阴影，有时没有。
这就是开放 Prompt 的设计系统灾难。设计系统的本质是一致性，而开放式 Prompt 的输出本质是随机性。两者在根本上矛盾。
让 AI 在设计系统约束下生成 UI 代码，需要一种特殊的提示词策略——不是告诉 AI"你想要什么"，而是告诉 AI"你必须遵守哪些约束，自由发挥的范围是什么"。
二、提示词工程的三个层次
三、生产级实践：结构化 Prompt 模板
系统提示词模板（设计系统场景）： 你是 Design System AI，必须严格遵守以下约束： [设计约束 - 来自 Token 文件] - 颜色：仅使用以下变量 --color-primary: #1E88E5 --color-primary-hover: #1565C0 --color-bg-primary: #FFFFFF --color-bg-secondary: #F5F5F5 --color-text-primary: #212121 --color-text-secondary: #757575 --color-border: #E0E0E0 - 间距：严格使用 4px 倍数 --spacing-xs: 4px --spacing-sm: 8px --spacing-md: 16px --spacing-lg: 24px --spacing-xl: 32px - 圆角：仅使用以下值 --radius-sm: 4px --radius-md: 8px --radius-lg: 12px - 字体： font-family: 'Inter', -apple-system, sans-serif font-size: 14px (正文) / 16px (加重) / 20px (标题) [技术约束] - 使用 React 18 + TypeScript - 样式使用 CSS Modules，所有尺寸使用上述 CSS 变量 - 组件必须使用 forwardRef - 导出的 Props 接口以组件名 + Props 命名 - 必须处理 loading/error/empty/disabled 四种状态 [质量约束] - 所有可交互元素支持键盘操作 - 所有图片有 alt 文本 - 颜色对比度满足 WCAG AA (4.5:1) - 移动端优先，支持 320px 宽度 - 触摸目标最小 44x44px [输出格式] - 仅输出代码，不要额外解释 - 如果有不遵循约束的地方，在代码注释中明确标注原因四、迭代策略：三轮 Prompt 流水线
第一轮：初始生成
Prompt 包含完整的约束 + 需求描述。输出通常是 70% 正确，30% 遗漏（如忘记处理 empty 状态、按钮缺少 type 属性）。
第二轮：自检修正
将第一轮的输出作为上下文，添加修正指令：
检查以下代码是否满足所有约束。特别检查： 1. 是否使用了禁止的颜色值（非 Token 值） 2. 是否处理了所有四种状态 3. 是否有键盘无障碍支持 4. 间距值是否都是 4px 的倍数 对不满足约束的地方进行修正，仅输出修正后的完整代码。第三轮：人工审查 + 定向修复
人工审查第二轮输出，发现特定问题后，定向发给 AI：
用户头像在加载失败时需要显示默认占位图，但当前代码中直接隐藏了头像区域。 请修正：使用灰色圆形占位图 + 用户名首字母作为 fallback。 仅输出头像组件的完整修正代码。三轮过后，代码的约束遵守率从 70% 提升到 95% 以上。剩余 5% 是无法通过 Prompt 改进解决的问题（如复杂交互逻辑），需要人工编写。
五、Prompt 模板库的维护
将验证过的 Prompt 模板版本化管理：
// prompt-templates.ts export const PROMPT_TEMPLATES = { 'card-component': { version: '2.1.0', systemPrompt: '...', userPromptTemplate: (params: CardParams) => `...`, // 模板函数 expectedChecks: [ 'uses-token-colors', 'keyboard-accessible', 'responsive', 'handles-all-states', ], successRate: 0.92, // 2.1.0 版本的成功率 }, 'form-component': { version: '1.3.0', // ... }, };每次 LLM 模型版本更新后，用模板库中所有 Prompt 重新跑一次回归测试，记录新的成功率。如果某个 Prompt 的成功率骤降 > 20%，说明模型更新引入了行为变化，需要调整 Prompt。
六、总结
- 设计系统 AI 的 Prompt 必须包含三层约束：设计约束 + 技术约束 + 质量约束
- 将所有 Token 值写入 Prompt 是保证颜色/间距一致性的唯一方式
- 三轮迭代流水线（生成 → 自检 → 修复）将约束遵守率从 70% 提升到 95%
- 输出格式约束（如"仅输出代码"）可以减少 AI 的解释性废话
- Prompt 模板需要版本化管理和回归测试，LLM 模型更新时监测成功率变化
- 无法通过 Prompt 保证的 5% 需要人工编写，不要无限迭代 Prompt 去追求 100%
