本节课开始往后，按 3 个模块讲解 Compoder 的实现。

• 设计理念

• 功能模块拆解

• AI 赋能编码

产品设计

产品源起

实战一项目功能角度分析

• 现有 Embedding 式 RAG 召回的知识内容不够准确

• 无法通过图片直接召回所需要用到的私有组件知识

• 只能根据当前发送的这条消息来召回知识，没有上下文关联

...

实战一项目体验角度分析

• 生成的代码不能够及时看到反馈（代码效果实时预览）

• 代码不能人工介入编辑微调

• 生成的代码缺少存储和版本等管理

...

市场调研分析

市面已有产品没有解决的问题：

• 基于特定业务场景、特定技术栈的代码生成

产品定位

助力前端定制专属技术栈 & 特定业务场景下的前端组件代码生成器，通过 Prompt to code 高效生成对应的组件代码。

产品愿景

助力前端转型成为 AI 时代下的 Design Engineer，一个人搞定 UI 设计，前端研发。

产品功能模块

详见：https://github.com/IamLiuLv/compoder/blob/compoder-course/README_CN.md

技术架构设计

技术模块

数据库模块：

• lib/db

前端模块：

• components/ui

• components/biz

• app/**/*/page.tsx

后端模块：

• app/api/codegen/list/route.ts

AI 模块：

• app/api/ai-core

AI 友好的整洁分层架构

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/*)

来源于 shadcn-ui 的组件

• Accordion

• Button

• Card

• Input

• ...

第二层：业务组件层(components/biz/*)

基于 shadcn-ui 基础组件 + 业务规则的二次封装

• index.ts 导出组件

• [ComponentName].tsx 组件实现

• [ComponentName].stories.tsx 组件文档

• interface.ts 组件接口类型定义

第三层：API 请求服务层(app/services/*)

统一管理前端需要调用的 API 请求，包括请求参数类型、请求方法、请求路径、请求头、请求体类型、响应数据类型等

第四层：server-store 层(app/**/*/server-store/*)

统一管理对应页面需要对接的后台 api 数据，包括数据变更、数据查询等

第五层：页面层(app/**/*/page.tsx)

统一拼装对应页面需要对接的业务组件、同时给页面接入在 server-store 中管理的数据

技术栈选择

选择原则：

• 能够完成产品功能

• 流行 & 社区活跃度高

• AI 友好

具体选择：

• 数据库：MongoDB

• 前后端框架：Next.js

• 组件库：Shadcn UI

• 样式：Tailwind CSS

• AI 框架：Vercel AI SDK

• 部署：Docker