通义千问前端组件提示词加示例，结果更稳定

写前端代码时，你是否遇到过这种情况：让通义千问生成一个组件，结果输出的内容与项目代码风格完全不符——要么使用了你没用过的 Options API，要么 props 写法不同，要么 CSS 用了全局样式。其实问题不在模型，而是你的提示词过于“空泛”。想让输出稳定、贴合项目，关键不是写“写一个按钮组件”，而是把项目里真实的代码片段作为示例嵌入，让模型知道你具体使用什么框架、什么规范、什么风格。

先确认你使用的框架与约束条件

打开项目源码，找一个结构清晰的 Vue 或 React 组件文件（例如 src/components/LoadingSpinner.vue），将其完整结构复制下来：包括 script setup 语法、props 定义方式、emits 声明、CSS 作用域写法，甚至注释风格。这一步不可跳过——【模型不会猜测你用的是 Composition API 还是 Options API，也不会自动识别你禁用了 inline style】。

将这段真实组件代码保存为纯文本，后续直接粘贴到提示词中。

构造带示例的三段式提示词

方法一：网页端手动拼接（适合快速试错）

在通义千问网页输入框中，按顺序写入三部分，中间空一行：

① 角色+任务：你是一名专注 Vue 3 + TypeScript 的前端开发工程师，根据我提供的模板结构，生成一个符合项目规范的新组件。

② 示例块：用三个反引号包裹你刚复制的真实组件代码，例如：```vue```。

③ 新需求：现在请生成一个 ConfirmDialog 组件，接收 title、message、confirmText 三个 props，点击确认按钮时触发 confirm emit，不使用任何第三方 UI 库，CSS 使用 BEM 命名法，style 标签添加 scoped。

完成这一步后，模型会严格对齐你给出的示例结构来生成，不会擅自改成 export default 或加 ref() 包裹 props——因为示例中并未这样写。

API 调用时注入示例的正确做法

如果你使用 DashScope SDK 调用千问 API，必须将示例放在 user 消息里，且 system message 仅做角色限定，不掺杂具体结构。

错误写法：把示例塞进 system prompt——模型会将其视为全局规则，反而忽略后续 user 指令。

正确写法：system 消息只写角色与边界，user 消息第一句复述任务，第二句紧跟示例，第三句写新需求。例如：

system: 你是一名 Vue 3 专家，只输出可直接运行的 .vue 文件内容，不解释、不加 markdown 代码块标签、不补全未提及的逻辑。

user: 请按以下模板结构生成新组件 → ```vue