关于博客
git地址
前端 ：https://github.com/ljt741212/blog-client.git
后端 ：https://github.com/ljt741212/blog-server.git
为什么做：之前使用的wordPress，主题使用的开源的，功能不全，页面自定义成都也比较低（需要自己去二开，需要学习成本），访客数据统计不精确，站点迁移不是很方便。
进度：目前基本功能都完成了，部分模块未测试，安全性也没测试。
功能：访客统计（在线人数，访客信息，SEO优化，博客的其他功能），支持数据全量备份，与站点数据初始化。
后台页面
前台页面
技术选型
前端：基于monorepo搭建，博客前台使用的是next，后台react加antd，编辑器使用的掘金开源的bytmd，数据实时统计使用的SSE。
后端：nest，mysql，鉴权使用的jwt（暂时还没接入redis），为了方便数据的迁移，静态资源存储使用的阿里的oss。
如何做的
我一直做的是前端，后端之前有接触springBoot所以是清楚后端大致的内容的，后面又粗略的学习了nest。在写代码时AI起到了很大的辅助作用，但这并不意味着“一键生成”，更多的是“AI写代码，我们做决策和优化”。
后端开发：Cursor主导，我做流程把控
后端的代码基本全由Cursor生成，包括接口开发、数据库实体定义、业务逻辑实现等。但这并不代表我什么都不用做，相反，我需要大致了解后端的开发流程和核心概念，比如接口的请求方式、参数校验、数据库关联、JWT，异常处理，统一响应体等。
比如，我需要告诉Cursor“我需要一个用户登录接口，使用JWT认证，参数需要校验用户名和密码，正确则返回token，错误则返回错误信息”，Cursor会生成对应的代码，但我需要检查代码的逻辑性，比如密码加密是否正确、token的过期时间是否合理、异常处理是否完善，还要结合项目的整体结构，调整代码的命名规范、接口路径，确保和前端的请求保持一致。
简单来说，Cursor解决了“怎么写代码”的问题，而我们需要解决“写什么代码”“代码是否符合项目需求”的问题，这就要求我必须懂一些后端的基础概念，否则无法判断AI生成的代码是否合理，也无法进行优化和调整。
前端开发：自己搭框架，AI补细节
前端和后端不一样，我自己搭建了整个项目的核心框架，包括Monorepo的配置、Next.js前台的路由结构、React后台的布局设计、共享包的拆分等，这部分是AI无法替代的，因为需要结合自己的需求和使用习惯，确定项目的整体结构。
框架搭建完成后，具体的组件开发、接口请求、样式编写等细节工作，就主要依靠AI来完成了。
一些问题，以及如何解决的。
最明显的问题就是ui有明显的ai味道。ai生成的组件样式大多比较常规，缺乏个性化，而且不同页面的组件样式、交互逻辑不够统一，看起来有些杂乱。
AI生成的代码命名规范、注释风格、代码结构也不一样，而且注释过多，有的代码有详细注释，有的则没有，这给后续的维护带来了一定的麻烦。
AI生成的代码命名规范、注释风格、代码结构也不一样，而且注释过多，有的代码有详细注释，有的则没有，这给后续的维护带来了一定的麻烦。
AI生成的代码有时候会存在“冗余”或者“逻辑不够严谨”的情况
前后端联调，参数对齐，bug修改
如何解决呢：
ui可以通过skill的方式进行统一，我这里使用的是开源的frontend-design，但是在项目中可以和 UI 对齐设计规范、组件标准，梳理出整套项目专属的设计规则，再蒸馏提炼出专属的skill配置，基于这份 Skill 约束后，AI 生成的页面组件、配色、间距、交互形态都会严格遵循项目设计规范。
代码的风格问题，cursor可以通过rules进行规范，这里其实rules与skill其实差不多，rules没必要我们自己去制定，完全可以先产出一份全面的示例代码，然后让cursor去根据示例代码生成一份rules，我们只需要去review后微调就行了，当然还有一些其他的比较好用的skill可以看一下https://skills.sh/。
但是代码仍会有小部分的问题，rules约束不到，这里后续修改时，直接让cursor全局检索后统一修改。
前后端联调，对参数这些问题，cursor可以根据后端接口定义，字段在前端生产配套的ts类型，接口请求方法，同时自动补全前端业务调用逻辑；参数格式、字段映射、数据结构对齐也能一键搞定。
个人的vibe coding流程
规范方面
- 提前和 UI 对齐设计规范、组件样式、间距配色、交互逻辑，提炼整套 UI 设计标准；
- 基于 UI 规范蒸馏出，让 AI 后续所有页面、组件生成都遵循统一视觉标准，从根源消除廉价 “AI 味”；
- 整理团队编码规范、命名规则、注释风格、目录结构，产出一份示例代码；
- 用示例代码让 AI 自动生成rules规则，我们微调审核后锁定全局代码风格约束，其中也会包括组件的拆分这一些，目录规范这一些。
- 也会引入一些开源的skill： https://skills.sh/
联调方面
- 将前端、后端项目放在同一 AI 工作空间，让 AI 可同时解析两端代码；
- 根据后端接口，让ai自动生成前端ts类型，接口，参数结构体等；
- AI 自动对齐前后端参数字段、数据格式、枚举定义，省去手动对照文档；
- 业务逻辑、接口调用逻辑由 AI 补全，人工只做业务逻辑校验和边界处理。
具体编码方面
需求→AI 复述→核对对齐→编码生成→Review 微调
- THE END -
共有 0 条评论