AI Coding 最佳实践-从零到一全栈项目编写

AI Coding最佳实践

随着人工智能技术在编程领域的深度渗透，AI Coding已从简单的代码补全工具进化为涵盖全流程开发的智能辅助系统。从精准的提示词设计到多工具协同的MCP（Model Context Protocol）生态，再到专业化的AI编辑器应用，开发者正逐步探索出一套高效利用AI能力的实践体系。本文将系统梳理AI Coding中的核心方法论与工具链，通过提示词优化准则、编辑器选型、MCP生态应用及实战案例，为开发者呈现一套可落地的AI辅助编程最佳实践，助力在快速变化的技术环境中提升开发效率与质量。

提示词

提示词设计准则

参考Github Copilot文档的设计准则

docs.github.com/zh/copilot/...

包括

先总体说明需求，再具体说明需求细节，而不是毫无逻辑的说明需求

编写一个函数，以指示某个数字是否是质数

此函数会要求提供一个整数，如果此整数是质数，将返回 true

如果输入的数字不是正整数，此函数将会出错

提供例子，在实现具体功能之前，先提供具体的例子或实现

编写一个函数，以查找一个字符串中的所有日期，并在数组中返回这些日期。日期的格式可以如下所示：

05/02/24

05/02/2024

5/2/24

5/2/2024

05-02-24

05-02-2024

5-2-24

5-2-2024

示例：

findDates（"我要在 11/14/2023 去看牙医，并在 12-1-23 参加书友会"）

返回：["11/14/2023", "12-1-23"]

将复杂任务拆分成更小的任务

例如，不要要求 Copilot 生成单词搜索迷宫，而是将此过程分解成更小的任务，并要求 Copilot 逐个完成这些任务：

编写一个函数，以生成一个 10 x 10 的字母网格。

编写一个函数，以便在给定一组有效单词的情况下查找字母网格中的所有单词。

编写一个函数，该函数使用之前的函数生成一个包含至少 10 个单词的 10x10 字母网格。

更新上一个函数，以打印字母网格和网格中的 10 个随机单词。

避免多义性，避免提示词含糊不清的用词

例如，如果"这个"可能是当前文件、上一个 Copilot 回复或者特定的代码块，请不要问"这个有什么用"。相反，应当具体化：

createUser 函数的作用是什么？

上一个回复中的代码的作用是什么？

多义性也适用于库：

如果正在使用不常见的库，请描述库的作用。

如果希望使用特定的库，请在文件的顶部设置导入语句，或者指定要使用的库。

提示词分类

使用AI开发大型项目时，因为代码长度太大，超过大模型的上下文长度上限，导致大模型忘记自己的需求是啥，或者项目的规范是啥，于是目前AI编辑器主流的两种做法是

使用项目级别的提示词文件，说明需求
使用规则文件 定制回答需要注意的点（规则文件可分为全局、用户、项目级别）docs.cursor.com/zh/context/...

包括还有cline的workflow文件，指定大模型按照某种流程执行动作

AI编辑器

AI编辑器是AI Coding重要的一环，市面上已经有的且出名的AI编辑器包括如下

VSCode Copilot(早期比较烂，随着版本更新，个人感觉最新版已经有Cursor 7成功力了，对于学生来讲是廉价的替代品)
Cursor(订阅价格较高，规则变化大，要白嫖到比较困难)
Trae国际版(有高级模型，但是不免费，订阅价格一般)

以下是AI插件

Augment Code
Cline(开源的AI拓展，可以自己接入模型实现编程，但是效果一般)
其他一些接触较少

MCP

MCP市场

怎么知道有哪些MCP Server，可以在这些市场看看，对于一部分AI编辑器（比如Trae），已经内置了市场，添加MCP相当方便

收集的MCP市场如下：

github.com/modelcontex... 官方途径
lobehub.com/zh/mcp
mcp.so/
bailian.console.aliyun.com/?tab=mcp#/m...
等等

操作浏览器

mcp-chrome/README_zh.md at master · hangwin/mcp-chrome
browser mcp

操作浏览器，通常使用的是爬虫那一套技术，比如Selenium、Playwright、Puppeteer等等，但是原理都是开启一个全新的浏览器，再使用API操作浏览器执行一些操作。登录态、用户信息、打开的标签页都不在了，很麻烦。

使用chrome-mcp就可以直接操作当前使用的浏览器进行操作，非常方便。

文档中的最佳实践：mcp-chrome/README_zh.md at master · hangwin/mcp-chrome

操作数据库

github.com/modelcontex... (官方的MCP)
github.com/crystaldba/... (第三方的postgres MCP)
github.com/bytebase/db... (目前唯一既支持多平台，又能使用SQL操作数据库的MCP)
github.com/quarkiverse... (没试过，可能能用)
github.com/damms005/de... (操作逻辑及其奇怪，连接上之后发现好像是只读数据库MCP，所以就没什么用了)

操作GIt/Github

github.com/github/gith...

基本涵盖了操作github的全部操作，比如常见的可以是创建一个github仓库，搜索仓库，等等

实践

下面做一个简单的示例，比如使用VSCode Copilot + 一些MCP工具完全零代码编写一个全栈项目(小项目)

因为我的额度不足了，所以使用免费的GPT5-mini模型，对应的需求也会简单一些

需求详情

JavaScript 复制代码

我希望你使用HTML+node.js+postgres，编写一个简单的学生信息管理页面，要求实现学生信息的增删改差

根据需求优化提示词

Plain 复制代码

---
mode: agent
---
使用 `html + node.js + postgresql`，操作数据库时使用 `dbhub mcp`，帮我创建一个简单的项目，功能主要是学生信息的增删改查，项目创建完毕使用浏览器（使用 `chrome-mcp`）进行测试，测试功能无误后，创建一个github仓库(使用 `github-mcp`)，将代码上传上去

执行步骤时要求使用`sequential-thinking mcp`详细思考之后，再执行操作

我的MCP Server配置如下

JSON 复制代码

"chrome-mcp-stdio": {
  "command": "npx",
  "args": [
    "node",
    "/Users/yangguo/.nvm/versions/node/v22.16.0/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
  ]
},
"github": {
  "type": "http",
  "url": "https://api.githubcopilot.com/mcp/"
},
"dbhub-postgres-npx": {
  "command": "npx",
  "args": [
    "-y",
    "@bytebase/dbhub",
    "--transport",
    "stdio",
    "--dsn",
    "postgres://postgres:postgres@localhost:5432"
  ]
},
"sequential-thinking": {
  "command": "npx",
  "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
}

对话记录

AI 实现的功能，增删改查毫无问题，当然功能比较简单实现起来就很容易了

代码编写完成，AI推送到github中