V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录

节点赞助商

tansj526
V2EX  ›  AI Agent 智能体

一个不会设计的人,用 ChatGPT+ UIPro-CLI + OpenClaw 做了在线一个拼图工具的反思

  •  
  •   tansj526 · 3 月 23 日 · 354 次点击

    如果你想试试,这里就是: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:

    1. 网格拼图那个边框太粗了,能不能细一点
    2. 长图拼接后预览卡顿,是不是渲染性能问题
    3. 滤镜切换的时候闪一下,体验不好
    4. 裁剪工具那个控制点太小了,不好点
    5. 还有啥能优化的你看着办吧

    注意:这些消息里没有任何技术内容。

    我不知道「边框」在代码里叫什么。我不知道「预览卡顿」是 Canvas 渲染问题还是图片解码问题。我不知道「控制点」是用什么图形库画的。

    我只知道这个东西不好用。

    而这,恰恰是最有价值的信息。


    三、一个哲学问题:什么东西不能被生成?

    在这个项目里,AI 生成了:

    • 15,000 行代码
    • 完整的前端架构
    • 50+ 种布局模板
    • 20+ 种图片特效
    • 6 种裁剪比例预设
    • 垂直/水平拼接算法

    AI 没有生成的是:

    1. 「我想做什么」—— 这个想法来自我每次做产品图都要打开 Photoshop 的烦躁
    2. 「这个不合理」—— 每一个 bug 报告、每一个体验吐槽都来自我真实的使用感受
    3. 「这样不够好」—— AI 每次说「已修复」,我都要亲自验证,不合格就打回去
    4. 「先想清楚再做」—— 在 ChatGPT 中从技术探索转向产品定义的那个关键判断
    5. 「给 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+ 种
    隐私保护 纯前端,图片不上传服务器
    目前尚无回复
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   1136 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:52 · PVG 01:52 · LAX 10:52 · JFK 13:52
    ♥ Do have faith in what you're doing.