如何设计需求：我的真实试错过程

1. 在进行 Vibe Coding 之前，你会想一些基本的东西，例如：我怎么实现一个产品？

2. 例如我想实现一个网站像 https://www.knowfun.io/ 一样，我需要实现哪些前端功能，哪些后端功能？

3. 这篇文章不是给你“正确答案“，而是让你看到我真实的试错过程 —— 从失败到成功。

第一性原理思考：收集更多有效信息

怎么让 AI 帮你做好设计？—— 给它更多真实信息。

使用 web_search 尽可能挖掘信息，进入网页，使用截图，和大模型对话，告诉大模型你的场景、你的技术栈。

信息收集方法论

你可以给 AI 喂这些信息：

• 截图 —— 进入网页，截图给 AI 看，让它“看到“真实界面
• 抓包 —— 打开 DevTools，把网络请求发给 AI，让它知道接口长什么样
• 搜索 —— 用 web_search 查竞品、查资料，把结果喂给 AI
• 角色 —— 告诉 AI “你是产品经理”、“你是架构师”，让它换个视角思考
• 约束 —— 告诉 AI 你的技术栈，比如 “我用 Next.js + FastAPI”
• 差异 —— 告诉 AI 你和原产品的不同，比如 “我不是生成 PPT，是生成 HTML 动画”
• 文档 —— 把官方文档、设计规范喂给 AI，让它基于权威资料输出

背景：我想做什么

我想实现一个网站，类似 KnowFun（一个 AI 动画讲解生成平台）。

我需要搞清楚：

• 这个产品有哪些前端页面？
• 需要哪些后端接口？
• 数据库怎么设计？

第一步：先确定技术框架

在开始之前，我先确定了技术栈（这个不能让 AI 随便选）：

前端： Next.js + Tailwind CSS + shadcn/ui + Supabase Auth 后端： FastAPI + PostgreSQL + SQLAlchemy 基础设施： Supabase（数据库 + 存储 + 认证）

第二步：让 AI 帮我生成需求文档（3次迭代）

方案一（V1）：直接问 AI

我想实现一个 LLM 生成动画的系统，帮我生成技术框架和功能需求

❌ 问题： 没有给 AI 足够的背景信息，生成的内容太泛泛，不落地。

方案二（V2）：加上角色和背景信息

你是一个资深产品经理，我想模仿 knowfun.io 这个产品，
帮我分析它的功能模块和技术架构...

❌ 问题： AI 没有真正“看过“这个产品，只是在瞎猜。生成的前端页面描述和实际产品差很远。

方案三（V3）：用 Playwright 截图 + Manus[https://manus.im/] 分析

使用 Playwright 进行登录态截图，收集真实的产品信息，然后让 AI 分析。

✅ 结果： 终于得到了准确的需求文档！

方案四（V4）：基于 V3 对话调整，适配自己的需求

V3 生成的是原产品的需求，但我的需求和原产品不完全一样：

V4 做法： 基于 V3 的文档，告诉 AI 我的差异点，让它帮我调整：

基于上面的需求文档，我需要做以下调整：
1. 我不是生成 PPT，而是生成 HTML + GSAP 动画代码
2. 用户输入内容后，LLM 直接生成可运行的 HTML 动画
3. 不需要导出功能，直接在网页 iframe 中预览
4. 请帮我调整相关的数据库设计和 API 接口

✅ 结果： 得到了符合我实际需求的定制化文档！

四种方案对比

💡 核心教训：

1. 让 AI 做需求分析，必须给它真实的产品数据
2. 抄完之后要根据自己的需求调整，不能完全照搬

最终方案输出（V3 生成的文档）

KnowFun 产品设计文档

1. 产品概述

•
产品名称: KnowFun

•
产品定位: 一个AI驱动的革命性教育应用，旨在“让每个人的知识学习都毫不费力”。它将您的学习材料转化为个性化的多模态内容（如视频、PPT），以提供量身定制的学习体验。

•
目标用户群体: 从免费体验者到个人用户、专业用户和企业用户，覆盖不同需求的用户群体。

•
核心功能概述: AI驱动的课程/演示文稿生成、支持多种教学风格、实时问答与测试、文档/演示文稿管理、积分/存储空间管理。

•
技术栈:

•
前端框架: Next.js (基于React)

•
UI 组件库: 未明确识别，但从类名和HTML结构来看，可能是自定义组件或未被识别的库。

•
打包工具: Webpack (Next.js默认)

•
后端技术线索: Vercel (从响应头推断)，API Host为 https://api.knowfun.io 。






2. 前端页面结构、交互与样式分析

2.0 整体视觉与样式分析

方面
描述
关键元素
整体风格
现代、简洁、扁平化设计，注重内容展示和功能性。采用深色模式（Dark Mode）和浅色模式（Light Mode）切换。
侧边栏导航、卡片式内容展示、居中布局。
配色方案
主色调: 紫色系（如 #8B5CF6 或更深的紫色）用于按钮、高亮和品牌元素。辅助色: 绿色系（如 #10B981）用于成功提示和功能强调。背景: 浅色模式下为白色/浅灰色，深色模式下为深灰色/黑色。
导航栏高亮、Submit 按钮、功能卡片边框。
字体
采用无衬线字体，如系统默认字体或 Tailwind CSS 默认字体（如 Inter），确保在不同设备上的可读性。
标题使用粗体，正文使用常规字重。
布局
采用左侧固定侧边栏（用于主要功能导航和用户状态展示），右侧主内容区的经典 Web 应用布局。内容区多采用卡片式布局，便于信息组织和视觉聚焦。
侧边栏、内容卡片、居中表单。
交互
按钮和链接有明显的悬停（Hover）和点击（Active）反馈。核心功能（如课程创建）采用分步引导或模态框进行操作。
提交按钮的动画、导航栏的选中状态。


2.1 页面列表梳理

2.1 页面列表梳理

页面路径
页面名称
页面功能
需要登录
/
首页
产品介绍、定价信息、引导注册/登录
❌
/learn/course-creation
课程创建页
核心功能入口，通过文本/文件/链接生成课程
✅
/learn/my-document
我的文档
用户上传文档列表管理
✅
/learn/my-courses
我的演示文稿
用户已生成课程/演示文稿列表管理
✅
/fun-square
Fun Square
用户分享和发现内容的社区
❌/✅
/pricing
定价页
详细展示不同套餐的定价和权益
❌
/referral
邀请页
邀请好友获取积分奖励
✅
/user
个人中心
账户信息、积分、订阅管理
✅


2.2 交互元素清单 (以课程创建页 /learn/course-creation 为例)

元素类型
位置
触发条件
交互行为
API 调用 (推断)
文本输入框
页面中央
输入问题/主题
准备生成内容
N/A
文件上传区
页面中央
拖拽或点击上传文件
上传文件到云存储
POST /api/document/upload
提交按钮
页面底部
点击"Submit"
触发课程生成流程
POST /api/course/create
侧边栏导航
页面左侧
点击链接
页面跳转
N/A
升级按钮
侧边栏
点击"Upgrade"
跳转到定价页或支付流程
N/A





3. 后端 API 接口逆向与认证分析

3.1 认证机制分析

•
认证方式: Clerk 身份验证服务。

•
实现细节: 登录后，浏览器Cookie中包含 __session 等JWT格式的Token。应用通过这些Token进行用户身份验证和授权。

•
Token 刷新机制: 由 Clerk 服务管理，应用层无需关心。

3.2 API 接口清单 (推断)

接口名称
HTTP 方法
请求路径 (推断)
请求参数 (推断)
响应结构 (推断)
认证方式
用户积分/存储信息
GET
/api/user/info
无
{ "credits": 500, "storage_used": 0, ... }
Bearer Token
文档上传
POST
/api/document/upload
file (FormData)
{ "document_id": "xxx", "url": "xxx" }
Bearer Token
文档列表
GET
/api/document/list
?page=1&limit=20
{ "data": [...], "total": 0 }
Bearer Token
课程/演示文稿列表
GET
/api/course/list
?page=1&limit=20
{ "data": [...], "total": 0 }
Bearer Token
课程/演示文稿创建
POST
/api/course/create
{ "input_type": "text", "text_input": "...", "style": "..." }
{ "task_id": "xxx", "status": "pending" }
Bearer Token
课程/演示文稿详情
GET
/api/course/:id
路径参数 id
{ "id": "xxx", "title": "...", "content": "..." }
Bearer Token
社区内容列表
GET
/api/square/content/list
?sort=hot&page=1&limit=20
{ "data": [...], "total": 0 }
无需认证
社区内容详情
GET
/api/square/content/:id
路径参数 id
{ "id": "xxx", "title": "...", "content": "..." }
无需认证
内容点赞
POST
/api/square/content/:id/like
{ "action": "like" }
{ "success": true, "likes": 1 }
Bearer Token
PPT/演示文稿导出
GET
/api/course/:id/export?format=ppt
路径参数 id，查询参数 format
文件流
Bearer Token
课程/演示文稿分享
POST
/api/course/:id/share
{ "public": true }
{ "share_url": "https://www.knowfun.io/share/xxx" }
Bearer Token
邀请规则
GET
/api/referral/rules
无
{ "refereePoints": 100, "referrerPoints": 500, ... }
无需认证
获取邀请码
GET
/api/referral/code
无
{ "code": "VP86D2", "link": "..." }
Bearer Token





4. 数据结构推断

4.1 数据模型梳理 (推断 )

User 表 (基于 Clerk 用户信息和应用数据)

Plain Text


User 表:
- id (VARCHAR, PRIMARY KEY)  // Clerk User ID
- email (VARCHAR, UNIQUE)
- username (VARCHAR)
- credits (INT, DEFAULT 500)
- storage_limit (INT, DEFAULT 5) // GB
- storage_used (INT, DEFAULT 0) // MB
- created_at (DATETIME)


Document 表 (用户上传的文档)

Plain Text


Document 表:
- id (VARCHAR, PRIMARY KEY)
- user_id (VARCHAR, FOREIGN KEY -> User.id)
- title (VARCHAR)
- file_path (VARCHAR) // S3 或其他存储路径
- file_size (INT) // MB
- upload_date (DATETIME)
- status (VARCHAR) // e.g., 'uploaded', 'processing', 'ready'


Course/Presentation 表 (生成的课程/演示文稿)

Plain Text


Course 表:
- id (VARCHAR, PRIMARY KEY)
- user_id (VARCHAR, FOREIGN KEY -> User.id)
- title (VARCHAR)
- input_type (VARCHAR) // 'text', 'file', 'url'
- style (VARCHAR) // 'academic', 'humorous', etc.
- generation_status (VARCHAR) // 'pending', 'generating', 'completed', 'failed'
- created_at (DATETIME)
- last_modified (DATETIME)
- content_json (JSON/TEXT) // 存储演示文稿的结构化内容


4.2 关联关系分析

•
User 1:N Document: 一个用户可以上传多个文档。

•
User 1:N Course: 一个用户可以创建多个课程/演示文稿。

•
User 1:1 ReferralCode: 每个用户有一个唯一的邀请码。




5. 核心业务流程与页面跳转逻辑梳理

5.1 核心业务流程：课程生成流程 (Mermaid 流程图)

mermaid

graph TD
    A[用户在 /learn/course-creation 输入主题/上传文件] --> B{点击 Submit 按钮}
    B --> C[前端调用 POST /api/course/create]
    C --> D{后端验证用户身份/积分/存储空间}
    D --> E{验证通过?}
    E -->|否| F[返回错误信息（积分不足/存储已满）]
    E -->|是| G[创建 Course 记录 (status=pending)]
    G --> H[返回 {task_id: "xxx"}]
    H --> I[前端跳转到 /learn/my-courses 或任务详情页]
    G --> J[异步：AI服务开始生成内容]
    J --> K{生成完成?}
    K -->|是| L[更新 Course 记录 (status=completed)]
    K -->|否| M[更新 Course 记录 (status=failed)]
    L --> N[通知用户 (Message Center)]

5.2 页面跳转逻辑

起始页
触发操作
目标页
携带参数
/ (首页)
点击 "Start For Free"
/learn/course-creation
N/A
/ (首页)
点击 "Pricing"
/pricing
N/A
/learn/course-creation
点击 "My Documents"
/learn/my-document
N/A
/learn/course-creation
点击 "My Presentations"
/learn/my-courses
N/A
/learn/my-courses
点击 课程卡片
/learn/course/:id
课程 ID
任意页
点击右上角头像
/user (个人中心)
N/A





6. 撰写产品设计文档及生成附加产物

6.1 文档结构模板 (已完成大部分内容)

6.2 附加产物

•
API 接口 Postman Collection：需要根据推断的API结构创建。

•
数据库 SQL 建表脚本：需要根据推断的表结构创建。

•
页面截图/流程图：需要进行截图和流程图生成。

•
技术评估报告：需要总结技术栈和风险。




7. 技术评估与风险分析

7.1 技术评估

方面
评估内容
优势
劣势/挑战
前端
Next.js (React)
性能优秀，支持SSR/SSG，利于SEO；生态成熟，组件化开发效率高。
学习曲线相对陡峭；部署成本高于纯静态网站。
后端
推测为Node.js/Go/Python微服务架构，API Host独立于主站。
架构灵活，可扩展性强；API Host独立有利于前后端分离和安全管理。
缺乏直接证据，推测存在不确定性。
认证
Clerk
专业的身份验证服务，提供开箱即用的用户管理功能，安全可靠。
引入第三方依赖，成本和控制权受限。
核心功能
AI驱动的课程生成
创新性强，符合市场趋势；用户体验好，降低内容创作门槛。
对AI模型的依赖性高；生成质量和成本是核心挑战。


7.2 风险分析

风险点
描述
应对策略
API 逆向风险
仅通过前端行为推断API，可能存在参数、请求头、业务逻辑上的偏差。
需通过实际抓包工具（如Charles/Fiddler）进行二次验证。
数据模型推断风险
数据库结构完全基于前端展示和API推断，可能与实际数据库结构不符。
仅作为参考设计，实际开发需根据业务需求和后端规范调整。
AI 成本风险
核心功能依赖AI模型，用户量增加可能导致成本快速上升。
引入积分/额度系统进行控制，并优化AI调用链以降低Token消耗。
流程图渲染失败
流程图渲染工具对中文支持不佳，导致无法生成图片。
在最终报告中提供原始Mermaid代码，并解释渲染失败原因。





8. 附加产物清单

1.
Postman Collection: knowfun_postman_collection.json

2.
数据库 SQL 建表脚本: knowfun_db_schema.sql

3.
核心业务流程图 (Mermaid Source): knowfun_course_creation_flow.md

4.
页面截图: 见附件 knowfun_io_2025-11-27_22-36-28_1424.webp (Fun Square 页面)