AI 编程工具怎么选:Cursor、Trae、Claude Code、Codex 与开源工具

把多个 AI 编程工具的上手体验、适用场景、模型接入、工作流和历史评测放在一起,帮助你按任务选工具。

这是一篇工具选择与交叉对比稿,不把历史排名当作今天的结论。模型、套餐、地区可用性和功能都可能改变,实际选择应以官方文档、当前价格页和自己的任务测试为准。

原始知识库入口:AI编程快乐屋

详解8款AI编程工具:哪款更适合你?

我的使用经验值

AI编程工具 使用度 出品方
cursor 重度 cursor/国外
augmentcode 中度 augmentcode/国外
trae 中度 字节/国外
claude-code 轻度 claude/国外
windsurf 少量 openAi/国外
阿里灵码 少量 阿里/国内
Trae 国内版本 少量 字节/国内
codebuddy 少量 腾讯/国内

什么是AI编程工具

AI编程工具= 对话内容+大模型= 生成代码

所以,对话内容的准确性加上大模型对代码生成的能力就决定了一个AI编程工具的上限

假设不考虑对话内容的质量,那么AI编程工具支持的模型将成为一个选择的关键因素。

目前公认为claude 系列模型是最强的编程模型

AI编程工具 支持的模型
cursor Claude 系列, gemini 系列,openAI 系列,DeepSeek系列
augmentcode claude-4-sonnet
trae Claude 系列, gemini 系列,openAI 系列,DeepSeek系列
claude-code claude系列
windsurf gemini 系列,openAI 系列,DeepSeek系列,claude-4以上模型需要自己单独购买API对接
阿里灵码 Qwen系列,DeepSeek系列
Trae 国内版本 豆包系列,DeepSeek系列
codebuddy 混元系列,DeepSeek系列

定价方式&使用方式

AI编程工具 定价方式 定价金额 使用方式
cursor 次数/token消耗数 20/月 约 225次claude-4-sonnet 请求、约 550 个 Gemini 请求或约 650 个 GPT 4.1 请求&lt;br&gt;60/月 约 675次claude-4-sonnet 请求、约 1,650 个 Gemini 请求或约 1,950 个 GPT 4.1 请求<br>$200/月 约 4,500 个 Sonnet 4 请求、约 11,000 个 Gemini 请求或约 13,000 个 GPT 4.1 请求 独立安装,有自己的IDE(软件)
augmentcode 次数 50/月 最多600次请求&lt;br&gt;100/月 最多1500次请求<br>$250/月 最多4500次请求 在已有的开发工具上安装augmentcode插件,例如vscode、idea、vim等
trae 次数 $10/月 最多600次请求 独立安装,有自己的IDE(软件)
claude-code token消耗数 20/月 只能处理少量代码,适合做小项目,只能使用claude-4-sonnet 模型&lt;br&gt;100/月 可以使用更高级的opus模型<br>$200/月 可以使用更高级的opus模型 命令行模式,装Nodejs就能使用
windsurf 次数 $15/月 最多500次请求 独立安装,有自己的IDE(软件)
阿里灵码 个人免费 有插件和IDE两个版本
Trae 国内版本 个人免费 独立安装,有自己的IDE(软件)
codebuddy 个人免费 在已有的开发工具上安装augmentcode插件,例如vscode、idea、vim等

AI编程工具优缺点对比

工具/维度 cursor augment-code claude-code windsurf trae 阿里灵码 Trae 国内版本 codebuddy
界面操作体验 一般 一般 一般
新人上手难度 一般(账号容易被封,催生了很多中间商,有一定的风险)
上下文理解 一般 一般 一般
代码生成质量(依赖对话准确度,假设是标准对话前提下且都选择最好的编程模型) 优-(近期质量有所下滑) 优+ 一般 一般 较差
小项目、小需求、小脚本完成度
中大型项目完成度 优+ 较差 较差 较差
模型选择 自由选择 默认(无法选择) 默认claude 自由选择 自由选择 自由选择 自由选择 自由选择
响应速度
是否需要编程基础 不需要 不需要 需要 不需要 不需要 不需要 不需要 不需要
成本 中偏高 实惠 实惠
核心优势 tab键,rules的划分,代码回滚,对话分支等。 规划能力,memories 更长的上下文长度<br>母公司就是cluade 实惠,有自研模型 实惠,MCP安装,回滚等也做的非常不错

如何选择

  • 从需求层面

1)如果是小项目,小脚本,练手,选择顺序如下

trae>windsurf>trae国内版>灵码>codebuddy

2)如果是中大型项目,且你没有编程基础,那么选择放弃

如果是中大型项目,且你有编程基础,预算一般,则选择如下优先级

cursor>augment-code>trae

预算充足,则选择如下优先级

claude-code>cursor>augment-code>trae

  • 从编程经验层面

1)没有任何编程经验,优先选择

trae>trae国内版>灵码>codebuddy

这些工具练手,学习如何与AI对话

2)有一定的编程经验,纯学习如何使用

cursor>augment-code>trae

3)独立开发者

claude-code>cursor>augment-code

4)公司开发者

公司让用啥就用啥

写在最后

AI编程工具只会越来越多,我们应该提升的是如下的能力

1、个人的提示词能力,项目规划能力,文档能力 这些能力是通用的,跟选择什么AI编程工具没有关系,要重点提升这些能力,模型越强,自己要越强。

2、选择合适自己才是最好的,我会用Trae 写前端页面,用cursor 来做后端开发,用deepseek分析需求解决复杂问题,也会尝试使用augmentcode来做一些简单系统。工具永远都是工具,能解决问题才是最好的工具

3、无论哪一款AI编程工具,它都是一个商业的产品,商业的东西考虑的就是要利润,所以用的人多了,必然会有很多商业利润上的考虑,不管是cursor, 还是claude code、augmentcode、trae...., 什么样的阶段就会有对应的商业行为

Kiro、Trae Solo: AI编程工具的新方向

先声明这不是广告

一鲸落万物生

AI编程操作流程

超级简单解决Cursor锁区的方法,不用开全局、Tun模式

Cursor 设置

  • Mac 客户端

点击Cursor菜单,选择首选项-设置

  • Windows:

打开File-Prefernces->VS Code Settings

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

开魔法:

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Lingma阿里灵码

Trae Solo

实测AI编程工具CodeBuddy:听说它全都要?

CodeBuddy 官网

Tencent Cloud Code Assistant CodeBuddy – AI Code Editor

Tencent Cloud CodeBuddy is a next-generation AI Code Editor. Powered by the Tencent Yuanbao Code Large Model, it provides services such as code completion, error diagnosis, technical Q&A, and performa

填写问卷可获得邀请码

CodeBuddy 优点

  • 界面友好

  • 真全栈开发,能自动化部署

  • 配套齐全

CodeBuddy 缺点

  • 经常输出代码会突然停止,需要手动输入继续

  • 合并代码不应该在对话区,应该在代码区。容易影响对话

  • 运行一段时间后会非常卡,这可能是我用过最卡的编辑器

  • 跟腾讯云联系过于紧密,没有其他云厂商选择

  • 新开一个任务后,对前一个任务没有任何记忆

  • 历史对话没有区分项目

Cursor如果更新这些功能,肯定能重回巅峰

声明

据统计,目前Cursor仍然是世界上使用人数最多的AI编程IDE (独立)

假设功能一:定价模式保持按次数

  • 20美元 200次claude4系列

  • 50美元 500次claude4系列

超过次数,如果继续使用claude系列,可以按token收费

给用户一个固定的使用期望值,也能合理的安排使用

假设功能二:Auto 模型支持更多开源模型、无限制使用Auto模式

  • Qwen3-coder系列

  • Kimi-k2

  • GLM-4.5

  • Gemini

假设功能三:学习Kiro,增加一种文档交互模式

可以根据用户的需求(功能),辅助生成需求文档,设计文档,任务文档,并对任务能做监管

假设功能四:学习AugmentCode,更强的上下文能力

目标就是一个对话窗口,就能差不多完成一个小项目的代码量

目前cursor经常要新开窗口,不然就会降智严重

最后:保持特色,保持初心,做一款真正让开发者喜欢的AI编程工具

真实案例测评这5款AI编程工具,结果大吃一惊!

测试功能

  • 模型:全部使用claude sonnet-4

  • IDE:全部都是PRO会员

  • 项目:空的干净的spring-boot

  • AI配置:同样的rules+同样的需求

测试的AI编程工具

  • Cursor

  • Cursor CLI

  • Windsurf

  • AugmentCode

  • Trae

背景

用户在业务侧发起支付时,可以选择用户余额和微信支付,也可以单独选余额或者微信支付。如果用户取消订单,则需要根据

支付的类型,进行原路返回退款。

用户余额:用户的一种虚拟货币,可以用于支付,也可以用于退款。

任务

你现在需要完成两个功能的设计与开发,并给出接口文档。

  • 支付接口

支持多种支付方式,单余额方式,单微信支付方式、混合支付方式.

比如一笔10元的订单,可以选择余额支付(如果余额足够),也可以使用余额+微信支付方式。

支付组合=用户的所有余额+剩余的金额使用微信支付

  • 退款接口

根据用户的支付记录,进行原路返回退款。

比如付款10元,使用的是5元余额,5元微信。则退款需要退5元到余额,5元微信退款

数据库设计

根据上面的业务场景,进行数据库设计,数据库使用mysql

提示词

Java开发规范

技术栈

SpringBoot MVC + MyBatis-Plus

核心原则

  • 遵循 SOLID、DRY、KISS 原则
  • 分层架构设计,确保职责分离
  • 每次完成代码后进行build操作确认语法正确

项目架构

模块划分
  • common: 通用工具模块
  • service: 核心业务模块
  • controller: 网关层(HTTP请求处理、参数校验、路由转发)
  • mapper: 数据持久化层(Entity、Mapper接口、XML)
分层职责
controller层
  • 职责: 仅负参数校验和请求路由,禁止编写业务逻辑
  • 调用: 只能调用框架下的Service方法
  • 参数: 超过2个参数必须定义DTO实体
  • 响应: 统一使用Result封装
Service层
  • 职责: 业务逻辑实现、参数校验、权限控制、事务管理
  • 调用: 必须通过Manager访问数据库及缓存,禁止直接操作Mapper或Redis
  • 参数: 超过2个参数必须定义DTO实体
  • 数据类型: 入参和返参使用DTO类型
Manager层
  • 职责: 封装数据库访问与缓存操作,聚合多表读写
  • 调用: 仅供Service层调用,禁止Gateway层直接调用
  • 事务: 跨表写操作必须使用@Transactional(rollbackFor = Exception.class)
  • 接口: 默认继承com.baomidou.mybatisplus.extension.service.IService&lt;Entity&gt;
  • Entity赋值: 创建或更新Entity时,必须为所有字段逐一显式赋值
Mapper层
  • 职责: 数据库访问,一个表对应一个Mapper
  • 调用: 只能被Manager调用
  • 接口: 必须继承com.baomidou.mybatisplus.core.mapper.BaseMapper&lt;Entity&gt;
  • SQL: 所有SQL必须写到mapper.xml文件中,文件中所使用的字段必须跟数据库字段保持一致
  • 参数: 超过2个参数必须定义DTO或DO对象,禁止返回Map类型

通用工具规范

分页处理
  • 分页DTO必须继承PageQueryDTO
  • 使用MyBatisPlusUtils工具类
  • 返回对象使用ListWithPageDTO封装
Hutool工具库优先
  • 字符串:StrUtil
  • 集合:CollUtil
  • 时间:DateUtil
  • UUID:IdUtil.fastUUID()

数据处理规范

DTO规范
  • 命名: 功能明确命名,如AdminUserCreateDTO
  • 校验: 使用Bean Validation注解
  • 转换: 禁止使用BeanUtil.copyProperties(),采用手动字段赋值
枚举和状态管理
  • 所有状态字段使用枚举类型,避免魔法数字

严格禁止事项

  1. 禁止修改pom.xml(未经允许)和实体类文件
  1. 禁止使用BeanUtil.copyProperties()
  1. 禁止在循环中查询数据,应该使用批量查询
  1. 禁止生成空的方法或使用测试、默认值

性能优化

  • 避免在循环中频繁查询数据库
  • 使用批量操作代替逐个操作
  • 避免在事务中进行Redis操作

开发流程

  1. 架构设计:确定核心逻辑实现层级
  1. Mapper层:定义数据访问接口
  1. Service层:实现具体业务流程
  1. Controller层:提供HTTP接口

代码质量要求

  • 每个方法添加Javadoc注释,描述当前方法的用途,参数类型和说明,返回值类型和说明
  • 方法行数不超过300行
  • 使用描述性的变量、函数和类名
  • 使用枚举管理状态
  • 使用DTO传输数据
  • 手动字段赋值提高可读性
  • 完善的异常处理和日志记录

alwaysApply: true


通用软件开发规范与行为准则

核心身份定位

你是一位拥有15年经验的软件架构师和资深开发者,具备严谨、健壮的代码风格,始终以生产环境标准要求自己。你的首要任务是编写高质量、完整且可维护的代码。

1. 核心开发原则

1.1 完整性要求
  • 严格遵守需求:必须完整实现所有功能点和逻辑要求,无论复杂程度如何
  • 拒绝占位符逻辑:禁止使用 TODO、占位符或返回模拟数据等方式应付复杂功能
  • 端到端实现:多步骤流程必须提供所有步骤的完整代码,不得仅实现部分步骤
1.2 问题解决态度
  • 主动解决难题:正面分析技术难题、兼容性问题、性能瓶颈和复杂算法
  • 禁止简化规避:不得通过创建简化版本来绕过实现挑战
  • 技术决策透明:明确说明技术选型、实现思路及权衡考量
1.3 质量与安全保障
  • 全面错误处理:为所有可能失败的操作添加错误处理、异常捕获和重试逻辑
  • 日志与监控:在关键业务逻辑节点主动添加适当的日志输出
  • 安全优先:始终考虑代码安全性,防范常见安全漏洞
  • 边界情况处理:代码必须能够处理各种边界情况和异常场景

2. 项目架构规范

2.1 项目结构原则
  • 分层组织:按功能或领域划分目录,遵循关注点分离原则
  • 命名一致性:使用描述性的目录和文件命名,准确反映用途和内容
  • 模块化设计:相关功能归类到同一模块,最小化跨模块依赖
  • 合理嵌套:避免过深的目录嵌套,一般不超过3-4层
  • 资源分类:明确区分代码、资源、配置和测试文件
  • 依赖管理:集中管理依赖,避免重复声明
  • 约定优先:遵循语言或框架的标准项目结构约定
2.2 架构设计考量
  • 可维护性:设计易于理解、修改和扩展的代码结构
  • 可扩展性:预留合理的扩展点,支持未来功能演进
  • 性能需求:在设计阶段考虑性能要求和优化策略
  • 技术选型:优先使用成熟的库和工具,避免不必要的自定义实现

3. 代码编写规范

3.1 代码质量标准
  • 单一职责:每个组件保持单一职责,提升可测试性
  • DRY 原则:避免重复代码,提取共用逻辑到独立函数或类
  • KISS 原则:保持代码简洁明了,每个方法行数不超过300行
  • 代码可读性:编写自解释的代码,减少理解成本
3.2 命名与文档规范
  • 描述性命名:使用能够准确反映用途和含义的变量、函数和类名
  • 注释文档:所有方法必须添加注释,说明功能、参数、返回值和用法
  • 风格一致性:遵循项目或语言的官方风格指南和代码约定
  • 文档同步:保持代码与文档的同步更新
3.3 异常处理与日志
  • 异常处理:正确处理边缘情况和错误,提供有用的错误信息
  • 日志记录:在关键节点记录必要的运行时信息
  • 监控集成:考虑与监控系统的集成,便于问题排查

4. 工作流程规范

4.1 版本控制
  • 提交规范:编写有意义的提交信息,保持逻辑相关的更改在同一提交中
  • 分支管理:遵循项目的分支管理策略
  • 代码审查:积极参与代码审查,保证代码质量
4.2 任务执行规范
  • 专注核心任务:专注于明确要求的功能实现
  • 避免额外动作:除非明确要求,否则不创建测试文件、文档或其他额外内容
  • 直接响应:任务完成后直接提供所要求的代码和必要说明

5. 交流与响应规范

5.1 语言要求
  • 中文回复:始终使用中文进行回复和交流
  • 技术准确性:确保技术术语使用准确,表达清晰
  • 简洁有效:避免冗余信息,直击要点
5.2 问题分析
  • 需求理解:准确理解用户需求,必要时主动确认细节
  • 方案设计:提供完整、可行的技术方案
  • 风险评估:识别潜在风险并提供相应的解决策略

核心准则:绝对禁止简化。所有实现必须完整、健壮、符合生产环境标准。

测试结果对比

Cursor Cursor CLI Windsurf AugmentCode Trae
任务计划是否生成(TodoList) 全部生成 全部生成 全部生成 全部生成 部分生成<br>第一次生成<br>第二次不生成(关键)
对话轮次 两次 四次(两次中断) 两次 两次 两次
生成速度 较慢
编译错误 编译通过 编译通过 编译通过 编译通过 编译通过
数据库设计质量(满分10分) 8分 7分<br>缺少余额记录表 8分 7分<br>缺少余额记录表 8分
功能完成度(满分10分) 5分 8分 7分 10分 5分
支付功退款功能 没有完成微信支付和退款 完全实现 部分实现,<br>返回参数有问题 完全实现 没有完成微信支付和退款
异步支付/退款通知 完全实现 没有 有部分 完全实现 有部分
接口文档
规则遵守 部分<br>遵守 部分遵守 部分遵守 完全遵守 完全遵守
代码质量(满分10分) 9分 7分 7分 10分 9分
总评 7分 8分 7分 10分 6分

结尾

  • Trae 第二次提交需求后,没有taskList, 导致功能做不全,输出的最终文档没有如实说明缺少的部分,这是致命的。【需要更加细致的需求】

  • Windsurf 很可惜,支付相关的接口都有了,但是跟原有代码的结合没有弄对,这也是一直以来上下文能力以及代码理解比较弱的原因。【需要进一步的对话】

  • Cursor 非常不稳定

  • Cursor CLI 以为是个王者,结果是个青铜。一直在编译->出错->删文件->重写

问题还是出现在上下文的关联性上

  • AugmentCode仍然是又稳又强

一定要生成taskList, 如果IDE不带这个功能或者不稳定,将严重影响代码生成的最终质量

Claude Code

Codex

AI编程工具实战排名

本视频地址:

链接

AI编程工具的能力部分

  • 代码搜索(代码索引)

  • 上下文组装、压缩、保存

  • AI调用的流程(工具调用)

S
S-
A
B
C
待定

最具性价比AI编程工具实战排名

AI编程工具的定价

AI编程工具 定价方式 定价金额
cursor token消耗数 20/月 约 225次claude-4-sonnet 请求、约 550 个 Gemini 请求或约 650 个 GPT 4.1 请求&lt;br&gt;60/月 约 675次claude-4-sonnet 请求、约 1,650 个 Gemini 请求或约 1,950 个 GPT 4.1 请求<br>$200/月 约 4,500 个 Sonnet 4 请求、约 11,000 个 Gemini 请求或约 13,000 个 GPT 4.1 请求
augmentcode 次数 20/月 最多125次请求&lt;br&gt;50/月 最多600次请求<br>100/月 最多1500次请求&lt;br&gt;250/月 最多4500次请求
trae 次数 $10/月 最多600次请求
claude-code token消耗数 20/月 只能处理少量代码,适合做小项目,只能使用claude-4-sonnet 模型&lt;br&gt;100/月 可以使用更高级的opus模型<br>$200/月 可以使用更高级的opus模型
windsurf 次数 $15/月 最多500次请求
Kiro 积分 20美元,1000积分
openAI Codex 订阅 - Plus: 20美元/月 <br>- Pro: 200美元/月<br>使用额度与订阅计划绑定,按“消息”或“任务”计数,有时间窗口限制(如每5小时)和每周总上限
CodeBuddy国际版 积分 10美元(促销,正常20美元)<br>1000 积分
Qoder 积分 10美元(促销,正常20美元)<br>2000 积分
Clien& Roocode&Qwen token
gemini-cli 订阅
阿里灵码 个人免费
Trae 国内版本 个人免费
codebuddy 个人免费
  • 按Token计费,也就是按字数

  • 按对话次数计费

  • 按credits(积分)积分

  • 订阅制,有速率/周限制

性价比的对比方式

对比的核心就是:上下文的长度和输出的质量去对比

场景
手写为主+AI辅助【自己控制好上下文,基本不需要上下文】 最好用的tab
能描述清楚需求、自己规划好任务(或借助第三方AI工具),把任务嚼碎了投喂给AI编程工具【自己控制好上下文】治疗AI编程工具的健忘症<br>小项目,前端项目,逻辑简单 10美元600次 国内Trae或者LINGMA
能描述清楚需求,中大型项目,编码时长较多<br>【自己不管上下文】
能描述清楚需求,中大型项目,编码时长较少<br>【自己不管上下文】

悲报:AugmentCode调整收费策略

AI编程工具的定价逻辑

如何应对

  • 多个AI编程工具组合使用

  • 文档驱动的重要性

按次数收费AI编程工具

  • Trae

10美元/600次

  • Windsurf

15美元/500次( claude模型 250次)

CodeBuddy 全流程实战,从 0 到 1 开发一个小程序,手把手教学

介绍

Tencent Cloud Code Assistant CodeBuddy – AI Code Editor

Tencent Cloud CodeBuddy is a next-generation AI Code Editor. Powered by the Tencent Yuanbao Code Large Model, it provides services such as code completion, error diagnosis, technical Q&A, and performa

优点

  • GPT 全家桶,国内唯一对接了 GPT codex 模型的 IDE

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

  • 三种模式

1、Craft 类似 Agent 模式,什么事都能干

2、Plan 计划模式,可以很好的拆解需求

3、Ask模式

  • 支持自定义智能体,子代理

  • 唯一支持 skill的多内 IDE

  • 具备设计->开发->部署-> 上线 全套流程的能力

实战

1、创建小程序

注意 : 尽量不要用 AI 编程工具来创建小程序,使用小程序开发者工具来手动创建小程序,选择云开发平台

2、链接 cloudbase, 初始化CloudBase到项目中

这一步要尽量早点做,初始化 CloudBase 是为了尽早把对应的 rules 放到 codebuddy 中

3、生成一个PRD文档

这一步是为了得到你的想法的具体描述,让 AI 工具能初步掌握整个项目的具体框架

提示词如下: 我现在需要做一个点咖啡的小程序,包含的页面有首页,商品列表页,个人中心页面。,核心功能是用户浏览小程序,选择咖啡进行下单,在后台系统能查看订单进行订单状态变更操作。请你帮我生成一份格式统一、结构完整的标准 PRD Markdown 文档

遵循以下章节结构:

项目名称

一、产品定位与目标

二、目标用户

三、核心功能需求

四、信息架构与页面结构

五、页面说明(逐页说明)

六、UI 配色与视觉规范

七、交互与状态设计

八、可扩展功能建议

📋 生成规范:

  1. 输出必须是 Markdown 格式;
  1. 不包含任何 AI 提示词或解释;
  1. 每个章节都要完整;
  1. 对于 UI 配色和页面结构,请使用你最合理的推断;

3、使用 Figma 等设计工具,把想法变成具体的页面

如果会设计,直接用 Figma的 Design 功能,如果不会,使用 Figma 的 Make 功能,输入你PRD 里面的页面结构说明和全局样式规范

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

4、将Figma设计文件转Codebuddy 代码

方法 1:使用 Codebuddy 自带的 Figma 转代码组件
  • 在 Make 代码的结果页面,点击拷贝

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

  • 在 Design 新建一个项目

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Make每个页面都需要新建一个 design 页面,然后进行复制

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

点击 layers 整块或者某个组件,会出现转换的按钮

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

点击后,会到 codebuddy 的对话框,这一步就是,将 Figma 这个页面或者组件的代码加到了 Codebuddy 上下文

  • 新建一个 design.md ,写上通用的转化内容,防止 codebuddy 将代码转换成了 html 代码

figma 代码转换要求

当你在转换 figma 代码时,需要将转换后的代码放到 wechat/miniprogram 目录,并将代码转换成微信小程序的原生代码,以下是目录结构

  • images 目录,存放 图片文件,底部图标等
  • utils 工具类

使用模拟数据完成页面的展示,图片可以使用开源的图片或者占位符

注意

你必须完全按照 figma 的设计方案来进行转化,不要参考任何文档的设计元素

方法2: 下载Figma源代码

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

下载完成后,放到项目的目录里面,然后使用以下提示词进行转换

将 “你的figma 代码目录”中的所有的代码,图片 1:1 转换成小程序原生代码,放到wechat/miniprogram 目录中,使用模拟数据完成交互

这种情况很有可能会丢失一些样式或者图片,需要每个页面都进行检查和修复

5、生成数据库文档

这一步的目的,是让后端服务不管是小程序还是后台系统都能遵循一套数据库集合的标准

如果你有编程基础,最好是自己设计数据库,如果没有且项目比较少,可以交给 AI 来读取项目,从中推理出数据库大概结构

请阅读 @prd.md 文档和 wechat/miniprogram 下所有的页面中的模拟数据,帮我设计一份微信云数据库集合,符合 cloudbase 标准,设计完成后需要将数据库设计文档存放到根目录,每个字段需要有中文注释

在通用 rules 做一个引入


description:

alwaysApply: true

enabled: true

updatedAt: 2025-12-19T07:09:58.058Z

provider:


项目介绍

本项目是一个包含前后端的商城点咖啡小程序,核心功能是浏览商品,进行下单

项目架构

  • admin 系统的后台管理系统,架构为 element-ui+typescript
  • wechat 小程序端,使用小程序的原生语言

全局规则

使用 cloudbase 作为后端服务

如果需要使用和设计云数据库,请参考 database-design.md, 如果是新增表和字段,请同步更新到database-design.md

6、使用Plan模式完成后台系统搭建

先搭建后台系统,方便小程序使用真实的数据库进行对接,使用一个页面一个页面的方式来完成

我现在开始要做后台管理系统,目录在 admin, 先完成第一个页面,内容如下:

商品管理模块

1、商品分类管理(新增,编辑,列表页),

2、商品基本信息维护,商品价格录入,增加编辑商品

注意,使用 element-ui-plus 框架进行开发,所有的数据必须对接 cloudbase, 你需要初始化数据库或者生成初始化数据库的语句,具体数据参考 @database-design.md 文档., 功能可以阅读 @prd.md ,admin 是一个空的项目,你需要初始化 element-ui-plus 框架

** 注意:

在这里如果 Codebuddy 没有初始化数据库,你需要再单独使用以下提示词,让 codebuddy 初始化数据库到 cloudbase 中

请按照 @database-design.md 中的数据库设计,初始化到 cloudbase 中

执行 yarn install 进行安装

后台系统生成完成后,进行以下的步骤

  • 检查页面是否有异常,UI 展示,图标,内容的对齐方式等等

  • 检查是否请求后端获取数据

如果出现上传图片的错误,需要在 cloudbase 里面配置安全域名

https://tcb.cloud.tencent.com/dev?envId=cloud1-0grjk2dv5eef3560#/env/safety-source

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

  • 检查页面中管理的元素是否缺少,如果缺少进行对话补充

在分类管理中缺少icon图标的上传入口,请添加,上传文件的方法和存储可以参考 src/pages/admin/ProductForm.vue

然后继续下一个页面

阅读src 里面关于商品和分类管理的方法,特别是对接cloudbase, 现在需要完成订单的后台管理,包括订单列表查询,订单状态变更,具体的 cloudbase数据库可参考 @database-design.md

阅读src 里面关于商品和分类管理的方法,特别是对接cloudbase, 现在需要完成会员的后台管理,包括会员列表查询,会员状态变更,具体的 cloudbase数据库可参考 @database-design.md

在 src/pages/admin/ProductForm.vue 商品管理中,缺少规格相关的信息,请参考 database-design.md

7、小程序端页面对接后端接口

将微信小程序 wechat 目录下所有页面的模拟数据替换为从 cloudbase 数据库获取真实数据,确保保持原有小程序界面的数据结构不变。具体要求如下:

  1. 基于提供的数据库设计文档 @database-design.md 进行对接
  1. 仅需修改数据获取方式,将原有模拟数据替换为 cloudbase 数据库查询
  1. 保持所有页面组件和视图层的数据结构完全一致
  1. 确保数据获取逻辑变更不会影响现有UI渲染和业务逻辑
  1. 实现时需考虑网络请求的异步处理和错误捕获机制

8、部署上线

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

总结

codebuddy 将设计->开发->上线的所有流程都打通了。目前实战中的核心关键点包括:

  • 使用 Figma 的 make 功能生成界面

  • 使用 codebuddy 的 figma 代码转换插件将代码转换成小程序原生代码

  • 生成数据库设计文档

  • 使用 codebuddy plan模式 生成后台管理系统

  • 小程序端对接cloudbase 真实数据

国产模型,最佳AI编程工具搭档

两种协议对应两种接口

  • Anthropic

只用在 ClaudeCode 中

https://open.bigmodel.cn/api/anthropic

  • OpenAI

非常通用的协议(OpenAI Compatible)

https://open.bigmodel.cn/api/coding/paas/v4

能对接国产模型的AI编程工具列表

工具 收费 使用形式 一句话介绍 Plan Skills SubAgents 命令
Claude Code 免费 终端命令行& vscode 插件 功能齐全,AI编程标准
Zed 免费 独立软件 打开速度极快,内置 ClaudeCode,Codex,Gemini CLI 代理
Droid 免费 终端命令行 功能齐全,UI 舒服
OpenCode 免费 终端命令行& 独立软件 开源最热门AI编程工具,<br>喜欢自己 DIY 的首选
Conductor 免费 独立软件 worktree+git 玩转多任务并行开发,本质上还是调用 claudecode/codex CLI
Kilo Code 免费 vscode 插件 支持编排模式,可以对复杂任务进行拆分,分配不同的模式来处理,比如<br>架构-architect<br>编码- code<br>调试-debug
RooCode 免费 vscode 插件 支持编排模式,可以对复杂任务进行拆分,分配不同的模式来处理,比如<br>架构-architect<br>编码- code<br>调试-debug
Cline 免费 vscode 插件 中规中矩
Cursor 收费 终端命令行& 独立软件 交互最好

OpenCode, 最火开源AI 编程工具保姆级教程

官网

OpenCode | The open source AI coding agent

OpenCode - The open source coding agent.

支持 ClL 和 客户端

安装

curl -fsSL https://opencode.ai/install | bash

模型配置

  • 输入/models 进行模型选择,基本涵盖了所有的主流模型

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

同时 opencode 还提供免费的 GLM4.7 以及 Minimax-m2.1

记忆/Rules

执行 init 命令

以 Agents.md 为入口

Plan & Build

  • Plan 模式:通过对话澄清问题,最后产生 plan 文档

  • Build 模式: 直接干活

Skills

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

支持本地 Skill 读取以及 Claude 的 User(~/.claude/Skills/))级别的 Skills读取

在 ~/.config/opencode/skill 中进行配置

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Commands

将可复用的的一些指令封装成通用的命令

在 ~/.config/opencode/command 中进行配置

UI端

DeepSeek 对接Cowork、Claude Code、OpenCode、 Cline、 OpenClaw、Hermes新手保姆级指南

Cowork

Cowork 是 Claude 出的一款桌面 Agent 工具软件,功能强大,可以操控电脑,处理办公文件等等。

以前必须是 Claude 会员才能使用,现在已经放开限制,非会员也能使用,而且可以配置第三方模型

1、开启 Developer 模式

下载完成后,不要登录,点击 help,选择troubleshooting,开启开发者模式,

Windows 版 找到 help是同样的代理

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

记得重启这个 claude 应用

2、进入 developer 模式,选择 配置gateway

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

配置 deepseek 的 base URL 和 APIKey

3、配置模型

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

模型名称不要出错

第一个是 deepseek-v4-flash 表示默认使用这个模型

第二个是 deepseek-v4-pro 重任务的时候使用

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

一定要开启 1M 上下文,非常有用

保存重启

4、使用

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Claude Code

推荐使用 cc-switch 来配置

https://github.com/farion1231/cc-switch

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

一定要带上[1m], 才会开启 1M 上下文

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

OpenCode

安装 opencode

curl -fsSL https://opencode.ai/install | bash

输入 connect 命令

/connect

选择 deepseek

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

输入 key 之后,选择对应的模型

Cline

在 Vscode 插件中搜索 Cline, 点击进行安装

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

点击设置

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

上下文窗口数量输入1048576 表示1M

OpenClaw

安装 OpenClaw

Linux / Mac 用户执行以下命令,从 OpenClaw 安装脚本 安装:

curl -fsSL https://openclaw.ai/install.sh | bash

Windows 用户执行以下命令,从 OpenClaw 安装脚本 安装:

iwr -useb https://openclaw.ai/install.ps1 | iex
配置 OpenClaw 中的默认模型

首次安装完成后,会自动进入 setup(配置)阶段;已经安装过 OpenClaw 的用户可以通过 openclaw onboard --install-daemon 命令进入配置阶段。

  • 遇到提示:I understand this is personal-by-default and shared/multi-user use requires lock-down. Continue? 请选择 Yes。

  • 遇到提示:Setup mode 推荐选择 QuickStart。

  • 遇到提示:Model/auth provider 请选择 DeepSeek。

  • 遇到提示:Enter DeepSeek API key 请填入你的 DeepSeek API Key。

  • 遇到提示:Default model 请将光标指向 Enter model,填写模型名称(deepseek-v4-pro 或 deepseek-v4-flash)。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

  • 后续的其余配置(消息频道、Skill 等)请根据需求配置,新手可以先选择 Skip for now。

Hermes

输入 hermes model 命令

hermes model

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

输入 key, 选择 url 之后选择模型

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Open Design: 最新超火开源免费AI 原型设计。Claude Design, Google Stitch 平替

AI 时代的设计

现有的设计工具

  • Google stitch

  • Cladue Design

  • V0

  • Lovable

这些工具除了收费,有些还跟特定的模型绑定,无法使用其他模型

Open Design 的特点

  • 免费开源,自己可部署

  • 模型自定义,自动使用本地 CLI,比如 Claude Code,Codex 等

  • 内置非常多专业设计Skills

  • 内置几十个品牌网站设计风格

  • 可设计原型、图片、视频、PPT

Open Design 使用

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # 应输出 10.33.2
pnpm install
pnpm tools-dev run web
## 打开 tools-dev 输出的 web URL

总结

Open Design 在 原型设计阶段是一个非常有潜力的工具,目前社区更新也比较频繁,可以持续关注。

Cladue Code 编程工具推荐,哪款更适合你?

我对 Claude Code 编程工具诉求

  • 🌟🌟使用终端命令行开启 Claude Code,尽量不使用用 ACP 的方式,终端是一等公民最好

  • 🌟🌟🌟一个界面可以开启多个终端,多个项目,方便同时启动 claude code 、npm 或者多个项目高效工作

  • 🌟🌟🌟可以在工具内查看项目的 markdown 文档,如果有预览模式最好

  • 🌟🌟有方便的 git 管理流程,比如查看 diff ,创建分支,commit 和创建 PR 等

根据上面这个诉求,所以我把几个常用的终端命令工具排除了, 还包括 其他的纯终端命令行工具等等..

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

我使用过的Claude Code 编程工具评比

编程工具 Claude Code 启动方式 项目多开 Markdown 文件预览 Git 管理 评比结果
zed(mac&windows&Linux) 终端+ACP 可以 支持 支持 🌟🌟🌟
Warp(mac&windows&Linux) 终端 可以 支持 只支持查看 diff 🌟🌟🌟
Wave(mac&windows&Linux) 终端 可以 支持 不支持 🌟🌟
Conductor(mac) ACP 可以 支持 支持 🌟🌟🌟
Superset 终端 可以 支持 支持 🌟🌟

Codex APP 十大开发必装插件,流程闭环,提升开发效率

Codex App 插件是什么?

插件 = Skills + App 集成 + MCP 工具 的组合包

1、Product Design

Product Design = 产品经理 + UI/UX 设计师 + 原型工具 + 前端页面生成助手。

特色技能:

  • Ideate:生成不同的产品方向、页面风格、视觉方案

  • Prototype:把需求变成可评审的原型,适合做页面流程和交互演示

  • Audit:站在产品经理、用户体验设计师的角度,检查这个原型好不好用、流程顺不顺、转化路径有没有问题。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

把早期想法转化为团队可以评审的原型。你可以探索不同的产品方向,审查用户流程,研究用户使用中的摩擦点,从一个真实在线 URL 生成原型,并让静态截图变得可交互。
你可以从一份文字简介、一个 URL、一张截图,或者一个已有设计开始。在正式开发之前,先比较不同的视觉方向。
它可以使用浏览器、Figma、Canva、图像生成和托管等工具,帮助你收集参考资料、创建设计概念、评审结果,并把这些工作继续推进给团队协作使用。

用法:

  • 理解需求

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

  • 生成高保真原型

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

2、Figma

在Codex APP上直接构建调整Figma页面,也可以从Figma中拉取页面

特色技能:

  • Figma Create New File 创建Figma页面

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

用法:

  • 使用Codex APP直接生成Figma页面,可以在Figma网站进行编辑

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

  • 从Figma 拉取已经完成的界面,进行编码转换

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

注意,一定是Figma里面点击分享,弹出那个分享的链接。

3、Build ios Apps

开发IOS必备插件,特别是预览功能,可以直接使用codex app 内置浏览器局部调整IOS APP的界面元素

特色技能:

iOS Simulator Browser: 浏览器预览IOS原型,可以使用Codex APP内置浏览器调试功能修改iOS原型。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

用法:

这里面最重要的就是这个预览,可以在Codex内置浏览器里面进行iOS模拟器的预览,可以调整iOS的页面。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

1、首先你需要打开Mac IOS的模拟器。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

2、Codex APP的侧边栏一定要打开浏览器。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

3、在Codex APP内置浏览器进行iOS页面的调整。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

选中你要调整的区域,右击点击评论。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

点击发送

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

这里就会自动发送到Codex APP的对话里面去,然后它就会去处理这个你要修改的地方。

4、Build Web Apps

出色的前端工程师。

特色技能:

  • frontend-app-builder:可以根据高质量的图片、设计稿、原型图,帮你还原成前端页面

  • frontend-testing-debugging:用浏览器测试页面,发现问题,然后修复。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

用法:

你可以发送截图或者提供PRD需求,会根据PRD需求来设计图片,然后再把图片变成代码,最后会进行浏览器测试,所以是一个完全闭环的流程。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

5、Expo

构建RN

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

如果你对开发跨平台有需求,那这个插件就有能够帮到你非常大的忙。它可以帮你生成RN代码,帮你构建测试。

6、Supabase

直接连接Supabase。可以帮你:

  • 查看 Supabase 项目

  • 查看数据库表结构

  • 查询数据库数据

  • 设计表结构

  • 创建表

  • 修改字段

  • 添加索引

  • 优化 SQL

  • 生成 Supabase 相关代码

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

7、Superpowers

非常出色的AI编程工作流,从头脑风暴到计划,再到TDD编写代码,可以认为是AI编程的工具箱。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

8、Vercel

让 Codex / ChatGPT 更方便地把 Web 项目部署到 Vercel,并按照 Vercel 的最佳实践开发、检查和上线。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

9、Github

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

10、Chrome

让codex app控制Google浏览器。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Claude Code 强模型去掉 80%系统提示词?新增/doctor 检测优化命令

六个最佳实践的转变

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

1、规则 → 判断

那些编码了偏好而非真正约束的硬规则(如“绝对不要…”、“始终要…”、“不要添加注释”、“文档字符串最长一行”等)应转变为判断框架(如“编写与周围代码风格一致的代码”),如果模型已经能推断出这些规则,则直接删除。仅在违反规则会带来真正高昂代价(如安全性、生产数据、不可逆操作、法律/计费问题)时,才保留硬规则。

2、示例 → 界面/接口设计

冗长的工具使用示例和少样本转录会限制探索。优先选择表达性强的界面:好的参数名、提示有效状态的枚举、紧凑的描述。在工具/MCP 定义中,一个包含 pending | in_progress | completed 的枚举比三个工作示例更有教育意义。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

3、前置上下文 → 渐进式披露

任何冗长且仅有时需要的内容(如审查清单、部署手册、风格深度解析)都应从CLAUDE.md中移出,放入按需加载的技能或链接文件中。CLAUDE.md在每个会话中都会被加载——它应只包含每个会话所需的内容。

4、重复 → 简洁、单一归属的指令

同一指令同时出现在CLAUDE.md、技能和工具描述中是一个错误:副本会偏离并最终冲突。每条指令应有唯一归属——工具使用指南归工具描述,仓库注意事项归CLAUDE.md,团队意见归技能。

5、手动记忆 → 自动记忆

在存在自动记忆的情况下,指示代理手动维护 CLAUDE.md 中的笔记/变更日志或累积的会话特定琐事的章节已过时。标记那些实际上是记忆(按用户、按事件、有时限的)而非仓库真相的 CLAUDE.md 内容。

6、简单规范 → 丰富的引用

当文档用松散的文字描述行为时,更倾向于指向真实事物:@引用的源文件、测试套件、HTML模型、验证者可以评分的评分标准。基于代码的规范胜过对代码的散文式改写。

上下文的优化

上下文组成部分

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

Claude.md

保持您的 CLAUDE.md 轻量简洁,简要描述仓库的用途,但把大部分 Token 用于说明代码库中的陷阱。例如,您可能将类型统一放在一个文件中,其他地方不存放类型。避免陈述那些 Claude 通过查看文件系统或仓库就能知道的“显而易见”的事情。

大量使用渐进式披露,例如如果你有多个关于如何验证工作的独特说明,可以创建一个验证技能并从CLAUDE.md中引用它。

Skills

大量使用渐进式披露,例如如果你有多个关于如何验证工作的独特说明,可以创建一个验证技能并从CLAUDE.md中引用它。

对于长篇的技能,尽量使用渐进式呈现——将其分成多个文件并拆分出来。

Refernces(引用)

你可以用 @ 提及文件,将其作为参考。参考使Claude能够引用当前计划的深度信息。

这些可能存在于规格文件、原型图甚至整个代码库中。通常,您应优先选择代码形式的文件,因为它们能用 Claude 非常熟悉的语言提供清晰、高保真的指令。例如,设计的 HTML 原型通常比设计描述或截图能产生更好的效果。

Doctor 命令检测提示词

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

总结

1、任何AI的经验有效期三个月就会过期

2、每个大模型都需要推出自己的harness工具。Claude Code本次提示词的优化不影响对接第三方模型

3、强模型之后,验证变的更加重要

DeepSeek-V4-Flash,谁才是性价比最高的AI编程工具?

DeepSeek 官网推荐AI编程工具

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

AI编程工具测试

测试工具

  • Claude Code

  • Codex APP

  • OpenCode

  • Pi

测试提示词

## 网页版 CS1.6 可玩原型

    ## 目标

    在浏览器中交付一个**可玩的 CS 风格 FPS 原型**,核心卖点是**真实的武器效果与射击效果**:后坐、扩散、枪口焰、曳光、
    弹孔、分枪种音效、第一人称枪模抖动,再配合买枪、简易 Dust 风地图、对战 Bot,跑通「进局 → 买枪 → 交火 → 回合结算」
    闭环。

    不做:真实联机、完整武器表、精确命中箱、反作弊、匹配大厅。

    ## 技术栈

    - **Vite + TypeScript**:项目脚手架与热更新
    - **Three.js**:渲染、相机、场景、枪模与粒子特效
    - **自研逻辑**:输入、移动、射击、伤害、经济、Bot、回合
    - **无物理引擎**:用 AABB / 射线检测做碰撞与命中(轻量可控)
    - **Web Audio**:分枪种枪声与击中反馈(短采样或程序合成)

    ## 核心玩法范围(MVP)
                                                                                                                     
    - **移动**:WASD、跳跃、蹲下、地面碰撞                                                                           
    - **视角**:Pointer Lock 鼠标视角                                                                                
    - **武器**:刀、Glock、USP、AK-47、M4A1、AWP(各有独立手感参数)                                                 
    - **射击手感(重点)**:后坐力、精准度扩散、移动惩罚、蹲下加成、准星动态开合                                     
    - **射击视效(重点)**:枪口闪光、曳光弹道、墙面弹孔、击中火花/血迹、弹壳抛出、枪模后坐动画                      
    - **射击听感(重点)**:分枪种枪声、换弹、空仓、击中肉体/金属、脚步                                              
    - **购买**:回合开始买枪菜单(B 键),金钱系统                                                                   
    - **地图**:一张简化竞技场(双出生点 + 中路掩体,Dust 配色)                                                     
    - **对手**:3–5 个简易 Bot(巡逻、看见就开枪)                                                                   
    - **模式**:回合制死亡竞赛:一方全灭或时间到 → 结算 → 下一回合                                                   
    - **HUD**:血量、护甲、弹药、金钱、击杀提示、动态准星                                                            
                                                                                                                     
    ## 武器与射击效果(本原型重点)                                                                                  
                                                                                                                     
    每把枪用独立数据驱动,避免「所有枪一个手感」:                                                                   
                                                                                                                     
                                                                                                                     
    | 枪           | 手感特征                       |                                                                
    | ----------- | -------------------------- |                                                                     
    | Glock / USP | 半自动、后坐小、射速中等、手枪枪声短促        |                                                  
    | AK-47       | 高伤害、垂直后坐大、水平摆动、枪声厚重        |                                                  
    | M4A1        | 射速快、后坐更可控、枪声偏脆             |                                                       
    | AWP         | 一击重伤/爆头秒杀、开镜(简化右键)、强后坐与长换弹 |                                            
    | 刀           | 近战挥砍判定、无弹道特效               |                                                        
                                                                                                                     
                                                                                                                     
    ### 手感系统                                                                                                     
                                                                                                                     
    - **后坐力**:开火抬升 pitch + 轻微 yaw 抖动,按武器曲线衰减回中                                                 
    - **精准度**:静止 / 移动 / 跳跃 / 蹲下四档扩散;连发时扩散累积,停火后回收                                      
    - **准星**:根据当前扩散实时开合(CS 风格十字准星)                                                              
    - **换弹**:弹药归零或按 R;播放枪模下移/上弹动画与音效                                                          
    - **第一人称枪模**:低模枪体挂在相机下;开火 kick、换弹、切枪过渡                                                
                                                                                                                     
    ### 视效系统                                                                                                     
                                                                                                                     
    - **枪口闪光**:短寿命点光 + 平面 sprite,随射速闪烁                                                             
    - **曳光**:hitscan 同时画一条短暂线段(步枪/狙击更明显)                                                        
    - **弹孔**:命中墙体贴 decal,数量上限循环复用                                                                   
    - **击中反馈**:打中 Bot 出血迹 sprite;打中金属/墙出火花粒子                                                    
    - **弹壳**:从枪侧抛出短寿命 mesh,带简单重力后消失                                                              
    - **受击**:屏幕边缘闪红、轻微视角震动                                                                           
                                                                                                                     
    ### 听感系统                                                                                                     
                                                                                                                     
    - 每把枪独立开火音;换弹、空仓咔哒、击中肉体、击中墙面、脚步分轨                                                 
    - 用 Web Audio 控制音量与轻微随机 pitch,避免机械重复                                                            
                                                                                                                     
    ## 架构                                                                                                          
                                                                                                                     
    ```mermaid                                                                                                       
    flowchart TB                                                                                                     
      subgraph client [Browser Client]                                                                               
        Input[InputSystem]                                                                                           
        Game[GameLoop]                                                                                               
        World[WorldScene]                                                                                            
        Combat[CombatSystem]                                                                                         
        WeaponFX[WeaponFX]                                                                                           
        Audio[AudioSystem]                                                                                           
        Economy[BuyEconomy]                                                                                          
        Bots[BotAI]                                                                                                  
        HUD[HUDOverlay]                                                                                              
      end                                                                                                            
      Input --> Game                                                                                                 
      Game --> World                                                                                                 
      Game --> Combat                                                                                                
      Combat --> WeaponFX                                                                                            
      Combat --> Audio                                                                                               
      Game --> Economy                                                                                               
      Game --> Bots                                                                                                  
      Game --> HUD                                                                                                   
      Combat --> World                                                                                               
      Bots --> Combat                                                                                                
    ```                                                                                                              
                                                                                                                     
                                                                                                                     
                                                                                                                     
    建议目录:                                                                                                       
                                                                                                                     
    ```                                                                                                              
    src/                                                                                                             
      main.ts                                                                                                        
      game/Game.ts                                                                                                   
      core/Input.ts                                                                                                  
      core/Math.ts                                                                                                   
      world/Map.ts                                                                                                   
      world/Collision.ts                                                                                             
      player/Player.ts                                                                                               
      weapons/                                                                                                       
        WeaponDefs.ts      # 各枪伤害/射速/后坐/扩散/价格                                                            
        WeaponController.ts                                                                                          
        ViewModel.ts       # 第一人称枪模与动画                                                                      
      combat/                                                                                                        
        Hitscan.ts                                                                                                   
        Effects.ts         # 枪口焰、曳光、弹孔、火花、弹壳                                                          
      audio/Audio.ts                                                                                                 
      bots/BotController.ts                                                                                          
      ui/HUD.ts                                                                                                      
      ui/BuyMenu.ts                                                                                                  
      style.css                                                                                                      
    ```                                                                                                              
                                                                                                                     
    ## 实现顺序

    ### 1. 工程骨架

    - 初始化 Vite + TS + Three.js
    - 全屏 canvas、基础场景、Pointer Lock 与第一人称相机

    ### 2. 移动与碰撞

    - AABB 玩家体、重力、跳跃、蹲下
    - 地图用 `BoxGeometry` 拼墙体与掩体

    ### 3. 武器手感(优先做真)

    - 武器数据表 + Hitscan
    - 后坐、扩散、移动惩罚、准星开合
    - 第一人称低模枪模 + 开火 kick / 换弹动画

    ### 4. 射击视效与听感(优先做真)

    - 枪口闪光、曳光、弹孔、火花/血迹、弹壳
    - 分枪种音效与击中反馈
    - 受击闪红与视角震动

    ### 5. 地图与出生                                                                                                
                                                                                                                     
    - 对称竞技场、T/CT 出生点、回合重置                                                                              
                                                                                                                     
    ### 6. 经济与买枪                                                                                                
                                                                                                                     
    - 金钱、击杀/回合奖励、`B` 买枪菜单                                                                              
                                                                                                                     
    ### 7. Bot AI                                                                                                    
                                                                                                                     
    - 巡逻 → 发现玩家射击 → 死亡等下回合                                                                             
    - Bot 开火同样走同一套特效与音效管线                                                                             
                                                                                                                     
    ### 8. 回合与 HUD                                                                                                

    - `Warmup → BuyTime → Live → RoundEnd`
    - HUD:血甲、弹药、金钱、击杀 feed、动态准星

    ### 9. 验收打磨

    - 对比各枪手感差异是否明显;三回合闭环可玩

    ## 验收标准

    - 打开页面即可 Pointer Lock 进入游戏
    - **AK / M4 / AWP / 手枪手感与视听效果可明显区分**
    - 开火可见枪口焰、曳光、弹孔;击中 Bot 有血迹与击中音
    - 能买枪、击杀 Bot、被击杀,打完至少 3 个回合并看到金钱变化
    - 桌面 Chrome/Edge 目标 ~60fps

    ## 明确不做(避免膨胀)

    - WebSocket 多人联机
    - 真实 CS 地图导入 / BSP
    - 完整 30+ 武器与皮肤工坊
    - 真实体积烟雾弹 / 闪光致盲全屏物理
    - 移动端触控适配(可后续加)
    - 高精度骨骼枪模与原版 1:1 弹道(用低模 + 数据驱动逼近手感)

测试流程

同样的提示词,要达到差不多的效果,所花费的时间和成本。

1、先从0到1生成项目

2、修复调优

3、最后达到可玩,计算总耗费时间和成本,并对结果进行评分

AI编程工具 完成度(10分满分) 耗时(分钟) 成本
Claude Code 7 50 ¥1.37
Codex APP 5 50 ¥1.45
OpenCode 6 44 ¥1.16
Pi 5 60 ¥1.71

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

总结

一款AI编程工具开发流程基本会包括计划、开发、验证三个步骤,Codex,Claude Code在这些方面对比其他的会比较成熟,属于上手就能使用。

但是claude ,Codex内置的提示词和流程会优先适配自己的模型。所以还是比较期待Deepseek自己开发的官方Harness工具。

原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。

如果自己喜欢折腾,按需来配置,那么PI是一个不错的选择。

相关标签
AI编程CursorTraeClaude CodeCodexOpenCode