要让通义千问生成稳定贴合项目的前端组件，需提供真实代码示例：①明确框架与规范；②复制现有组件完整结构（含setup、props、emits、scoped style等）；③在提示词中三段式输入——角色任务、示例代码块、新需求。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让通义千问生成的前端组件代码更稳定、更贴合项目实际结构，关键不是只写“写一个按钮组件”，而是把真实代码片段作为示例嵌进去，让模型明确知道你用的是什么框架、什么规范、什么风格。
先确认你用的框架和约束条件
打开你的项目源码，找到一个已有的、结构清晰的 Vue 或 React 组件文件（比如 src/components/LoadingSpinner.vue），复制它的完整结构：包括 script setup 语法、props 定义方式、 emits 声明、CSS 作用域写法、甚至注释风格。这一步不能跳——【模型不会猜你用的是 Composition API 还是 Options API，也不会自动识别你禁用 inline style】。
把这段真实组件代码保存为纯文本，后面要直接粘贴进提示词里。
构造带示例的三段式提示词
方法一：网页端手动拼接（适合快速试错）
在通义千问网页输入框中，按顺序写三部分，中间空一行：
① 角色+任务：你是一名专注 Vue 3 + TypeScript 的前端开发工程师，根据我给的模板结构，生成一个符合项目规范的新组件。
② 示例块：用三个反引号包裹你刚复制的真实组件代码，例如：```vue<script setup lang="ts">...</script><template>...</template><style scoped>...</style>```。
③ 新需求：现在请生成一个 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<script setup... headerbar logosrc isdark darkmodechange :deep></script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
