广州总部电话:020-85564311
20年
互联网应用服务商
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

一行代码都不会,怎么用 AI 做出一个高审美小程序?(附设计教程)

发布日期:2026-05-25 11:24:42 浏览次数: 805 来源:哈伦智造
推荐语
零基础也能做出高审美小程序?作者用AI从零打造商业门面,分享实战经验与避坑指南。

核心内容:
1. 从零设计小程序的完整心路历程
2. 关键页面(首页、产品页)的设计思路与技巧
3. 利用AI等工具实现高效开发的实用方法
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!


© AI-Powered Design by 哈伦智造




这段时间我做了一件很折磨,但很有意思的事:我试着把自己的生意,全部装进一个小程序里。


刚开始我只是想做个好看的页面,后来越做越发现,居然误打误撞搞出一套小型商业系统。


以前我最大的困扰是,别人想进一步了解我,没有一条清楚的路可以走。


他看完我的内容,觉得我还不错,然后呢?


去哪里看我的服务?价格在哪里?付款在哪里?我到底是一个做着玩玩的人,还是已经有商业结构的人?


如果这些问题全靠私信解释,我每次都要重头开始讲一遍,人很累,信任也会掉。


交代一下背景:我没任何编程基础,最多知道hello world。微信收款又风控严重,动不动跳支付安全提示,吓退了一批本来想下单的人。


这样下去肯定不行。


于是我花了整整两周,从啥也不会的小白,硬是把一个高审美的小程序搞上线了,期间的辛苦和心酸只有我和我的 AI 知道。


成品展示🔍:易行远咨询小程序


方法我免费公开,希望能帮你少走点弯路。



你的核心产品是什么?



这是做之前必须想明白的问题,不然做了也是白做。


对我而言,目前核心产品是社群和咨询。


我用社群安放我对自媒体的方法论和资料,不定期更新,平时和大家聊聊行业,顺便答疑。


咨询是给别人做账号诊断+设计变现路径,别人来找我是因为在流量和变现卡住了,而我会给出有效判断。


所以我想做一个自己的服务门面:不一定复杂,但至少清楚、稳定、有审美、有支付、有下一步。


最后我把它拆成了以下部分:


首页:负责建立第一印象;
咨询页:负责说明我能解决什么问题;
社群页:负责承接低价产品;
资料页:负责沉淀已有内容;
活动页:负责之后的闭门分享和限时活动;
预约页:负责把付款后的交付流程固定下来;
成功页:负责告诉用户下一步该做什么。


这些合在一起,才是我想要的东西。



首页怎么做?



你需要一份让人眼前一亮的东西。


人靠衣裳马靠鞍,小程序可以不用多漂亮,但一定要有质感,这是收钱的基础。


由于我没有任何经验,所以需要先看看大家是咋做的,心里要有点数。


你可以去小红书或其他设计软件搜索小程序设计,有很多模板风格,大家的作品都很优秀,你需要选1-2个作为你的对标。


我当时选的是个白色的(详见下图),因为白色干净又敞亮,很适合咨询类的产品。



但想来想去,我又觉得白色发挥不出我的优势。我所擅长的是old money老钱风,哈伦家训就是走的黑金权力感,白色还是有点鸡肋。


所以,我按照我的对标排版,设计出了最初的小程序首页。(详见下图)


右滑查看图片➡️


排版我直接用的剪映进行设计,之前买了包年会员,不用白不用。你们不要小瞧剪映,人家虽然只是个视频软件,但设计图片这块也很牛,只不过很多人一般不这么用。


说回首图设计,我发现下面这三个颜色太杂乱,不高级,而且字太细了,几次尝试后才定下最终版。(图3)



核心产品页怎么做?



做这个小程序的时候,我反复被一个问题卡住:这个页面到底应该让用户做什么?


代码怎么写,页面怎么跳转,这些都该交给AI,但我必须自己把业务说清楚。


咨询到底分几类?社群到底卖什么?用户能不能直接提交问题?


这些问题表面看是功能,实际上都是商业判断。


一个人如果连自己卖什么、怎么交付、怎么筛选客户、怎么减少无效沟通都没想清楚,小程序做得再漂亮,也只是一个壳。


不慌,咱们一个一个讲。


首先来到社群页。


由于我实在对代码太不熟悉了,所以原本打算直接做好图片放上去。虽然看着很高端,但是这个决定简直坑死我了。



特别注意:小程序的所有图片加在一起不能超过200K,如果超出的话就要上传到CDN,再调用URL,说人话就是你需要购买腾讯的云储存空间,大概20一个月。


我觉得购买云开发本身没问题,但如果一个月多花20就为了放两张图片太扯了,后面如果需要存储的数据多了再买。


所以我重新投入代码的研究,得益于此前已经做好了社群的电商主图,所以直接和AI写完了所有社群部分的代码。(这块用的GPT-codex)


有意思的是,AI的代码居然直接帮我把图片藏在后面了,我一想也行,于是就调换了一下。最终两版对比,我很满意。


这页的支付按钮我做了两个,第一个让别人知道这大概是啥,第二个让真正有意向的人不再犹豫。


右滑查看图片➡️



然后,咨询页。


这块简直备受折磨,老天奶啊真是!按时间顺序从左到右,我一共做了三版,图3-4是同一页。


右滑查看图片➡️


第一版太糙了,不太搭,pass。


第二版怎么调都调不对劲,而且被朋友评价压迫感太强,本来就是付费页,这样搞可能会流失一部分人,pass,但骨架可以保留一部分。


第三版,像样了。


本来两个服务我打算设不一样的价格,但我后来觉得还是一个价更好。


走到这里的人大概率是高意向客户,我就别上那么多套路了,价格清晰明了,无非是人家买哪个的问题。


我之前还让Claude给我写了一个提交问题的页面,但后来我把它删掉了,submit和success整段代码都删了。


高意向客户肯定会主动加我沟通问题,但并非所有人都如此。如果有人捣乱,瞎提交一些乱七八糟的东西,会很占我内存。


约束人性最好的办法,就是在流程上不要留出任何做坏事的空间。



配套页怎么做?



接着,预约页。


客户在完成沟通和支付后,接下来就是定咨询时间了。也是为了防止有人瞎捣乱,预约咨询需要带上已支付的订单,这样就保护了真正有需求的人。


Claude不负所托,优秀地完成了这段任务。(第一版没有带订单,第二版有订单)


右滑查看图片➡️



马上,资料页。


这块我其实蛮纠结的,因为我有很多东西想放上去,东西多到让我头疼。


但我转念一想,没有人可以在这里了解全部的我,也不应该在这里了解我。小程序就是支付下单的地方,别搞那么多花里胡哨的。


所以,我将我早已写好的《社交分量:不动声色让人重视你》放在了这里,它是我人生中第一个判断类的产品,再次感谢Claude。


右滑查看图片➡️


最后,活动页。


这里要提醒一下大家,由于我第一版放的是“暂无任何开放中的活动”,微信提审的时候不让我这样做,说最好还是有点东西。


所以,我把活动换成了每周日的抖音直播。


这块我没咋写逻辑,完全交给我信任的AI。按照当时的疲惫程度,我已经没有心力修改了。


我直接把资料页的wxml和wxss的代码复制过去,然后听天由命。


右滑查看图片➡️



真心话提醒,必看!



我踩的大坑,都在这!!


1 小程序的名称必须和你的企业主体一致!不然备案不通过!


举例:我公司叫易行远,小程序就必须叫易行远xxxx。如果想叫哈伦家训,必须拿出哈伦家训的注册商标。


2 提前备案!提前备案!


捣鼓代码的时候,就已经可以备案了!不要拖,不然时间很紧张,万一没过就要打回重审!微信审核非常非常严!一点小问题都不能有!


3 第一次代码提审的时候,选加急!


然后万一人家打回来了,立马在6-8小时内修改,不要拖!使用加急会让你有优先修改权,你马上修改,很快就能过!


4 AI 代码非常非常磨人!


你不要看我说的很轻松,其实做起来非常折磨!都是泪啊,但好在最后结果不错。



如果以后帮别人做,我会做什么



我做完之后,对个人IP商业化有了一个新判断:未来很多超级个体出来,都需要这样一个轻量但完整的服务门面。


它不一定适合所有人。纯内容号、纯广告号、纯娱乐号,可能暂时用不上。


但如果你已经开始卖自己的东西,就迟早会碰到一个问题:你不能永远靠朋友圈和私信撑住所有成交。


朋友圈适合激发兴趣,私信适合建立关系,但承接交易还是需要一个稳定入口。


这个入口不需要像大公司官网那样复杂。它只需要解决几个最现实的问题:我是谁,我卖什么,为什么可信,怎么买,买完以后怎么办。


如果以后我帮别人做,我会你把混乱的服务,整理成能被陌生人理解、信任和购买的入口。


也就是:


帮你梳理服务结构;
帮你设计页面层级;
帮你写清楚每个页面该表达什么;
帮你做出符合你气质的视觉门面;
帮你设计付款、预约、资料、活动这些承接路径;
最后让你的业务看起来不再像临时接单,而像一个可以被认真购买的服务。



个人商业开始成型的时刻,是你把所有的交易入口,设计成外人一眼就能看懂的形式。


别人看见你,理解你,信任你,购买你的能力,付款之后知道下一步怎么走。


这条路越清楚,生意就越长久。


这就是一个小程序对我最大的意义。


如果你也在做个人服务,或者你也想你的业务整理成一个更清楚的入口,可以来找我定制。


各位老板,祝发财!





口播:🎵【哈伦智造】


咨询 / 社群:HarlanCreed



优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询