一个不会设计的人,用 ChatGPT+ UIPro-CLI + OpenClaw 做了在线一个拼图工具的反思
tansj526
·
2026-03-23
·
via V2EX
如果你想试试,这里就是: https://ps.keepmot.com/ 一、三个 AI ,三种角色,一个人 先说一个很多人没意识到的事实: 这个项目不是「一个人和一个 AI 」的故事,而是「一个人和三个 AI 」的故事。 第一个 AI:ChatGPT —— 产品顾问 在写任何代码之前,我花了大量时间在 ChatGPT 网页版上聊天。 我的第一句话是: “我想做一个免费的在线拼图工具,不用登录,完全免费,用完即走。帮我想想,别人已经有什么了?我还能做什么?” ChatGPT 给了我一个大而全的方案:竞品列表(美图秀秀、Canva 、PicsArt )、核心功能拆解(拼图、长图拼接、裁剪、特效)、技术选型建议(纯前端实现,保障隐私)。 我什么都不懂,但我知道这个方案太大了。 我说:「调整一下 MVP ,只做网格拼图、长图拼接、裁剪。另外一定要纯前端,数据不能上传服务器。」 然后我探索了 Canvas 绘图的能力边界、图片处理的性能问题、纯前端实现的可能性。 到这里为止,一切看起来像是一个正常的技术调研过程。 但真正的转折发生在我说出这句话的时候: “我不想对技术选型做什么限制。我只想做提出需求的人。” 这不是一句随口说的话。这是我在那个时刻做出的一个判断—— 我不应该假装自己是设计师或程序员 。我应该做我真正能做好的事情: 想清楚我到底要什么。 从那一刻起,我不再问 ChatGPT 「用什么框架」,而是让它帮我写一份纯粹的产品需求文档。 ChatGPT 产出了一份 PRD ,其中有一个设计原则,后来成了整个项目的灵魂: 「用户不需要注册,不需要付费,不需要学习。打开即用,用完即走。」 ChatGPT 的贡献是巨大的。但它写了零行代码。 第二个和第三个 AI:UIPro-CLI + OpenClaw —— 程序员 我拿着 ChatGPT 帮我写的 PRD ,进入了 Windsurf IDE 。 第一条消息: “这是一个需求文档,我希望你根据它来开发一个在线拼图工具。纯前端实现,图片不上传服务器。我的开发平台是 macOS 。” AI ( UIPro-CLI )分析完 PRD ,输出了完整的技术方案——选了 Vue 3 、TypeScript 、Canvas API 、Pinia ,画了数据模型、目录结构、分期计划。 我说: “完全同意你的方案。请开始开发。” 我甚至不知道它选了什么。我是后来才搞明白 Canvas 绘图 API 、Pinia 状态管理这些事的。 AI 一口气生成了项目骨架,启动了 npm run dev 。 一个功能完整的拼图工具雏形就这样出现在我屏幕上。 从那一刻起,我的工作变了。我不再是提需求的人。我变成了这个工具的第一个用户,也是最苛刻的用户。 那我是什么? 三个 AI ,各有分工: AI 角色 产出 ChatGPT 产品顾问 竞品分析、PRD 、设计原则 UIPro-CLI 主力程序员 架构、前端、布局引擎、特效 OpenClaw 辅助程序员 部分功能实现、Bug 修复 而我? 我是产品经理。我是测试员。我是那个说「不合理」的人。 ↑ 用拼图工具做了三张图。右侧是正在测试的布局模板。所有处理都在本地完成,不上传服务器。 二、70% 的时间在做一件事:用自己的工具然后吐槽 很多人以为 AI 编程就是:说一句话 → AI 写完 → 完事。 不是的。差远了。 我的时间分配是这样的: 架构 & 核心功能搭建 ██░░░░░░░░ 20% 自测 & 吐槽 & 迭代 ███████░░░ 70% 部署 & 发布 █░░░░░░░░░ 10% 70% 的时间,我在做的事情是:打开工具,上传几张照片拼一下,然后记下所有让我不爽的地方。 每天记一批,攒够了发给 AI: 网格拼图那个边框太粗了,能不能细一点 长图拼接后预览卡顿,是不是渲染性能问题 滤镜切换的时候闪一下,体验不好 裁剪工具那个控制点太小了,不好点 还有啥能优化的你看着办吧 注意:这些消息里没有任何技术内容。 我不知道「边框」在代码里叫什么。我不知道「预览卡顿」是 Canvas 渲染问题还是图片解码问题。我不知道「控制点」是用什么图形库画的。 我只知道这个东西不好用。 而这,恰恰是最有价值的信息。 三、一个哲学问题:什么东西不能被生成? 在这个项目里,AI 生成了: 15,000 行代码 完整的前端架构 50+ 种布局模板 20+ 种图片特效 6 种裁剪比例预设 垂直/水平拼接算法 AI 没有生成的是: 「我想做什么」 —— 这个想法来自我每次做产品图都要打开 Photoshop 的烦躁 「这个不合理」 —— 每一个 bug 报告、每一个体验吐槽都来自我真实的使用感受 「这样不够好」 —— AI 每次说「已修复」,我都要亲自验证,不合格就打回去 「先想清楚再做」 —— 在 ChatGPT 中从技术探索转向产品定义的那个关键判断 「给 AI 一个好的参考」 —— 去 GitHub 找优秀开源拼图库让 AI 学习的决策 让我把这五件事抽象一下: 人类做的事 本质 想做什么 意图 这个不合理 判断 这样不够好 品味 先想清楚再做 策略 找参考给 AI 资源调度 意图、判断、品味、策略、资源调度。 这五样东西,在今天,AI 一样都生成不了。 不是因为 AI 不够聪明。而是因为这五样东西的源头不是信息—— 是欲望、是偏好、是价值观、是一个人活到现在所有经历的总和。 AI 可以写出一万种「好看的界面」。但只有你知道「好看」对你来说意味着什么。 AI 可以提供一百种技术方案。但只有你知道你愿意为什么东西花两周时间。 代码是手段。判断才是目的。 四、AI 的真正恐怖之处,不是它能写代码 AI 能写代码,这已经不是新闻了。 真正恐怖的是:AI 让「能力」和「成本」脱钩了。 以前,如果你想做一个在线拼图工具,你需要: 一个前端工程师( Vue + Canvas ) 一个 UI 设计师(布局模板 + 滤镜效果) 一个测试工程师 一个产品经理 两到三个月 至少三十万人民币 现在你需要的是: 一个想清楚了自己要什么的人 两周 几乎零成本 这意味着什么? 意味着「有没有技术团队」不再是你能不能把想法变成产品的决定性因素。 意味着一个摄影师可以自己做拼图工具。一个电商运营可以自己做产品图制作工具。一个自媒体人可以自己做封面生成器。 意味着 创造力的瓶颈从「能不能实现」变成了「有没有想法」。 从「会不会做」变成了 「知不知道该做什么」。 五、给所有想用 AI 做工具的人 如果你看完这篇文章,想自己试试用 AI 做一个产品,这是我最想告诉你的几件事: 1. 先想清楚你要什么,再碰 AI 不要一上来就说「帮我写个 XXX 」。 花时间在 ChatGPT 上聊。调研竞品。了解别人怎么做的。然后写一份需求文档——哪怕只有一页纸。 PRD 是你给 AI 的边界。没有边界的 AI ,会给你一个什么都有但什么都不对的东西。 2. 不同的 AI 擅长不同的事 ChatGPT 网页版适合开放式探索、产品思考、竞品分析。Windsurf / Cursor 中的 AI 适合精确的代码编写和工程执行。 不要指望一个 AI 什么都做。像管理团队一样管理你的 AI 。 3. 你最大的价值是说「不」 AI 永远会说「好的,已完成」。它不会告诉你这个方案不合理,不会告诉你这个交互很蠢,不会告诉你用户不会喜欢这个。 你的工作不是说「好」,而是说「不行,重来」。 每一个成功的产品背后,都有无数个被否决的方案。AI 不会否决自己,这件事只有你能做。 4. 尽早建测试 AI 写测试的速度极快。一句话几十个 test case 。 不要等到项目末期才想起来写测试。在核心功能成型后就让 AI 写。这会节省你后面无数的手动验证时间。 5. 遇到难题,给 AI 找参考 当你发现 AI 反复修同一个问题修不好时,不要继续用自然语言描述。 去 GitHub 上找一个解决了同样问题的开源项目,下载下来扔给 AI 说「先学这个」。 一个好的参考实现,胜过一千句需求描述。 6. 记录一切 我留下了 8 份对话记录。数百条消息。数万字。 这些记录不仅帮助我复盘,还让我写出了这篇文章。 跟 AI 协作的过程本身就是知识。记录它,你会在回头看时发现很多当时忽略的洞见。 六、终极问题:设计师会失业吗? 我知道你在等这个问题。 我的回答是: 问错了。 「设计师」从来不是一个统一的职业。它包含了: 把需求翻译成视觉稿的人(执行者) 设计用户体验的人(体验设计师) 保证设计一致性的人(设计系统负责人) 理解用户需求的人(用户研究员) 做出审美判断的人(创意总监) AI 正在极速替代第一种。这是事实。 但后四种—— 体验、系统、理解、判断 ——AI 目前做不了,短期内也做不了。 不过,这件事的意义远比「谁会失业」深刻得多。 它意味着:以前只有设计师能做的事,现在每个人都能做了。 不是设计师失业了——而是 每个人都变成了设计师 。 或者更准确地说: 每个人都变成了产品经理 。因为现在,从想法到产品的距离,只剩下一份需求文档和几句清晰的判断。 七、代码已死,判断永生 我花了两周时间,用三个 AI ,做了一个 15,000 行代码的在线拼图工具。 我没有写一行代码。 但我做了几百个判断。 哪些功能要做,哪些不做。 这个布局好不好用。 那个滤镜够不够好看。 这个 bug 修没修干净。AI 该在什么时候介入,什么时候闭嘴。 每一个判断都很小。但所有判断加在一起,就是这个工具。 代码是 AI 写的。但工具是我的。 因为工具不是代码。 工具是一千个判断的总和。 如果你想试试,这里就是: https://ps.keepmot.com/ 它不完美。它是一个不懂设计和编程的人和三个 AI 的实验。但它确实在跑,确实有人在用。 如果这篇文章让你觉得「也许我也可以」——那就对了。你可以的。 你需要的不是学设计。你需要的是 想清楚你要什么,然后有勇气对 AI 说「不行,重来」。 ↑ 拼图工具的效果预览。所有图片处理都在浏览器本地完成,隐私安全。 附录:硬数据 指标 数据 项目总代码量 ~15,000 行(前端) 我手写的代码量 0 行 我掌握的技术栈 0 个 参与的 AI 3 个( ChatGPT + UIPro-CLI + OpenClaw ) AI 分工 ChatGPT: 产品顾问 / UIPro-CLI + OpenClaw: 工程执行 对话记录 8 份 关键消息 数百条 开发周期 ~2 周 单元测试 0 → 120+ 布局模板 50+ 种 图片特效 20+ 种 隐私保护 纯前端,图片不上传服务器
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。