本文转载自“嚣张农民”，有修改。

嚣张农民：前端工程师，通过 AI Coding 简化辅助工作内容，节约时间做更多的事。

在清晨的早上，我在公司吃着早餐，刷着抖音推荐的大数据长腿生物，听着后端兄弟讲八卦，突然一条消息弹窗弹出，里面的需求要我完成感恩节的抽奖页面，看着简单的几句话，我知道又要占据我几天的时间去忙碌，纯前端的页面不需要后端参与，斜眼看了下隔壁后端老哥的嘴角微微一笑。但是作为墨鱼圣子怎会妥协，我想起百度文心快码已经更新到 3.5S，可以快速从 0-1 搭建，更加智能，就像钢铁侠中贾维斯一样明确你发出的指令（抽象描述词），而且可以免费使用，那还等什么，赶紧用起来哈哈~~~

文心快码 ( Baidu Comate ) 是一款由百度推出的创新型 AI 编码辅助工具，它利用先进的人工智能技术，旨在带来流畅、直观且上下文驱动的编码体验，助力开发者更轻松地实现宏大的软件项目和创新想法。近日，Comate 发布最新版，功能又又又又升级啦：

• 内置丰富垂类 Agent，即点即用；

• 自定义 Agent 可在项目内便捷共享，助力团队沉淀经验、复用流程；

• Rules 支持基于 AI 自动创建，简化配置方式、落地更高效。

安装流程及操作

了解升级内容文档之后开始我们的开发，在我的 VS Code 版本（1.104.0）直接插件安装，输入 Baidu Comate 之后等待安装，然后根据自己的需求选择需要的智能体，我是选择 Zulu 去进行开发。

描述指令

给文心快码一些指令，我这边整理好需求之后，让它帮我上手开发，一行代码不用敲，这时候需要发挥我们的创意了,只需要坐在电脑前等待就好了。

Prompt：

🎯 页面目标

主题：感恩节

目的：给公司员工抽取礼物

风格：温馨有爱、节日氛围浓厚（浅色系为主）

要有动效、音效（抽奖转动时有动画，中奖时有烟花或彩带效果）

🎨 交互与动效

中心是一个九宫格风格的抽奖组件

点击「开始抽奖」按钮后：抽奖动画播放 2~3 秒，停止后显示中奖结果，播放中奖动画（烟花、礼花、闪光特效等）

背景音乐（抽奖期间播放，结果揭晓时切换音乐）

排行榜组件（记录中奖次数/大奖获得者）

可配置奖品和概率（JSON 配置即可），通过页面的“配置奖品”按钮配置

⚙️ 技术要求

使用 Vue** + Vite + TailwindCSS**

抽奖逻辑在前端模拟实现（不连后台）

项目结构清晰、组件化

包含基本的状态管理逻辑（例如用 useState / useReducer）

页面响应式适配 PC 和大屏展示

📦 交付内容

提供完整可运行的项目代码（含 package.json、入口文件、组件文件等）

预置 6~8 个奖品示例（名称 + 图片）

使用本地假数据模拟抽奖结果（可后续接后台接口）

效果展示

不到十分钟文心快码完成框架搭建，代码生产，UI 生产，完成我们精美的页面

当前页面已具备抽奖基本功能，但仍不能实现奖品配置和真实员工姓名与奖品一一对应，九宫格也略显简陋，再次输入 Prompt 进行优化：

Prompt：

1.请隐藏奖品列表，添加“奖品配置”按钮，点击打开奖品配置页面，可以配置奖品名称和概率，奖品图案自动生成；

2.在九宫格上方添加“姓名"输入框，输入框右边为“确认”按钮，点击确认后，抽奖奖品和姓名一一对应，1 人仅 1 次抽奖机会

3.优化九宫格视觉，九宫格格子有多种色彩，文字和图片放大

页面焕然一新啦！

让我们测试下功能吧：假设员工“张三”参与抽奖

张三随机抽得“谢谢参与”并计入排行榜，再次点击“检查状态”，抽奖按钮置灰，一人仅可抽一次

再多试几个人：

点击“奖品配置”按钮，可以修改奖品及对应概率（会提示当前概率总和，很方便）：

后续优化

如：支持上传本地奖品图片并可在对应九宫格显示，还有根据姓名输入提示中奖率哈哈（开玩笑）~~~

当前奖品图片不可更改，优化为可上传更改。

Prompt：

奖品配置可上传奖品对应图片，修改后会显示在九宫格

完美！现在可以自己上传奖品图片啦～～

可以看到生成的文件和命名还是比较规范，起码帮我省了两天的开发时间，还是很给力的！！

从“个人助理”到“协作团队”，文心快码开启 AI 开发新时代

文心快码不再只是一个帮助写代码的工具，而是可以组成一支虚拟 AI 团队，懂项目、能协作、会自我管理。

对于想要提升研发效率、加速交付节奏的开发者和团队来说，文心快码是不容错过的新选择。