项目负责人
NextNote 未来笔记
NextNote 是我从 0 到 1 完整负责的 AI 笔记产品。这不是一个简单的笔记应用——它融合了 AI 能力、富文本编辑、语音输入、多设备同步等复杂功能,是一个完整的全栈产品。
作为项目负责人,我主导了产品定义、交互设计、视觉规范、原型输出,并深度参与技术方案讨论。项目经历了 205+ 次迭代提交,从最初的原型到现在的完整产品,每一个细节都经过反复打磨。
项目规模
205+
迭代提交
88+
前端模块
3
技术栈
1
完整设计系统
Flutter 移动端
跨平台移动应用,支持 iOS 和 Android。包含富文本编辑、AI 功能、语音输入等复杂交互。
88+ Dart 模块
FastAPI 后端
Python 后端服务,处理用户认证、数据同步、AI 请求代理、Token 配额管理等。
RESTful API + 流式响应
Next.js 管理后台
完整的后台管理系统,包含 Token 用量看板、用户管理、配额配置、数据统计等。
shadcn/ui + Recharts
核心功能
产品功能经过多轮迭代,每个功能都服务于「让记录更智能」的核心目标
AI 深度集成
编辑器内 AI
- 智能插入:基于上下文智能生成内容,AI 能「读懂」你正在写什么
- 文本处理:选中文字后可润色、翻译、扩写、缩写,流式输出实时可见
- 自定义指令:支持用户输入自定义 Prompt,满足个性化需求
- 全局上下文:可选择让 AI 读取所有笔记,实现跨笔记的智能理解
AI 助手
- AI 聊天模式:主页可直接与 AI 对话,快速获取信息或头脑风暴
- 智能标题生成:AI 自动根据内容生成标题、副标题和标签
- 语音转写:长按录音,AI 自动转写并创建笔记
编辑体验
富文本编辑
基于 flutter_quill 深度定制,支持标题、加粗、斜体、对齐等格式
图片插入与拖拽
支持图片插入、拖拽排序,带有丝滑的动画效果
横线底纹
笔记详情页支持横线底纹显示,营造纸质笔记的质感
Markdown 支持
可插入 Markdown 卡片,满足技术写作需求
音频内嵌
录音可内嵌在笔记中播放,实现语音笔记功能
截图导出
支持将笔记导出为长图分享
动态标签系统
标签不只是分类工具,更是视觉语言的一部分。我设计了一套完整的动态配色系统,11 种预设颜色,每种颜色都有激活态、非激活态的完整状态定义。
标签胶囊支持横向滚动筛选,多标签笔记在卡片底部显示彩色分段条,视觉上一目了然
设计系统建设
为保证产品视觉的一致性与可维护性,我建立了完整的设计规范文档
颜色体系
#545454
主色 · 标题、重要文字
#808080
辅助色 · 次要文字、说明
#C4B8B1
金色 · 强调标签、激活态
#F5F5F5
边框色 · 分割线、边框
字号与字重
组件规范
胶囊(Capsule)
激活态:标签颜色 100%,白色文字
非激活态:标签颜色 12%,标签色文字
标签(Tag)
已选中:背景 30%,边框 100%
未选中:背景 15%,边框 50%
圆角与动画
圆角规范
应用图标 20px · 卡片 16px · 胶囊 14px · 标签 3px
动画规范
高度展开 300ms · 旋转 250ms · 渐入 150ms+n×80ms
统一使用 easeOutCubic 曲线
项目演进
从第一行代码到完整产品,205+ 次提交记录了每一个决策和迭代
第一阶段:基础架构
- • 实现笔记详情页面,支持横线底纹和系统字号缩放
- • 添加富文本编辑功能,迁移到 Flutter Quill
- • 实现创建新笔记、撤销、重做、删除笔记功能
- • 实现搜索功能和标签筛选页面
第二阶段:AI 能力
- • 实现 AI 助手聊天功能,重构为锤子 OS 风格
- • 添加笔记编辑页面的 AI 文本处理功能
- • 添加 AI 自定义提示词功能并优化 UI 样式
- • 添加智能插入功能,支持上下文感知
- • 添加 AI 生成标题功能
第三阶段:体验打磨
- • 实现标签动态配色系统
- • 优化图片拖拽功能:右侧轻拟物手柄 + 视觉行边界插入
- • 重构设置界面设计风格,对标苹果/锤子简洁设计
- • 优化语音输入体验:缩短长按阈值,添加震动反馈,实现平滑过渡动画
- • 统一首页底部输入框组件,使用 AnimatedSwitcher 实现平滑文字切换
第四阶段:系统完善
- • 实现语音笔记录音保存和 AI 自动生成标题功能
- • 增强 AI 服务与 Token 管理功能
- • 实现笔记置顶功能并更新数据库架构
- • 新增后台管理平台,支持 Token 用量、用户管理、AI 使用、配额配置、性能监控
- • 实现版本管理功能和更新提示
后台管理系统
为产品运营提供完整的数据支撑和管理能力
Token 使用看板
Token 使用趋势分析、时段分布统计、功能使用分布、Top 用户排行
用户管理
用户列表查询、配额使用查看、套餐类型调整、设备管理、用户禁用/启用
配额配置
套餐配置管理、配额概览统计、批量重置配额
统计分析
用户增长趋势、留存率分析、设备分布统计、功能使用排行
项目价值
能力体现
- ✓从 0 到 1 完整负责一个产品的全流程
- ✓全栈视角 理解前端、后端、运营后台的协作关系
- ✓设计系统 建立可维护、可扩展的设计规范
- ✓AI 产品 深度理解 AI 能力的产品化落地
设计思考
NextNote 不只是一个笔记工具,而是一个「AI 原生」的创作助手。我的设计目标是让 AI 能力自然融入用户的写作流程中,而不是作为一个「功能」被刻意调用。这需要对用户行为的深度理解,以及对 AI 能力边界的清晰认知。