【人机协作：AI 编程高效落地指南】提示词篇：AI指挥提示词体系

大模型的普及，让AI编程成为开发者日常开发的常用工具。和传统纯手动敲码、调试迭代的模式不同，AI编程的核心，是通过人机协作的方式，简化重复编码工作、提升开发效率，让工程落地更轻松。

但在实际使用中，很多人对AI编程的运用仅停留在基础层面：只会套用简单提示词、让AI批量生成代码，一味堆砌功能，却缺少规范的迭代逻辑、项目管控思维和工程化落地能力。这也导致很多AI生成的代码杂乱冗余、难以维护，项目容易失控，最终无法正常上线，没能真正发挥出AI的提效价值。

本文结合真实开发场景，整理了一套可落地的AI Coding方法论。从AI编程的底层认知、标准化开发流程、实用提示词技巧，到全场景实战方法与配套工具生态，循序渐进讲解人机协同开发的实操要点。帮助不同基础的从业者，摆脱碎片化的工具用法，建立规范、可控的AI开发习惯，解决AI编码乱、迭代难、落地难的问题，真正借助AI简化开发流程、高效完成工程项目落地。

很多人用 AI 编程时，最大的问题不是 AI 不会写代码，而是自己不会下指令。如何把脑子里的模糊想法，变成 AI 能准确执行的指令是首要解决的问题。AI 编程质量不是单纯由模型决定，也由你的提示词质量和上下文质量决定。

比如你说：

帮我做一个登录页。

AI 确实会做，但它不知道你想要什么风格、用什么框架、是否需要接口、是否能新增依赖、哪些文件不能动。于是它只能凭经验发挥，结果往往是：代码生成了，但不是你想要的。真正高效的 AI 编程，不是「随便问一句」，而是像给工程师派任务一样，把背景、目标、边界、示例和约束说清楚。

3.1 CRISPE 结构化框架

CRISPE工程提示框架由工程师 Matt Nigh 于 2023 年提出，2024 年经微软研究院优化后成为业界标杆级 Prompt 设计范式。它可以帮助你把一个模糊性的需求拆成六个结构化的部分：角色、背景、任务、范围、参数、约束。

3.1.1 CRISPE 六要素

维度	含义	作用	示例
C - Role	角色	告诉 AI 以什么身份思考	你是一个资深前端工程师
R - Background	背景	告诉 AI 当前项目是什么	我在做一个记账本 APP
I - Task	任务	明确要 AI 完成什么	帮我实现一个支出统计图表
S - Style / Scope	风格 / 范围	限定输出风格和修改范围	用 ECharts，只改 statistics.js 文件
P - Parameter / Example	参数 / 示例	提供数据格式、参考样例或输入输出	数据格式参考这个 JSON：{...}
E - Explicit Constraint	显性约束	明确告诉 AI 不要做什么	不要改 CSS 样式，不要引入新依赖

3.1.2 万能句式模板

可以直接套用下面这个模板：

你是一个【角色】。当前项目【背景】。请帮我【任务】。要求：【风格 / 范围】。参考：【参数 / 示例】。特别注意：【显性约束】。

例如：

你是一个资深前端工程师。当前项目是一个记账本 APP，已经完成了收入和支出记录功能。请帮我实现一个支出统计图表。要求使用 ECharts，只修改 statistics.js 文件。数据格式参考： { "category": "餐饮", "amount": 120, "date": "2025-01-01" } 特别注意：不要修改 CSS 样式，不要引入新的依赖，不要改动其他页面。

这类指令比「帮我做个统计图」有效得多。因为它不仅告诉 AI 要做什么，也告诉 AI 在哪做、怎么做、不能做什么。

3.1.3 好提示词的判断标准

一个好的提示词，至少要满足三个条件：

第一，AI 知道你是谁、项目是什么

如果没有背景，AI 就只能猜。比如「做一个表格」这句话过于宽泛，它不知道这是后台管理系统、财务系统，还是项目管理系统。

更好的说法是：

我正在做一个面向小微企业的进销存系统，现在需要在库存页面增加一个商品列表表格。

第二，AI 知道具体要交付什么

不要只说「优化一下」「完善一下」「高级一点」。这些词对人类也模糊，对 AI 更模糊。

更好的说法是：

请把商品列表表格增加三个功能：按商品名称搜索、按库存数量排序、库存低于 10 时显示红色提示。

第三，AI 知道不能碰哪里

很多项目被 AI 改乱，不是因为它不会写，而是因为它改得太多。所以一定要加边界：

只修改 GoodsTable.vue 组件，不要改接口，不要改路由，不要新增依赖。

边界越清楚，AI 越不容易越界。

3.2 四类高频万能提示词

下面整理四类最常用、最实战的提示词，它们分别对应 AI 编程中最常见的四个场景：

从零开始做原型；
在已有项目中局部修改；
遇到报错后修复；
参考别人的项目进行仿制或重构。

类型一：零基础开局提示词

适用于：你还没有代码，只是有一个想法，想先看界面长什么样。

标准提示词

我完全不懂代码。我想做一个【产品类型】，给【用户群体】使用。核心功能只有三个：【功能 1】、【功能 2】、【功能 3】。请你先给我生成一个可以点击查看的 HTML 页面。暂时不要写后端，不要接数据库，只做静态界面。风格要【简约 / 科技 / 可爱 / 商务】，配色用【主色 + 辅色】。我先看看样子。

示例一：做一个记账本 APP

我完全不懂代码。我想做一个个人记账本 APP，给大学生和上班族使用。核心功能只有三个：记录收入支出、查看本月统计、设置预算提醒。请你先给我生成一个可以点击查看的 HTML 页面。暂时不要写后端，不要接数据库，只做静态界面。风格要简约清爽，配色用浅蓝色和白色。我先看看样子。

示例二：做一个 AI 简历修改工具

我完全不懂代码。我想做一个 AI 简历修改工具，给正在找工作的应届生使用。核心功能只有三个：上传简历、输入目标岗位、生成修改建议。请你先给我生成一个可以点击查看的 HTML 页面。暂时不要写后端，不要接数据库，只做静态界面。风格要商务、专业、干净，配色用深蓝色和浅灰色。我先看看样子。

使用提醒

零基础开局时，不要一上来就让 AI 写完整系统。

不要说：

帮我做一个完整的记账系统，包含前端、后端、数据库和上线部署。

这类需求太大，容易生成一堆你看不懂、跑不起来、也无法维护的代码。

更好的方式是：

先生成静态页面，我确认界面后，再逐步增加交互和后端。

类型二：局部修改提示词

适用于：项目已经能跑，但你想改某一个按钮、某一个函数、某一个组件、某一个页面。

标准提示词

当前项目已经跑通。请只修改【文件名】中的【函数 / 组件名】。把【当前行为】改成【期望行为】。其他所有代码保持原样。不要新增依赖，不要重构其他模块。改完后告诉我改了哪些地方。

示例一：修改登录按钮逻辑

当前项目已经跑通。请只修改 LoginPage.vue 中的 handleLogin 函数。当前行为是：点击登录按钮后没有校验手机号格式。期望行为是：如果手机号不是 11 位数字，就提示「请输入正确的手机号」。其他所有代码保持原样。不要新增依赖，不要重构其他模块。改完后告诉我改了哪些地方。

示例二：修改列表排序

当前项目已经跑通。请只修改 OrderList.js 中的 sortOrders 函数。当前行为是：订单按照创建时间正序排列。期望行为是：订单按照创建时间倒序排列，最新订单显示在最上面。其他所有代码保持原样。不要修改接口，不要修改样式，不要新增文件。改完后告诉我改了哪些地方。

使用提醒

局部修改时，最重要的是控制范围。

不要说：

这个页面不太好用，帮我优化一下。

要改成：

只修改 ProductCard 组件中的按钮文案，把「购买」改成「立即下单」，其他不变。

越具体，越安全。

类型三：报错修复提示词

适用于：项目运行时报错、打包失败、页面空白、接口请求失败等情况。

标准提示词

我运行项目时遇到以下错误：【粘贴完整报错信息或使用工具一键引入】

请帮我分析原因，并给出可直接替换的代码或具体修改步骤。不要让我全局重装依赖。不要让我删除整个项目重新开始。优先从配置、路径、代码写法和版本兼容角度排查。如果需要我补充信息，请告诉我要提供哪个文件内容。

示例一：前端启动报错

我运行项目时遇到以下错误： Module not found: Can't resolve './components/Header'

请帮我分析原因，并给出可直接替换的代码或具体修改步骤。不要让我全局重装依赖。不要让我删除整个项目重新开始。优先从路径、文件名大小写、import 写法角度排查。如果需要我补充信息，请告诉我要提供哪个文件内容。

示例二：后端接口报错

我运行项目时遇到以下错误： TypeError: Cannot read properties of undefined (reading 'id')

请帮我分析原因，并给出可直接替换的代码。不要让我全局重装依赖。优先从请求参数、用户登录状态、对象判空和接口返回值角度排查。如果需要我补充信息，请告诉我要提供哪个文件内容。

使用提醒

报错修复时，一定要粘贴完整错误信息。不要只说：

报错了，帮我看看。

更好的方式是：

粘贴终端完整报错；
粘贴浏览器控制台报错；
说明你刚刚做了什么操作；
告诉 AI 项目使用的技术栈；
如果有截图，也一起提供。

例如：

我刚刚修改了登录页面，重新运行 npm run dev 后报错。技术栈是 Vue3 + Vite。下面是终端完整报错：......

这样 AI 才能更快定位问题。

类型四：仿制重构提示词

适用于：你看到一个开源项目、网站、截图或产品界面，想借鉴它的布局、风格或交互，但不想直接复制代码。

标准提示词

我参考了【开源项目 / 截图 / 网页链接】。请按照它的【布局方式 / 交互逻辑 / 视觉风格】，基于我的现有技术栈【框架名称】，生成一个独立的【页面 / 组件】。不要复制原项目代码，不要复制原项目依赖。只借鉴【具体维度】。输出代码要能直接放进我的项目中使用。

示例一：参考某个 SaaS 官网首页

我参考了一个 SaaS 官网首页截图。请按照它的首屏布局方式，基于我的现有技术栈 React + Tailwind CSS，生成一个独立的 HomePage 组件。不要复制原网站代码，不要引入新的 UI 库。只借鉴它的结构：顶部导航、左侧标题文案、右侧产品截图、底部客户 Logo 区。视觉风格保持简约科技感。输出代码要能直接放进我的项目中使用。

示例二：参考开源后台系统的侧边栏

我参考了一个开源后台管理系统。请按照它的侧边栏交互逻辑，基于我的现有技术栈 Vue3 + Element Plus，生成一个独立的 Sidebar 组件。不要复制原项目代码，不要复制原项目依赖。只借鉴它的交互方式：支持菜单展开收起、当前菜单高亮、二级菜单缩进显示。其他页面不要修改。

使用提醒

仿制不是照搬。你要告诉 AI 具体借鉴什么：

借鉴布局；
借鉴配色；
借鉴交互；
借鉴信息层级；
借鉴组件组织方式。

不要说：

做一个和这个网站一模一样的。

更好的说法是：

借鉴这个网站的首页结构和视觉氛围，但文案、颜色、组件代码都重新生成，不复制原始代码。

这样既更清晰，也更安全。

3.3 实操准则：三条高效使用细则

掌握模板之后，还需要掌握使用习惯。同样的提示词，不同的提问方式，效果差别很大。以下三条准则，是和 AI 协作编程时最重要的基本功。

准则一：单次单一需求

一次对话只说一件事。不要在一条消息里同时提出七八个需求：

帮我改按钮颜色，加一个表单，修一下登录报错，再优化一下首页，还要接入数据库，顺便部署上线。

这种指令看起来效率高，实际最容易失控。AI 可能做了其中几件，漏掉几件，甚至为了完成新需求，把原来正常的代码改坏。正确做法是拆开：

第一轮：

请把登录按钮颜色从蓝色改成绿色，其他不变。

确认无误后，第二轮：

请在登录页增加一个手机号输入框，其他不变。

再确认后，第三轮：

请为手机号输入框增加 11 位数字校验。

单次单一需求的好处是：每一轮都知道改了什么，出了问题也容易回退。

准则二：边界约束先行

在提需求之前，先说「不要做什么」。AI 很擅长主动补全，但这也是风险来源。你只想改一个按钮，它可能顺手改了页面结构；你只想修一个函数，它可能顺手重构了整个文件；你只想改样式，它可能顺手引入一个新的 UI 库。所以，在需求里要提前加边界。

常用边界包括：

不要改 package.json；
不要新增依赖；
不要修改数据库结构；
不要新增文件；
不要修改接口路径；
不要改 CSS；
不要改路由；
不要重构其他模块；
只修改指定文件；
只修改指定函数；
保持现有功能不变。

示例：

当前项目已经跑通。请只修改 UserList.vue 文件。不要改 package.json，不要新增依赖，不要修改接口，不要改路由。只把用户列表增加一个按姓名搜索的输入框。

边界越清楚，AI 越不容易越界。

准则三：附参考样例

人类指着图说话最快，AI 也是一样。如果你只是说：

页面要高级一点。

AI 很难准确理解你要的「高级」是什么。但如果你给一张截图，或者给一个参考链接，再说明你喜欢哪里，效果会好很多。

常见参考材料包括：

页面截图；
竞品链接；
开源项目地址；
JSON 数据样例；
接口返回示例；
旧版本代码；
设计稿；
错误日志；
数据库表结构；
你喜欢或不喜欢的示例。

例如：

请参考这张截图的布局：顶部是导航栏，中间左侧是标题和按钮，右侧是一张产品图。但不要照抄颜色，我希望主色改成紫色。

或者：

接口返回数据格式如下，请根据这个 JSON 渲染列表：
json 复制代码
json{
"items": [
 {
   "id": 1,
   "name": "商品A",
   "price": 99,
   "stock": 20
 }
]
}

「像这样」三个字，往往胜过一百句抽象描述。但要注意，给参考时不要只说「照这个做」，而要明确：参考什么，不参考什么。

3.4 常用提示词速查表

为了方便实际使用，可以把下面这些句子保存下来，作为日常 AI 编程的快捷提示词。

需求澄清

我想做一个【产品】，但需求还不清楚。请你用产品经理的方式，向我提 10 个关键问题，帮助我明确用户、场景、核心功能和优先级。

原型生成

请根据以下需求生成一个静态 HTML 原型页面。只需要 HTML + CSS，不要写后端，不要接数据库。页面要能直接在浏览器打开预览。

页面美化

请只优化当前页面的视觉样式。不要修改功能逻辑，不要修改接口，不要新增依赖。风格方向是【简约 / 商务 / 科技 / 可爱】。

代码解释

我看不懂下面这段代码。请用零基础也能听懂的方式解释它的作用。按「整体功能---关键变量---执行流程---可能风险」四部分说明。

接口开发

请帮我实现一个【接口名称】接口。请求方法是【GET / POST / PUT / DELETE】。请求参数是【参数列表】。返回格式参考【JSON 示例】。请加入必要的输入校验和错误处理。

数据库设计

请根据以下业务需求设计数据库表结构。要包含字段名、字段类型、是否必填、默认值、索引、唯一约束和表关系。同时生成建表 SQL。

Bug 修复

我遇到了以下报错。请先分析可能原因，不要直接改代码。然后给出最小修改方案，要求只修改必要文件。

测试生成

请为【功能名称】生成自动化测试用例。覆盖正常情况、异常情况和边界情况。使用当前项目已有的测试框架，不要新增依赖。

部署指导

当前项目已经可以本地运行。请帮我生成部署方案。包括环境要求、构建命令、启动命令、环境变量配置和常见报错排查。

安全检查

请对当前代码做一次安全检查。重点检查输入校验、权限控制、SQL 注入、XSS、CSRF、密码存储和敏感信息泄露。先列出风险点，不要直接修改代码。