--- title: 被 AI 编程坑过两次后，我终于做出了一个上架的微信小程序 date: 2026-04-09T03:47:25Z modified: 2026-04-09T03:47:54Z permalink: "https://www.appinn.com/ai-coding-first-mini-program/" type: post status: publish excerpt: "" categories: - AI tags: - AI - AI编程 - 小程序 - 微信 featured_image: "https://www.appinn.com/wp-content/uploads/2026/04/Copy-of-appinn-homework-93.jpg" author: 青小蛙 timestamp: 2026-04-09T03:47:54Z --- 被 AI 编程坑了两次之后，我终于做出了一个上架的[微信](https://www.appinn.com/tag/wechat/?output_format=md)[小程序](https://www.appinn.com/tag/%e5%b0%8f%e7%a8%8b%e5%ba%8f/?output_format=md)：不靠“让 AI 一句话生成微信小程序”，而是换了一种方式：给数据 → 做设计 → 再开发 → 拆任务 → 多对话。 来自 @阿童木先森 的 vibe coding 作品，如果你也觉得 AI 编程“不太靠谱”，可以看看他的方法。 想直接体验的可以去结尾扫二维码。 ![](https://www.appinn.com/wp-content/uploads/2026/04/Copy-of-appinn-homework-93.jpg) ## 一个编程小白设计师第一次成功 Vibe Coding 的经历 ## 目录 - [一个编程小白设计师第一次成功 Vibe Coding 的经历](#一个编程小白设计师第一次成功-vibe-coding-的经历) - [一个设计师的开发梦（以及第一次劝退）](#一个设计师的开发梦（以及第一次劝退）) - [AI 给了我第二次信心（然后又失败了）](#ai-给了我第二次信心（然后又失败了）) - [第三次尝试：这次我决定“随便玩玩”](#第三次尝试：这次我决定-随便玩玩) - [步入正题](#步入正题，正好最近沉迷杀戮尖塔-2-（真好玩，给我打钱），所以我的想法就是，干脆做一个杀戮尖塔-2-的卡牌图鉴小程序吧，感觉比app要轻量很多好开发。所以我做的第一件事，就是打开软件跟agent说：给我做一个杀戮尖塔-2-的卡牌图鉴小程序。然后开始祈祷，ai能赐予我一个完美的可以立即上线的小程序。) - [转折点：不是 AI 不行，是我用错了](#转折点：不是-ai-不行，是我用错了) - [关键一步：先搞数据（事情开始变简单了）](#关键一步：先搞数据（事情开始变简单了）) - [第二个关键：先做设计，而不是写代码](#第二个关键：先做设计，而不是写代码) - [这一步的意义：一切开始变得可控](#这一步的意义：一切开始变得可控) - [真正进入 AI 编程：这次终于跑起来了](#真正进入-ai-编程：这次终于跑起来了) - [一个非常重要的技巧：不要在一个对话里做完](#一个非常重要的技巧：不要在一个对话里做完) - [分享最终成果](#总结：这次能成功，我做对了什么) - [最后，二维码](#最后，二维码) --- ### 一个设计师的开发梦（以及第一次劝退） 首先介绍一下我的背景，我是一位用户体验设计师，一直以来有一个产品梦。 去年的时候曾经短暂自学了一阵子 SwiftUI，简单的了解一些类似排版、动画之类的。 后面就兴冲冲的开始想要进入独立开发者的赛道，然后被一堆网络请求、数据库、后台、缓存、性能等一系列完全在我认知范围以外的问题弄的焦头烂额。 --- ### AI 给了我第二次信心（然后又失败了） 后面了解了神奇的 Cursor 和 DeepSeek 之后让我又觉得自己能行了，然后兴冲冲的加入了 AI 编程的潮流。 然后不出意外的我又失败了。 并没有像各个自媒体大佬那样**两个小时作出一款上架赚几十万的app**。 从此我就把自己的 Cursor 账户和 Xcode 软件束之高阁，再也不敢触碰这个伟大的产品。 --- ### 第三次尝试：这次我决定“随便玩玩” 今年年后又突然兴起了龙虾热潮，在身边越来越多自媒体的洗脑攻势下，我又又又蠢蠢欲动了。 但是这次我并没有像之前那样，投入所有的精力去完成一个摸不着边的梦想。 因为某国产养虾工具推广的厉害，同时又送了很多点数（不是广告），我想：要不就随便玩玩，以消耗完这些点数为目标，**再次尝试 vibe coding（互联网真的一天一个新词）**。 --- ## 步入正题 正好最近沉迷杀戮尖塔2（真好玩，给我打钱）。 所以我的想法就是，干脆做一个杀戮尖塔2的卡牌图鉴小程序吧，感觉比 App 要轻量很多好开发。 所以我做的第一件事，就是打开软件跟 Agent 说：给我做一个杀戮尖塔2的卡牌图鉴小程序。然后开始祈祷，AI 能赐予我一个完美的可以立即上线的小程序。 ![](https://www.appinn.com/wp-content/uploads/2026/04/image-7.avif) 真的是被 AI 给气笑了，我第一次知道编程的瞎编是这个编法…… ### 转折点：不是 AI 不行，是我用错了 在跟另一个沉迷 AI 的产品经理交（吐）流（槽）之后，他说，既然 AI 给你的数据是瞎编的，你可以去找正确的数据让它来做啊，我说难道要我一个个去复制几百个卡牌数据然后告诉 AI 吗？ 他看了我三秒，说，**你，可以让 AI 帮你爬数据的**。 ### 关键一步：先搞数据（事情开始变简单了） 我抱着再信它一次的态度，死马当活马医，试着找了一个游戏攻略站，把网址给 AI，让它给我爬数据（对不起我感觉这样做对游戏网站其实不太好，原谅我这个初学者）。 ![](https://www.appinn.com/wp-content/uploads/2026/04/image-1.avif) 似乎是因为这种**单线任务比较简单**，**产出物也比较可控**，所以这次 AI 给我了一个 json 文件，包含了所有的卡牌数据。 看到这个，**我感觉这次应该有戏**。 ### 第二个关键：先做设计，而不是写代码 但是我并不想回到之前烧香念佛赌运气的方式来生成一个谁都不知道是什么样的 App，出于我自己的职业（用户体验设计师）习惯，这次我先加了一步，让它用这个数据结构，生成一个小程序的设计稿。 ![](https://www.appinn.com/wp-content/uploads/2026/04/7d17121a829fb307b53552455d069ab9.avif) 似乎又是因为**数据结构比较清晰**，**链条比较短**，**产出也比较明确**，所以生成了一个我自己看起来都觉得「还不错」的设计方案。 ![](https://www.appinn.com/wp-content/uploads/2026/04/2f8d9b2283acfda86c1f02b4c59ee9de.avif) ### 这一步的意义：一切开始变得可控 这个设计方案，甚至连设计系统都包含进去了，让我这个平时设计很不严谨喜欢凭感觉的设计师都感到汗颜。 现在，我不仅仅可以确定每一个流程具体的样子，还可以直接让它针对具体流程的页面更改样式或者调整数据。因为不涉及到真实的数据，这比在开发时让它调整简单多了。 --- ### 真正进入 AI 编程：这次终于跑起来了 在对网页的一些小细节更改调整之后，我试着让它带入一些 json 里的图片数据，在网页端 DEMO 上可以正常显示。 这让我终于感受到「**妈妈呀我终于也成功 Vibe Coding了**」，于是就开始了正式的 AI 编程阶段。 也许是这一次**前期准备做的非常充足**，**有正确的数据结构**，**流程和样式也非常清晰**，agent 也可以读到自己写的网页样式，所以基本上一开始小程序就可以正常的运转（撒花）。 当然后面也少不了调整具体页面细节、优化流程和样式，查 bug。不过那种时候更多是扣细节，是一种查漏补缺，精益求精（也没有很精）的状态。 ### 一个非常重要的技巧：不要在一个对话里做完 上面我说的每一件，我都**在一个单独对话流里跟 Agent 说**，并没有在一个对话里完成所有的任务。 有时候甚至一个任务要多开好几个对话（开发到具体页面，我也会一块一块单独说）。 这样可以避免太多上下文，AI 自己读自己的历史记录就读半天还搞不明白。 ### 分享最终成果 先总结下： - 不再让 AI 从 0 瞎编，而是给它真实数据 - 先做设计，再写代码 - 把任务拆小，一步一步做 - 多开对话，避免上下文污染 ![](https://www.appinn.com/wp-content/uploads/2026/04/image-2.avif) ![](https://www.appinn.com/wp-content/uploads/2026/04/image-3.avif)![](https://www.appinn.com/wp-content/uploads/2026/04/image-4.avif) ## 最后，二维码 欢迎体验： ![](https://static3cdn.appinn.com/images/2026/04/image-5.avif) 另外，根据阿童木同学反馈：同时我也正正经经的体验了一下上架流程，比我想的要麻烦很多hhh（花了两天时间做小程序，4天上架）。 --- 原文：https://www.appinn.com/ai-coding-first-mini-program/ ## Topics **分类目录:** [AI](https://www.appinn.com/category/ai/?output_format=md) **标签:** [AI编程](https://www.appinn.com/tag/ai%e7%bc%96%e7%a8%8b/?output_format=md), [小程序](https://www.appinn.com/tag/%e5%b0%8f%e7%a8%8b%e5%ba%8f/?output_format=md), [微信](https://www.appinn.com/tag/wechat/?output_format=md)