compoder
拆分工作流,把 AI融入到每个细节中,这样输出的代码可控,并且能提升整体的生成质量。
业务组件开发 - 页面联调对接
然后对每个步骤进行优化,留下相应的prompt
组件库开发,组件开发,文档补全,测试用例补全
AI友好的后端整洁分层架构
- 第一层: DB 层(
lib/db/*):types.ts(数据表类型定义)、schema.ts(schema 定义)、selectors.ts(数据查询)、mutations.ts(数据变更) - 第二层:API 层(
app/api/*):*/types.d.ts(跟前端的 req、res 类型定义) 、*/list/route.ts(列表) 、*/create/route.ts(创建) 、*/update/route.ts(更新) 、*/delete/route.ts(删除)
AI友好的前端整洁分层架构
- 第一层:基础组件层(
components/ui/*) - 第二层:业务组件层(
components/biz/*),基于 shadcn-ui 基础组件 + 业务规则的二次封装 - 第三层:API 请求服务层(
app/services/*)。统一管理前端需要调用的 API 请求,包括请求参数类型、请求方法、请求路径、请求头、请求体类型、响应数据类型等 - 第四层:server-store 层(
app/**/*/server-store/*)。统一管理对应页面需要对接的后台 api 数据,包括数据变更、数据查询等 - 第五层:页面层(
app/**/*/page.tsx):统一拼装对应页面需要对接的业务组件、同时给页面接入在 server-store 中管理的数据
AI 工作流
