【Code With SOLO】百度脑图下线后，我一个小白18天用从零打造一个思维导图 ，还比BD脑图强大

[知鱼品牌善犀]

这是一个已经上线的免费产品，体验链接：https://www.flumind.cn/

如果你刚开始玩，我相信对你会有帮助的，因为我和你一样也不是程序员。但是我做了自己、同事、朋友都在用的网页产品。

从想法到产品：一个真实的故事

# 起点：一个简单的想法

我是一个品牌策划公司创始人，也是思维导图的重度用户，思考，做项目，开会，都离不开。但是我一直有一个想法：做一个无限画布类思维导图工具，最好可以有图片。最好可以互联，支持多文本编辑，这样的话他就可以做很多很多事情。比如规划一项目，做图文脚本，参考之类。

市面上的思维导图工具不够自由。我想要的是：

• 像白纸一样自由的画布

• 可以随意拖拽的卡片

• 卡片之间能画连接线

• 支持图片、链接等多种内容

但问题是：我不会编程。

# 转折：遇到 Vibe Coding

直到我年初，听我认识的唯一一位程序员，我一直以来的技术合伙人健麟，再三推荐了 Vibe Coding 给我—— 一种用 AI 协作开发的新方式。不是让 AI 帮你写几行代码，而是像和一个懂技术的合伙人对话一样，把产品做出来。

我决定试试。

# 结果：17 天后

• Flumind 上线了（国内外都上线了）

• 261 次代码提交，平均每天 20 次迭代

• 完整的产品功能：用户系统、会员系统、分享功能、导出功能…

• 真实用户在使用

这不是魔法，而是一种全新的工作方式。而这个过程，我融入了一个全新的领域，体验到了，好久没体验到的快乐。

---

Vibe Coding 是什么？

# 用人话说

想象一下：

• 你有一个懂技术的合伙人，24 小时在线

• 你说想法，TA 帮你实现

• 你不需要学编程，但需要清楚地表达需求

• 你们一起快速试错、快速迭代

这就是 Vibe Coding。

# 和传统开发的区别

传统开发

Vibe Coding

找程序员 → 写需求文档 → 等待开发 → 测试 → 修改

和 AI 对话 → 实时看到结果 → 调整 → 再对话

周期：几周到几个月

周期：几小时到几天

成本：几万到几十万

成本：AI 订阅费（几百元/月）

沟通成本：高（需求理解偏差）

沟通成本：低（即时反馈）

适合：大型项目

适合：MVP、快速验证想法

# 核心理念

1. 你是产品经理：你决定做什么、为什么做

2. AI 是工程师：AI 负责怎么做、用什么技术

3. 快速迭代：不追求一次完美，而是持续改进

4. 用户导向：功能为用户服务，不为技术炫技

---

真实开发场景

让我分享几个真实的开发故事，展示 Vibe Coding 是如何工作的。

# 场景 1：连接线太"硬"了 —— 贝塞尔曲线的折磨

问题出现

产品上线后，我觉得：“卡片之间的连接线看起来很生硬，不够自然。”

还有很多问题：

• 有时候连接线应该从卡片侧方出来，却从下面出来

• 两个卡片很近时，连接线弯曲得很夸张

• 整体看起来不够"专业"

  我的思考

我不懂什么是"贝塞尔曲线顶级算法"，但我知道：

• 用户体验不好

• 需要更智能的连接算法

• 市面上专业工具（如 Figma、Miro）的连接线很自然

  和 AI 的对话

我： “用户说连接线不够自然，能不能优化一下？”

AI： "当前算法只基于卡片中心点角度判断连接点，我建议采用业界标准的智能连接算法：

1. 边界感知 - 基于卡片实际位置选择最优连接点

2. Catmull-Rom 样条曲线 - 专业图表库使用的算法

3. 动态张力控制 - 根据距离自动调整弯曲程度"

我： “那就做吧。”

AI： “我会创建一个 Spec（规格文档），先设计算法，再实现。预计需要处理 4 个核心需求…”

开发过程

这个功能折磨了我们很久：（大概4~5个小时）

第 1 次：AI 创建了详细的需求文档

• 定义了什么是"智能连接"

• 列出了 5 个核心需求

• 每个需求都有明确的验收标准

第 2-3 次：设计算法

• AI 研究了 React Flow、JointJS 等专业库的算法

• 设计了边界感知的连接点选择逻辑

• 画出了算法流程图

第 4-5 次：实现代码

• 写了 calculateOptimalPosition 函数（选择连接点）

• 写了 createPathData 函数（生成曲线）

• 处理了各种边界情况

第 6-7 次：测试和调优

• 测试了上百种卡片位置组合

• 调整了张力参数（从 0.3 到 0.7）

• 修复了近距离连接时的过度弯曲问题

第 8 次：终于完成！

结果

• 连接线看起来自然流畅

• 自动选择最优连接点

• 近距离和远距离都表现良好

• 我反馈：“现在看起来专业多了！”

  我学到了什么

1. 复杂功能需要耐心：不是所有功能都能一天完成

2. Spec 驱动很重要：先想清楚再动手，避免返工

3. 业界标准值得学习：不要重复造轮子

4. 测试很关键：算法需要大量测试才能稳定

---

# 场景 2：卡片乱糟糟 —— 超级整理功能

问题出现

有时候，只有一些散点式的想法，在白板上创建了几十个卡片后，画布变得很乱：

• 卡片位置随意

• 没有对齐

• 看起来不专业

我想：“能不能一键整理？”

我的想法

我想要的效果：

• 一键点击，所有卡片自动排列整齐

• 保持连接关系：有连接线的卡片应该靠近

• 网格对齐：看起来像表格一样整齐

  和 AI 的对话

我： “能不能做一个’超级整理’功能，一键把卡片排列整齐？”

AI： “这是一个图布局问题。我建议使用 dagre.js 库，它实现了 Sugiyama 算法，是学术界公认的层级图布局标准。”

我： “听起来很专业，但用户只需要点一下按钮就能整理，对吧？”

AI： “对，用户只需要点击。我会处理所有复杂的算法逻辑。”

开发过程

第 1 次：需求分析

• 定义了 7 个核心需求

• 包括：智能行列聚类、均匀间距、连接关系保持、卡片组整体移动…

第 2 次：技术选型

• 研究了 dagre.js 库

• 设计了"连接节点用 dagre 布局 + 孤立节点就地对齐"的混合方案

第 3 次：实现核心算法

• 构建虚拟节点（处理卡片组）

• 使用 dagre 计算有连接的卡片布局

• 就地对齐孤立卡片

第 4 次：添加动画效果

• 卡片移动时有平滑过渡

• 使用缓动函数让动画更自然

第 5 次：测试和优化

• 测试了各种复杂布局

• 处理了重叠检测和修复

• 优化了性能

  结果

• 一键整理，画布瞬间变整齐

• 保持了连接关系

• 卡片组整体移动，相对位置不变

• 我反馈：“这个功能太实用了！”

  我学到了什么

1. 站在巨人的肩膀上：使用成熟的算法库，不要从零开始

2. 用户体验细节：动画效果让功能更有"质感"

3. 混合方案：不同场景用不同算法，灵活组合

4. 测试覆盖：复杂算法需要大量边界情况测试

---

# 场景 3：图片加载太慢 —— 七牛云存储迁移

问题出现

产品上线后，我上传了很多图片。问题来了：

• 加载速度慢：图片存在服务器上，访问速度受限

• 存储空间不够：服务器硬盘只有 20GB

• 无法区分：免费用户和会员用户存储限制一样

  我的思考

我需要：

• 更快的图片访问

• 更大的存储空间：云存储

• 存储配额管理：免费用户 50MB，会员 5GB

  和 AI 的对话

我： “图片加载太慢了，能不能用云存储？”

AI： "建议使用七牛云对象存储，它提供：

1. CDN 加速 - 全国访问速度快

2. 无限存储空间

3. 按量付费，成本可控

需要配置 AccessKey、SecretKey、Bucket…"

我： “听起来很复杂，我不懂这些技术细节。”

AI： "没关系，我会处理所有技术细节。你只需要：

1. 注册七牛云账号

2. 创建一个存储空间（Bucket）

3. 把 AccessKey 和 SecretKey 告诉我

其他的我来做。"

开发过程

第 1 次：需求梳理

• 定义了 8 个核心需求

• 包括：配置管理、上传凭证、客户端直传、存储配额…

第 2 次：配置七牛云

• 我注册了七牛云账号

• 通过截图让ai带我操作

• 创建了存储空间

• 配置了 CDN 域名

第 3 次：实现上传功能

• 服务端生成上传凭证

• 客户端直接上传到七牛云

• 返回 CDN 访问 URL

第 4 次：存储配额管理

• 数据库添加 storageUsed 和 storageQuota 字段

• 上传时检查配额

• 删除时释放空间

第 5 次：数据迁移

• 写了迁移脚本

• 把现有图片上传到七牛云

• 更新数据库中的 URL

第 6 次：测试和上线

• 测试上传、删除、配额检查

• 监控 CDN 访问速度

• 正式切换到七牛云

  结果

• 图片加载速度提升 3 倍

• 存储空间无限扩展

• 免费用户 50MB，会员 5GB

• 我反馈：“图片加载快多了！”

  我学到了什么

1. 第三方服务很强大：不要自己造轮子

2. 配额管理是产品差异化的基础：为会员系统铺路

3. 数据迁移需要谨慎：先测试，再批量迁移

4. 成本控制：按量付费，初期成本很低

---

# 场景 4：新用户不会用 —— 演示模式

问题出现

产品推广后，有朋友圈朋友注册了，但：

• 不知道怎么用

• 看到空白画布就关闭了

• 留存率很低

  我的灵感

我想到：能不能做一个演示模式？

• 新用户注册时，自动创建一个演示白板

• 演示白板展示所有核心功能

• 用户可以直接体验，不用看教程

  和 AI 的对话

我： “能不能做一个演示模式，让新用户快速上手？”

AI： "好主意！我建议：

1. 创建一个演示白板模板

2. 新用户注册时自动创建

3. 演示模式只读，防止误操作

4. 添加聚光灯效果，引导用户关注重点"

我： “聚光灯效果是什么？”

AI： “就是双击某个卡片时，其他区域变暗，突出显示这个卡片。类似 PPT 的演示模式。”

我： “Do！”

开发过程

第 1 天：设计演示内容

• 我设计了演示白板的内容

• 包括：功能介绍、快捷键说明、使用技巧…

第 2 天：实现只读模式

• 禁用编辑功能

• 禁用删除功能

• 禁用双击创建卡片

第 3 天：聚光灯效果

• 双击卡片时，其他区域变暗

• 按 ESC 退出聚光灯

• 支持快捷键切换

第 4 天：自动创建演示白板

• 新用户注册时自动创建

• 未登录用户也能看到演示

• 前后端共用一份模板

第 5 天：优化体验

• 隐藏工具栏，画布占满全屏

• 修复空格键拖动画布的问题

• 添加友好的提示文字

  我持续在自己的自媒体和朋友圈推广了一下的结果：可以看到还是有人用的，活跃时间和注册时间不同。

我学到了什么

1. 第一印象很重要：新用户体验决定留存

2. 演示胜过文档：让用户直接体验，而不是阅读

3. 细节决定体验：聚光灯、动画、提示文字…

4. 持续优化：演示内容需要根据用户反馈不断调整

---

我学到的工作方法

通过 17 天的开发，我总结出了一套和 AI 协作的方法论。

# 1. 如何和 AI 沟通

错误示范

• “帮我做个功能”（太模糊）

• “做一个思维导图”（没有细节）

• “按照我说的做”（没有说为什么）

  正确示范

• “我想让用户能够一键整理卡片，因为现在画布太乱了，用户反馈体验不好”

• “图片加载太慢，怎么办？我希望全国用户访问速度都快”

• “新用户不知道怎么用，能不能做一个功能，让他们一看就懂？”

  关键原则

1. 说清楚"为什么"：AI 需要理解你的目标

2. 描述用户场景：完全可以不说技术，说用户体验

3. 提供反馈：AI 的方案不满意，说出来，一起调整

4. 信任但验证：AI 很强大，但你要确认结果符合预期

# 2. 如何拆解需求

不要一次想太多

错误做法：

“我要做一个思维导图工具，要有用户系统、会员系统、分享功能、导出功能、AI 生成、协作编辑…”

正确做法：

1. 先做核心功能：创建卡片、拖拽、连接线

2. 再做用户系统：注册、登录

3. 然后做会员系统：邀请码、配额管理

4. 最后做高级功能：分享、导出、AI…

   从最小可用版本开始

MVP（最小可用产品）思维：

• 第一版：只有基础功能，能用就行

• 第二版：根据用户反馈，优化体验

• 第三版：添加高级功能

Flumind 的迭代路径：

1. 第 1-3 天：基础画布、卡片、连接线

2. 第 4-5 天：用户系统、数据保存

3. 第 6-8 天：会员系统、分享功能

4. 第 9-12 天：优化算法（连接线、网格对齐）

5. 第 13-17 天：演示模式、导出功能、细节优化

   每次只解决一个问题

单一职责原则：

• 今天解决连接线问题

• 明天解决图片加载问题

• 后天解决新用户引导问题

不要同时做多个功能，容易乱。

# 3. 如何做决策

用户需要什么？

以用户为中心：

• 用户说连接线不自然 → 优化算法

• 用户说图片加载慢 → 用 CDN

• 用户说不会用 → 做演示模式

不要为了技术而技术：

• 不要因为"这个技术很酷"就用

• 要问"这个技术能解决什么用户问题"

  哪个方案更简单？

奥卡姆剃刀原则：

• 能用现成的库，就不要自己写

• 能用简单方案，就不要复杂方案

• 能快速验证，就不要过度设计

例子：

• 连接线算法：问他有没有现成的高级算法

• 网格对齐：问他有没有现成的高级算法

• 图片存储：问他有没有现成的高级算法

  能不能先做个小版本试试？

快速试错：

• 不确定的功能，先做个简单版本

• 给用户试用，收集反馈

• 再决定是否深入开发

例子：

• 演示模式：先做只读功能，用户喜欢再加聚光灯

• 会员系统：先做邀请码，再考虑支付接口

• 导出功能：先做 PNG 导出，再考虑 PDF、SVG

Flumind - 思想永远自由

初期成本

对比传统开发：

• 外包开发：¥30,000 - ¥100,000

• 招聘程序员：¥15,000/月 × 3 个月 = ¥45,000

• Vibe Coding：¥50月 × 1 个月 = ¥50

成本降低 1000倍！

---

我踩过的坑

真实的开发过程不是一帆风顺的，我也踩过很多坑。分享出来，希望你能避免。

# 坑 1：关注用户体验，技术交给 AI

我需要关心的：

• 用户能不能用？

• 体验好不好？

• 速度快不快？

• 有没有 bug？

我不需要关心的：

• 用什么算法？

• 怎么实现的？

• 代码怎么写的？

信任 AI 的专业性：

• AI 说用 dagre.js，我就信任它

• AI 说用 Catmull-Rom 曲线，我就信任它

• 我只需要验证结果是否符合预期

和 AI 对话时：

• 我说：“连接线不够自然”

• AI 说：“我会用 XXX 算法优化”

• 我说：“好的，做吧”

• AI 实现后，我测试效果

• 效果好 → 通过

• 效果不好 → 继续调整

不纠结技术细节，只关注结果。

---

# 坑 2：不敢试错

我的错误

开发演示模式时，我有个想法：“能不能加个聚光灯效果？”

但我担心：

• 会不会太复杂？

• 用户会不会不喜欢？

• 会不会影响性能？

结果：犹豫了好几天，没有动手。

教训

快速尝试，快速调整

Vibe Coding 的优势：

• 试错成本低（几分钟就能做出来）

• 不满意可以快速调整

• 甚至可以完全推翻重来

我的做法：

1. 有想法 → 立即和 AI 讨论

2. AI 给方案 → 快速实现

3. 实现后测试 → 收集反馈

4. 不满意 → 调整或放弃

5. 满意 → 保留并优化

聚光灯效果的故事：

• 第 1 天：提出想法

• 第 2 天：AI 实现了基础版本

• 第 3 天：我测试后觉得不够好

• 第 4 天：AI 重构了实现方式

• 第 5 天：完美！用户很喜欢

如果我不敢试错：

• 就不会有聚光灯效果

• 演示模式就不会这么好用

• 用户留存率就不会提升

  现在的做法

有想法就试：

• 不要担心失败

• 不要担心浪费时间

• 不要担心技术难度

快速验证：

• 做个最小版本

• 给用户试用

• 收集反馈

• 决定是否继续

---

# 坑 3：过度优化

我的错误

开发网格对齐功能时，我想做到"完美"：

• 支持所有布局方向（上下左右）

• 支持复杂的嵌套结构

• 支持自定义间距

• 支持动画缓动函数

• …

结果：

• 开发时间从 3 天变成 7 天

• 代码变得很复杂

• 用户其实只需要"一键整理"

  教训

80% 的功能满足 80% 的用户

帕累托法则（二八定律）：

• 80% 的用户只用 20% 的功能

• 80% 的价值来自 20% 的功能

我的做法：

1. 先做核心功能（一键整理）

2. 满足大部分用户需求

3. 如果有用户需要高级功能，再加

网格对齐的迭代：

• 第 1 版：简单的行列对齐（满足 80% 用户）

• 第 2 版：支持连接关系保持（满足 15% 用户）

• 第 3 版：支持自定义间距（满足 5% 用户）

  现在的做法

先做"够用"的版本：

• 不追求完美

• 不过度设计

• 不添加用户不需要的功能

根据用户反馈迭代：

• 用户说"能不能支持 XXX"

• 我评估需求的普遍性

• 如果很多用户需要，就加

• 如果只有个别用户需要，就不加

---

给非技术创业者的建议

如果你也想用 Vibe Coding 做产品，这里是我的建议。

# 你需要的不是学编程

常见误区

很多人觉得：

• “我要先学编程，才能做产品”

• “我要懂技术，才能和 AI 沟通”

• “我要看懂代码，才能验证结果”

这些都是错的！

你真正需要的

1. 清晰的产品思维

• 你的产品解决什么问题？

• 目标用户是谁？

• 核心功能是什么？

• 用户体验如何？

2. 理解用户需求

• 用户痛点是什么？

• 用户期待什么？

• 用户会怎么用你的产品？

• 用户反馈是什么？

3. 快速迭代的勇气

• 不怕失败

• 快速试错

• 持续改进

• 拥抱变化

  我的经验

我不懂编程：

• 不知道什么是最好的"贝塞尔曲线"算法

• 不知道什么是"Sugiyama 算法"

• 不知道什么是"JWT 认证"

但我懂产品：

• 知道用户需要什么

• 知道什么是好的体验

• 知道如何优先级排序

• 知道如何收集反馈

这就够了！

---

这个项目，已经迭代加入了AI功能，目前还没开放使用，逻辑上很简单，增加一个AI卡片。而且由于我第一次开发不懂，app.js有一万八千行，被称为屎山。所以任何事情想做好 要不断学习，我目前已经熟悉了“架构思维”。