AI 编程实践 VSCode + Copilot 从 0 开发 Chatbot 页面

大家好，我是双越老师，wangEditor 作者，前百度 滴滴 资深前端工程师，PMP，慕课网金牌讲师，划水AI 和 前端面试派 作者。

我正在开发一个 AI Agent 智能体项目 智语ZhiTalk，一个 AI 智能面试官，可智能优化简历+模拟面试（把它做好我就失业了😄），感兴趣的同学可加入讨论。

开始

AI 编程是未来的趋势，似乎一年之前出现了 N 多个 AI 编程工具，头部的几个估值都几十亿美元了。

我自己也在慢慢的转型中，我作为一名老顽固的大龄程序员，从最早开始排斥它，然后怀疑它，后来尝试它，再到现在逐渐接纳它，发现它确实能很好的理解需求、快速开发很多功能。

这就像汽车的自动泊车功能，一开始不屑一顾，自己又不是不会倒车入库，后来尝试使用胆战心惊的怕它撞车，用几次以后：真香！停的比我还正。

今天拿一个小例子来分享一下我使用 VSCode + Copilot 的一个过程和体验。你也可以换成别的 AI 工具来作类似的体验。

初始化项目

自己手动创建一个 Nextjs 项目，参考文档 nextjs.org/docs/app/ge...

然后手动安装 ShadcnUI 组件库 ui.shadcn.com/docs/instal...

这些基础的框架工具尽量提前做好，像 eslint prettier pre-commit commit-lint 等。

如果你没提前准备好，而且没有和 AI 提及这些，AI 是不会主动帮你增加的。

准备 .copilot.md 文件

这个 .copilot.md 文件，就类似于 Cursor 编辑器的 cursor-rule 文件，规定一些统一的编码规范和要求。

如果你直接自己手写，怕是会考虑不全面，可以直接让 AI 写，我的提示词是这样的：

我想用 VSCode + Copilot AI 编程开发一个 chatbot UI 界面，我已经创建了一个 Nextjs 项目并安装了 ShadecnUI 。
请你帮我写一个 .copilot.md 文件，你需要综合全面的考虑，尤其是人类容易粗心大意忽略的地方。
例如我能想到的有：1. 第三方 I/O 时必须使用 try catch 考虑异常情况；2. 样式要考虑响应式，兼容移动端；3. 组件要有单元测试；4. 考虑可访问性；5. 数字输入时要考虑边界情况；6. 考虑安全性如XSS攻击... 
以上是我能想到的，你再根据这些提示综合考虑，给我一个综合全面完整的 .copilot.md 文件。
还有，请注意文档的体积不要太大，不要携带低优先级和过于普遍的规则。

因为每次 Copilot 请求 AI 接口都会携带 .copilot.md 文件内容，所以它的内容不宜过大，否则会影响效率、消耗 token 。

当然，也不要过于纠结它的大小，毕竟每次 AI 请求本身的 token 消耗量就很大，看到外国有人调侃使用 Claude-code 几小时改变了自己的财务状况，所以也不在乎一个 md 文档多点少点了。

总之，尽量精简，但不要因此而忽略掉重要的内容。以下是我的 .copilot.md 文件内容：

# .copilot.md

## 目标

为 Next.js + shadcn/ui 的 Chatbot UI 生成**安全、可访问、可测试、可维护**的代码。只产出完成任务所需的最少代码，但必须满足以下要求。

## 技术栈

- 框架：Next.js（App Router）+ TypeScript + React 18
- UI：shadcn/ui + Tailwind CSS
- 数据校验：Zod
- Markdown 渲染：react-markdown + remark-gfm + rehype-sanitize
- 单元测试：Vitest + React Testing Library
- E2E 测试（可选）：Playwright
- 流式数据：fetch + ReadableStream（支持 AbortController）

## 核心规则

1. **安全性**

   - 禁止使用 `dangerouslySetInnerHTML`
   - 所有用户输入与参数必须用 Zod 校验（包括数字边界）
   - 后端接口仅支持 POST，并校验请求来源
   - 服务端密钥不在客户端暴露
   - 避免 XSS、注入攻击，使用安全 Markdown 渲染

2. **可访问性（A11y）**

   - 符合颜色对比度要求（至少 4.5:1）
   - 所有交互可通过键盘操作
   - 使用 `aria-*` 属性标识实时区域、错误提示、表单状态
   - 错误信息可被读屏读取

3. **健壮性**

   - 所有第三方 I/O 操作必须 try/catch 并提示用户错误
   - 流式请求必须支持中止（AbortController）
   - 数字输入要验证范围和类型（如 temperature 0--2，maxTokens 合理上限）
   - 移动端与桌面端布局自适应

4. **测试**

   - 至少为关键组件编写单元测试（输入校验、交互）
   - 纯逻辑函数单独测试
   - 保证关键路径的可回归性

5. **性能**
   - 长消息列表可选虚拟滚动
   - 仅按需加载额外依赖（如代码高亮）
   - 避免不必要的重渲染

## PR 检查清单

- [ ] 前后端输入均经过 Zod 校验
- [ ] 安全 Markdown 渲染，避免 XSS
- [ ] 可访问性符合标准
- [ ] 移动端与桌面端显示正常
- [ ] 支持流式响应与中止
- [ ] 关键组件和逻辑函数有单测
- [ ] 不暴露服务端密钥

根据原型图开发

我本地有一张原型图，这是我使用 v0 设计的页面，然后我截图下载的。

复制这张原型图，粘贴到 Copilot 输入框，并输入以下提示词，然后回车

请根据这个原型图，创建一个静态页面，要合理拆分组件，还原 UI 结构。

Copilot 开始工作，它先分析截图的内容和结构，再创建组件，给你展示整个思考和创建的过程。

再逐步编写组件的内容，截图左侧可以看到，它创建了几个 chat 相关的组件。

最后在本地运行，浏览器访问，还原效果非常好。

移动端的 UI 效果也非常好。这就是 AI 编程的好处，我自己写代码经常会忘记适配移动端，而 AI 不会忘。

整个过程大概 2-3 分钟，AI 根据我的原型图实现了页面，组件拆分合理，效果和效率都很惊艳。

使用 ShadcnUI 组件

检查代码我发现页面中的 input button textarea 等组件，都是 AI 自己写的，我想让它尽量使用 shadcnUI 组件。我在 Copilot 输入框输入以下提示词

检查一下你刚创建的所有的 tsx 文件，所有的组件尽量使用 shadcnUI ，如 input textarea button 等；所有的 icon 尽量使用 Lucide icon

Copilot 创建了 ShadcnUI 组件，并替换掉所有的 input button textarea 等组件

然后本地运行报错了，先不要着急自己去分析 bug ，直接把错误复制粘贴给 Copilot 去解决

它会自己去分析并修复这个 bug ，修复以后就正常了，界面和之前一样。

最后，我在 .copilot.md 文件中补充了两条，以便让它在后续开发中尽量使用 shadcnUI 组件

6. **技术选型**
   - 组件尽量使用 shadcn/ui 组件 https://ui.shadcn.com/docs/components
   - icon 尽量使用 Lucide icon https://lucide.dev/icons/

修改功能

附件放在消息卡片内

提示词如下

在页面右侧的消息列条中，用户的第一条消息内容不应该是"思考中"，而是"请分析我的简历"，
而且这条消息还要有一个附件（即用户上传的文件） resume.pdf 。请修改。

Copilot 修改结果如下，它能很好的理解我的意图并作出正确的修改

删掉 topbar

提示词如下

删掉右侧的 topbar ，右侧只保留两部分：聊天列表 + 用户输入框部分。
页面左侧的聊天历史中，每个都应该加一个时间信息，例如：现在，1小时前，2天前。

Copilot 修改结果如下，没问题

增加深度思考

提示词如下

在右侧的聊天列表中，为 AI 的第一条信息增加一个 reasoning 深度思考的过程，表示在回答问题的时候进行了较长时间的深度思考和分析。

Copilot 修改结果如下，比较符合我的预期

修复宽度问题

提示词如下

页面右侧的聊天列表，当屏幕很宽的时候，AI 聊天卡片和用户聊天卡片左右距离太远，用户体验不好。请根据屏幕宽度自动显示聊天列表的宽度，考虑大屏、中屏和移动端。

Copilot 修改结果如下，兼顾了宽屏和手机屏幕的响应式效果

最后

通过这个例子可以看出，目前 VSCode + Copilot 对于人类自然语言的理解已经比较到位了，可以正式应用到新项目的生产环境中去增加效率。

今天只是一个静态页面，关注我，后面我还会继续去完善全栈能力，并分享出来。想学习 AI Agent 开发的前端同学可来围观 智语ZhiTalk 项目的研发进展。