返回总览
01

项目负责人

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 种预设颜色,每种颜色都有激活态、非激活态的完整状态定义。

标签 1标签 2标签 3标签 4标签 5标签 6标签 7标签 8标签 9标签 10标签 11

标签胶囊支持横向滚动筛选,多标签笔记在卡片底部显示彩色分段条,视觉上一目了然

设计系统建设

为保证产品视觉的一致性与可维护性,我建立了完整的设计规范文档

颜色体系

#545454

主色 · 标题、重要文字

#808080

辅助色 · 次要文字、说明

#C4B8B1

金色 · 强调标签、激活态

#F5F5F5

边框色 · 分割线、边框

字号与字重

大标题 18px页面主标题
标题 16px导航栏标题
正文 15px主要内容
辅助 13px次要信息、日期
小标签 11px强调标签

组件规范

胶囊(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 能力边界的清晰认知。