一个不会设计的人,用 ChatGPT+ UIPro-CLI + OpenClaw 做了在线一个拼图工具的反思 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录

节点赞助商

tansj526

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

  •  
  •   tansj526 3 月 23 日 648 次点击

    如果你想试试,这里就是: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+ 种
    隐私保护 纯前端,图片不上传服务器
    2 条回复    2026-04-03 12:32:04 +08:00
    boxy123
        1
    boxy123  
       15 天前
    感谢分享
    surunzi
        2
    surunzi  
       14 天前
    我的感受是目前如果你参与进 ai 写代码的过程中,review 不合理的设计,帮忙排查 bug ,直接确定技术选型和具体实现方案,会比直接让它胡乱写更高效,后期也更好维护。几个月时间已经写了 60+ 的小工具,整体代码量也就几万行而已,每个工具都会在我日常使用时中不断改进完善。https://github.com/liriliri/tinker 当然,写完就扔的一性性工具肯定直接让 ai 自己发挥了,能跑就行。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5114 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 52ms UTC 09:37 PVG 17:37 LAX 02:37 JFK 05:37
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86