提示词工程在设计系统场景中的最佳实践：模板、约束与迭代策略

提示词工程在设计系统场景中的最佳实践模板、约束与迭代策略一、引子同样的需求十次生成十个结果生成一个符合 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%