让 AI 写一个按钮、一个弹窗，demo 级别几乎都能过关；一旦要复用进真实业务，就暴露各种问题。差别在于提示词里有没有“设计系统意识”。

先声明设计变量

技术栈：Vue 3 + Element Plus + 组合式 API + scss
请生成一个「文件上传卡片」组件：
1. 交互：拖拽或点击上传，单个文件不超过 20MB
2. 状态：空闲 / 上传中(显示进度) / 成功(可预览) / 失败(可重试)
3. 样式：卡片式，圆角 12px，浅灰虚线边框，主色 #2563eb
4. 使用 v-model 同步文件列表，emit 失败事件供父级提示

把状态画出来而不是靠形容词

与其说“做得好看点”，不如列出组件所有可能的 UI 状态，让 AI 为每个状态补齐视觉与交互逻辑。这是演示代码与生产代码的分水岭。

要求拆分而非大杂烩

  • 样式：是否抽离成可复用的 mixin 或 CSS 变量
  • 逻辑：表单校验、上传重试等是否独立成函数
  • 可访问性：键盘操作与 aria 属性是否考虑

给验收清单而非感想

提示词结尾要求输出一份自查清单：空状态、超长文件名、断网重试等场景如何处理。组件能不能扛住边界，往往比主流程更能看出水平。