Why - 从痛点出发的产品思考

去年备考CELPIP的时候，反复大量的使用GPT来帮我备考，我深刻体验到了现有学习工具的痛点：

重复操作的烦恼：每次练习写作都要把相同的prompt复制粘贴给ChatGPT，然后再把作文贴过去，整个流程繁琐且容易中断思路。

缺乏针对性：通用的AI工具无法提供CELPIP特定的评分标准和反馈格式。

学习资源分散：官方范文、练习题目、评分标准散落在各处，没有一个统一的练习环境。

产品经理的第一想法，干脆自己做一个，顺便也可以从零开始体验一下Web开发的整个流程。从最开始用V0搞出来第一版前端的兴奋，到后面开始学习Nextjs的各种hook和后端的抓狂，最后拖到 AI Coding都升级换代了几波的今天终于算是正式上线，至少能达到自己心中的一个要求。

What - 产品需求到功能实现

基于自己的使用痛点，我梳理出了核心需求：

🎯 核心功能

  • 一站式写作环境：题目选择、写作、评分、反馈都在一个页面完成
  • AI评分：基于OpenAI API，按CELPIP标准给出1-12分评价
  • 写作批改：直接在文本中高亮显示需要改进的地方
  • 官方范文参考：收录90+篇不同分数段的官方范文，便于对比学习

📊 数据管理

  • 练习记录：保存每次的写作内容和评分，方便回顾进步
  • 用户系统：简单的登录注册，管理个人学习数据
  • 题库管理：46+道官方题目的分类和搜索

💡 产品细节

  • 自动保存功能，防止意外丢失内容
  • 响应式设计，在不同设备上都能正常使用
  • 加载状态和错误处理，让用户知道系统在做什么
  • 清晰的信息层级，重要信息一目了然

How - 技术实现与架构

虽然我的主要背景是产品经理，但在这个项目中，我承担了全栈开发的角色，从产品设计到技术实现的完整过程。

🏗 技术架构设计

前端技术栈

  • Next.js 14: 选择App Router架构，一套代码同时处理前后端
  • TypeScript: 全程类型安全，减少运行时错误
  • Tailwind CSS: 快速构建响应式界面
  • Slate.js: 富文本编辑器，支持实时修改建议高亮

后端与数据

  • API Routes: Next.js原生API路由，处理业务逻辑
  • Vercel Postgres: 云原生数据库，自动扩容
  • Clerk Authentication: 企业级认证解决方案
  • OpenAI Integration: AI评估服务集成

数据库设计

-- 用户表
CREATE TABLE users (
  id TEXT PRIMARY KEY,
  email TEXT,
  usage_count INTEGER DEFAULT 30
);

-- 评分历史表
CREATE TABLE score_history (
  id SERIAL PRIMARY KEY,
  user_id TEXT,
  question TEXT,
  essay TEXT,
  ai_response JSONB,
  ai_corrections JSONB,
  created_at TIMESTAMP DEFAULT NOW()
);

🔧 核心功能实现

双阶段AI评估系统

基于产品需求，我设计了分离的评分和建议系统：

// 阶段一：CELPIP标准评分
const scoreResponse = await openai.chat.completions.create({
  model: "o1-mini",
  messages: [{
    role: "user", 
    content: celpipTeacherPrompt + userEssay
  }]
});

// 阶段二：详细修改建议
const correctionResponse = await openai.chat.completions.create({
  model: "o1-mini",
  messages: [{
    role: "user",
    content: celpipCommentsPrompt + userEssay
  }]
});

智能状态管理

实现了全局用户状态管理，避免重复API调用：

  • Context-based状态管理
  • 智能缓存机制（30秒缓存窗口）
  • 用户初始化自动化

富文本编辑器集成

使用Slate.js实现了复杂的文本高亮功能：

  • 基于字符索引的精确定位
  • 动态样式渲染
  • 实时反馈展示

🎯 产品设计到技术实现

从产品经理的角度，我特别关注了几个技术实现细节：

用户体验优化：

  • 主动用户初始化，消除新用户错误
  • 自动保存机制，防止内容丢失
  • 优雅的错误处理和加载状态
  • 响应式设计，跨设备一致体验

性能优化：

  • 全局状态缓存，减少API调用频次
  • 组件级懒加载
  • 数据库查询优化
  • CDN静态资源部署

系统架构：

celpip/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── api/            # 后端API路由
│   │   ├── writing/        # 写作练习页面
│   │   └── history/        # 历史记录页面
│   ├── components/         # React组件库
│   │   ├── Essay.tsx       # 核心编辑器组件
│   │   ├── Score.tsx       # 评分展示组件
│   │   └── SampleAnswersPanel.tsx # 范文对比面板
│   ├── contexts/           # 全局状态管理
│   ├── hooks/              # 自定义React Hooks
│   ├── lib/                # API封装和工具函数
│   └── data/               # 静态数据和配置
├── public/                 # 静态资源
└── vercel.json            # 部署配置

🎯 技术挑战与解决方案

挑战1：AI评分的准确性与稳定性 OpenAI API返回格式的不稳定性是最大的挑战。通过精心设计prompt工程和JSON schema验证，实现了稳定的结构化输出：

  • 设计了详细的评分标准prompt
  • 实现了JSON解析的fallback机制
  • 添加了重试逻辑和指数退避策略

挑战2：复杂的状态管理 多个组件间的状态同步问题需要架构级的解决方案：

  • 实现了Context-based的全局状态管理
  • 设计了单一数据源架构，避免状态不同步
  • 引入智能缓存策略，优化API调用频率

挑战3：富文本编辑器的复杂交互 实现写作建议的实时高亮需要深度集成Slate.js：

  • 基于字符索引的精确文本定位算法
  • 自定义渲染器处理动态样式
  • 优化了大文本的渲染性能

挑战4：用户体验的技术实现 将产品设计转化为技术实现时的细节处理：

  • 设计了主动初始化架构，消除新用户的错误提示
  • 实现了自动保存机制和离线状态处理
  • 优化了加载状态和错误边界的用户反馈

🚀 项目成果

技术指标

  • 构建性能: 主页 6.68KB，写作页面 80.8KB
  • 响应时间: AI评分 15-30秒，界面响应 <100ms
  • 系统可用性: 99.9% 在线时间
  • 数据处理: 支持90+范文，46+题目的实时检索

核心功能实现

智能评分引擎： 基于OpenAI o1-mini模型，实现了双阶段评估系统：

  1. 综合评分：按CELPIP 1-12分标准的四维度评估
  2. 细节修改：逐词分析，提供具体改进建议

范文智能匹配：

  • 自动识别用户选题，匹配相关官方范文
  • 支持分数段筛选和动态排序
  • 实现了高效的文本检索算法

用户系统：

  • 集成Clerk企业级认证方案
  • 设计了完整的用户生命周期管理
  • 实现了学习进度跟踪和历史数据分析

💡 产品经理视角的技术收获

需求到实现的完整闭环： 从用户痛点识别，到产品需求定义，再到技术架构设计和代码实现，体验了完整的产品开发流程。

技术决策能力： 学会了在功能需求、开发成本、维护复杂度之间做平衡，比如选择Clerk而非自建认证系统。

全栈开发能力： 掌握了现代Web开发的完整技术栈，能够独立完成从数据库到前端的全部开发工作。

系统思维： 理解了软件系统的复杂性，包括状态管理、错误处理、性能优化等非功能性需求的重要性。

💼 技术价值与能力展示

这个项目充分展现了我在以下技术领域的综合能力：

全栈开发能力

  • 前端架构: React生态系统的深度应用，包括状态管理、组件设计、性能优化
  • 后端开发: API设计、数据库操作、第三方服务集成
  • 系统设计: 从需求分析到架构设计的完整能力
  • DevOps实践: 现代化的部署流程和生产环境管理

AI/ML集成能力

  • Prompt工程: 深度理解大语言模型的使用方法和限制
  • API集成: 复杂的第三方AI服务集成和错误处理
  • 数据处理: JSON解析、格式化和验证的健壮实现

产品技术融合

  • 用户体验设计: 将产品思维转化为技术实现细节
  • 性能优化: 基于用户体验的技术优化决策
  • 错误处理: 产品级的异常情况处理和用户反馈

学习与适应能力

  • 快速上手: 能够快速掌握新技术栈并应用到实际项目
  • 问题解决: 系统性的debug能力和解决复杂技术问题的思路
  • 技术选型: 基于项目需求做出合理的技术架构决策

🔍 技术选型的产品思维

从产品经理的角度，我在技术选择上特别关注：

开发效率 vs 学习成本：

  • Next.js提供全栈解决方案，减少技术栈复杂度
  • TypeScript提供类型安全，降低运行时错误

用户体验 vs 实现复杂度：

  • Slate.js虽然复杂，但能实现精确的文本高亮效果
  • Clerk认证服务保证了安全性和用户体验

可维护性 vs 功能完整性：

  • 模块化的组件设计，便于后续功能扩展
  • 统一的状态管理，降低系统复杂度

🤝 写在最后

很久之前面试的时候有一个疑惑，一个产品经理怎么做自己不是其产品的目标用户的产品，问了几个面试官，发现大家也都是一套官话需求调研，把自己当小白去体验。 时过境迁，脱离大厂之后，终于可以尽情把自己当用户，尽情做想做的产品。 这个项目从我自己的需求出发，通过学习技术知识，最终实现了一个完整的产品。虽然代码可能不够优雅，架构也不够完美，但它解决了我的实际问题，也成为我学习新技能的宝贵经历。

AI时代，产品经理，不，是所有有想法像真正做事情的人的黄金时代。

项目地址：GitHub | 在线体验：celpip12.vercel.app

欢迎体验和反馈！