我不会前端,但用AI做了整个App

上个月，我一个人替代了游戏策划、UI设计师和前端工程师。

不是「AI辅助我完成了一部分工作」，是真的替代。

我是一个纯后端开发者，日常工作就是写Ruby on Rails。游戏数值平衡我不懂，Figma我不会，React Native动画让我头疼。

但暖记v2的PRD、设计稿、视觉素材、前端动画，全是AI生成的。

我自己都有点懵。

需求文档，AI比我想得更周到

我先用Claude Code生成PRD。

一开始我只是想让它帮我把脑子里的想法整理成文档，结果它给我的东西，远远超出了我的预期。

游戏化系统的数值设计，它给我设计了「力竭状态」、「实际怪物HP缩放公式」、「BOSS反击系数」，甚至还有「防刷三道防线」。

我当时就愣住了。

这些东西，我自己想是根本想不到的。

我是一个纯后端开发者，日常工作就是写Ruby on Rails，搞业务逻辑、数据库设计、API接口。游戏数值平衡这种事，我连门都没摸过。

但Claude Code直接给我生成了一套完整的数值系统。

比如这个「实际怪物HP缩放公式」，

×0.75是保护系数，防止小队被碾压。

还有「力竭状态」的设计，当玩家HP归零后不是直接退出副本，而是进入力竭状态，伤害减半但仍能参与，力竭超3天才自动退出。

这种设计，连有经验的游戏策划都要花很多时间去平衡，我一个后端开发者自己想根本想不到。

但AI直接给我生成出来了。

这个反差感，让我第一次觉得，独立开发者可能真的不需要游戏策划了。

Stitch，让我第一次觉得不需要设计师了

PRD有了，接下来是设计稿。

我用的是Google的Stitch，这是我这个纯开发背景的人最有「降维打击」感的一环。

这是我的原型地址: https://stitch.withgoogle.com/projects/71071182194630306 感兴趣的朋友可以看看。

整体感觉是，起点质量高、调性把控准确、速度极快。

大部分中低复杂度页面能达到70-80%可用程度。

真正让我体会到「独立开发者不再需要专业设计师」这句话的含金量。

我的工作流是这样的，

坚决不把整个PRD一次扔进去，而是一个页面一个页面地描述。

典型Prompt是，vibe + 风格约束 + 具体元素 + 参考图。

比如首页的副本状态卡，我会说「温暖、轻量、适合K-12学生使用，卡片式布局，顶部显示BOSS名称和剩余天数，中间是HP进度条，底部显示今日出勤人数和CTA按钮，参考这张v1的截图」。

同时每次都附上DESIGN.md提升一致性，效果明显更好。

Stitch有几个关键功能特别好用。

一个是设置主题色和元素圆角，全局统一风格。

另一个是「整页面 VS 局部修改」的切换。

如果是整页面，就完整描述这个页面上的元素，如果有设计稿可以上传让它仿照，如果没有就直接描述清楚页面上要有哪些元素。

如果是局部修改，Stitch主界面上有一个「Mark-M」的功能，框住你想修改的页面某个局部，告诉它改就可以了。

大部分页面不是100%完美。

复杂流程页，比如手动多步录入错题向导，经常需要我在墨刀里再调层级和连接。

部分图标风格偏科技感，需要Lovart替换。

但整体来说，70-80%的可用程度，对一个纯后端开发者来说，已经是降维打击了。

Lovart，把视觉素材也搞定了

设计稿有了，但还缺视觉素材。

App的logo、BOSS的图片、用户角色的立绘，这些东西以前我得找插画师。

现在我用Lovart配合Stitch生成的设计稿，直接出图。

logo用了暖色调的渐变，配合「暖记」这个名字的温暖感。

BOSS图片我生成了6个，对应PRD里的6个副本，遗忘小妖、混乱幽灵、拖延恶将、考试魔王、错题山魔、时间巨龙。

每个BOSS都有自己的风格，但整体调性统一，不会让人觉得是从不同地方拼凑来的。

用户角色的立绘也是Lovart生成的，根据年级和性别有不同的形态，少年形态、成长形态、觉醒形态、巅峰形态。

这些素材如果找插画师，至少要几千块，还要来回沟通修改。

现在我自己就搞定了。

Claude Code，写出了我3-4天才能写出来的代码

设计稿和素材都有了，最后是写代码。

我是一个纯后端开发者，日常工作以Ruby on Rails为主，负责业务逻辑、数据库设计、API接口和数值计算。

前端React Native一直是我的明显弱项。

以前写v1的时候，样式对齐、动画、状态管理、跨平台适配经常让我头疼。

现在用Claude Code配合这份详细的PRD来写前端，体验可以说是「降维打击」。

让我印象最深刻的是副本战斗反馈的微交互。

我只给了它PRD里的描述，「完成学习任务后要触发攻击特效，怪物抖动 + HP跳动 -15HP，简洁有力且温暖不夸张」。

它直接用Reanimated 3 + React Native Skia写出了一套完整的攻击流程。

剑光/魔法粒子特效、怪物受击抖动 + 变红、HP数字带动画跳动、音效触发，还自动处理了「今日伤害上限」后的灰态提示。

效果跑起来特别有成就感。

用户测试时好几个家长说「孩子做完题后那个小攻击动画很解压」。

这个复杂度我自己写至少要花3-4天，它一次生成就基本可用。

超出我预期非常多。

独立开发者的时代，真的变了

写到这里，我突然想起了1970年代末的个人电脑革命。

在那之前，计算能力只属于大公司和研究机构，一台IBM大型机要几百万美元，需要专门的机房和一整个团队来维护。

但Apple II和后来的IBM PC出现后，个人第一次拥有了以前只有大公司才有的计算能力。

不是说个人电脑能替代大型机做所有事，而是说，对于很多任务来说，个人电脑已经够用了。

AI也是一样。

现在很多人还在用AI「辅助」自己完成工作，就像当年有些公司买了个人电脑但还是按照大型机的思路在用。

但工作流程本身没有变。

但我这次做暖记v2，我是真的把整个流程重新设计了一遍。

不是「我写需求，AI帮我润色」，而是「我给AI一个方向，它帮我生成完整的需求文档」。

不是「我画草图，AI帮我美化」，而是「我描述页面，AI帮我生成70-80%可用的设计稿」。

不是「我写代码，AI帮我补全」，而是「我给AI需求，它帮我写出3-4天才能写出来的代码」。

这个转变，不是量变，是质变。

独立开发者的时代，真的变了。

以前一个人做App，你得会产品、会设计、会前端、会后端、会运营。

现在一个人做App，你只需要会一个，然后用AI补齐其他的。

我是一个纯后端开发者，但我现在能做出一个有完整游戏化系统、有精美设计稿、有流畅动画的App。

这在三年前是不可能的。

一些不成熟的经验

如果你也是独立开发者，也想用AI来做产品，我有一些不成熟的经验，不知道对你有没有用。

AI不是万能的，但它能把你的短板补到70-80分。

我是后端开发者，前端是我的弱项，AI帮我把前端从30分补到了70分。这个70分，对独立开发者来说，已经够用了。

还有就是工具链很重要。

Claude Code生成需求、Stitch生成设计、Lovart生成素材、Claude Code写代码，这套组合是我试了很多工具之后才找到的。

不要指望一个工具解决所有问题，找到适合自己的工具链，比找到一个完美的工具更重要。

对了，DESIGN.md真的有用。

每次用Stitch生成设计稿的时候，我都会附上DESIGN.md，里面写清楚主题色、字体、圆角、间距这些设计规范。

这样生成出来的页面，风格一致性会好很多。

另外，一个页面一个页面地描述，不要一次性扔整个PRD。

我一开始也试过把整个PRD扔给Stitch，结果生成出来的东西乱七八糟。

后来改成一个页面一个页面地描述，每次都给参考图，效果好了很多。

还有一点，AI生成的东西不是100%完美，但已经足够好了。

Stitch生成的设计稿，70-80%可用，剩下的20-30%需要我在墨刀里调整。

Claude Code生成的代码，大部分时候能直接跑，偶尔需要我改一下逻辑。

但这个效率，比我自己从零开始写，快了至少10倍。

最重要的是，你要知道自己想要什么。

AI不会替你思考，它只是把你的想法变成现实。

你得知道自己想做一个什么样的产品，想解决什么问题，想给用户什么体验。

这些东西，AI给不了你。

但只要你知道自己想要什么，AI就能帮你实现。

最后

暖记v2现在还在开发中，预计下个月上线。

如果你对这个产品感兴趣，可以去App Store搜「暖记」或者直接访问 https://www.343cloud.com/growup_download_app 看看v1长什么样。

如果你也是独立开发者，也在用AI做产品，欢迎跟我交流。

我也不知道这套工作流能不能复制到其他产品上，但至少在暖记v2这个项目上，它确实work了。

独立开发者的时代，真的变了。

我们每个人，都有机会做出以前只有团队才能做出来的产品。

这个时代，太特么赤鸡了。

ok，这就是本期文章的全部内容，如果你觉得不错，随手点个赞、在看、转发三连，这是对我最大的鼓励。

这里是WasTech时溯，一切关于科技和生活，我们下次见。