项目成员：jinjinlili、aurorezhang、nicolexmliu、kirizhan、yixianpeng
作者：jinjinlili
对于独立开发者而言，小程序无需复杂的部署流程，一台电脑和一个微信账号就能搞定。 AI 编程工具也已经能较好地支持小程序的代码结构，比开发一个 App 更轻便，非常适合快速验证创意。且用户无需下载，扫码即用。加上小程序与微信支付、微信小店等能力的打通，可以说微信生态不仅能解决分发问题，还能直接带来收益。
人工智能的发展速度超乎想象，各家大模型几乎是按月在迭代，新工具、新接口、新能力层出不穷。作为非技术岗位的M族市场人，我和我的小伙伴们决定尝试搭建一家通过人工智能推荐商品的小店，来体验人工智能的能力边界，以及探索与业务结合的可能性。
没有花费过多时间讨论，我们先将品牌定义在了香氛领域，因为香氛不像衣服有尺码，不像口红有色号。它是关乎情绪和气味的化学反应，也是常见的会被用来作为礼物的商品品类。用户在为自己或者送礼对象做选择时，容易困在「不知道喜欢什么」和「不知道适合什么」之间，这正是人工智能可以介入提供帮助的地方，把大模型当作一位体贴的导购。帮用户从「生日」、「心情」和「最近的愿望」中读懂个体情绪状态与潜意识偏好，输出独属于当下的香氛建议。同时也为商品推荐增添一点玄学色彩，让香氛的推荐结果更具有说服力和社交分享属性。
首先，我们需要为 AI 荐香的想法找到一个合适的载体。市面上绝大部分的人工智能导购，非常依赖知识库和固定流程，基本是通过关键词触发一些标准回复，按部就班地回答，人机感很强，这样的效果不是我们想要的。
对比了多种实现方案后，我们最终决定借助微信小店「小程序连接微信小店」的功能来实现想法，微信小店现在支持多种连接小程序的能力，商家可以将微信小店的商品、店铺、优惠券及直播间等灵活嵌入小程序内，并支持一键跳转。
这个功能似乎没有被大范围推广和应用，它的使用场景其实有点像让微信小店、小程序互为组件，微信小店可以通过小程序补齐更多个性化的玩法、推广方式，小程序可以通过小店节省交易类场景的开发成本，很巧妙地符合了我们想为小店定制一个专属智能导购的需求。
微信小店「小程序连接小店」功能指引： https://store.weixin.qq.com/chengzhang/webdoc/wiki/7296/99bdb51e4787f776/growth_center_manual_for_store
确定了使用小程序承载创意后，就开始推进产品设计和开发流程。停留在想法的阶段时，一切都显得如此简单、易实现。真正开始动手时，会发现涉及的产品和开发逻辑还是有点小复杂的。
工具建议：ntext="5L2V5LiA5q2l5q2l5oqK5oOz5rOV5Y+Y5oiQ5bCP56iL5bqP56Gu5a6a5LqG5L2/55So5bCP56iL5bqP5om/6L295Yib5oSP5ZCO77yM5bCx5byA5aeL5o6o6L+b5Lqn5ZOB6K6+6K6h5ZKM5byA5Y+R5rWB56iL44CC5YGc55WZ5Zyo5oOz5rOV55qE6Zi25q615pe277yM5LiA5YiH6YO95pi+5b6X5aaC5q2k566A5Y2V44CB5piT5a6e546w44CC55yf5q2j5byA5aeL5Yqo5omL5pe277yM5Lya5Y+R546w5raJ5Y+K55qE5Lqn5ZOB5ZKM5byA5Y+R6YC76L6R6L+Y5piv5pyJ54K55bCP5aSN5p2C55qE44CC5bel5YW35bu66K6u77ya" subsequent_context="IC8gV2luc3VyZiArIOW+ruS/oeW8gOWPkeiAheW3peWFt+eUseS6juaYr+mbtuS7o+eggeWfuuehgO+8jOaIkeS7rOaVtOS4qui/h+eoi+WfuuacrOmDveaYr+mHh+eUqMKgVmliZSBDb2RpbmfvvIjmsJvlm7TmhJ/nvJbnqIvvvInnmoTmlrnlvI/vvIzkuI3mmK/nqIvluo/lkZjluLjnlKjnmoTkuI5BSeWFseWQjOWNj+S9nOe8lueoi+OAgeihpem9kOS7o+eggeeahOaWueW8j+OAguiAjOabtOWDj+aYr+S4gOS4quW+iOacieiAkOW/gw==" web_h5_href="qqnews://article_9528?act=ai_chat&vertical_card_type=ai&vertical_card_desc=Cursor&jumpinfo=%7B%22scene%22%3A%22algo_scribe_words%22%2C%22sentence%22%3A%22Cursor%22%2C%22sentenceContext%22%3A%22%E4%BD%95%E4%B8%80%E6%AD%A5%E6%AD%A5%E6%8A%8A%E6%83%B3%E6%B3%95%E5%8F%98%E6%88%90%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A1%AE%E5%AE%9A%E4%BA%86%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%89%BF%E8%BD%BD%E5%88%9B%E6%84%8F%E5%90%8E%EF%BC%8C%E5%B0%B1%E5%BC%80%E5%A7%8B%E6%8E%A8%E8%BF%9B%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1%E5%92%8C%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%E3%80%82%E5%81%9C%E7%95%99%E5%9C%A8%E6%83%B3%E6%B3%95%E7%9A%84%E9%98%B6%E6%AE%B5%E6%97%B6%EF%BC%8C%E4%B8%80%E5%88%87%E9%83%BD%E6%98%BE%E5%BE%97%E5%A6%82%E6%AD%A4%E7%AE%80%E5%8D%95%E3%80%81%E6%98%93%E5%AE%9E%E7%8E%B0%E3%80%82%E7%9C%9F%E6%AD%A3%E5%BC%80%E5%A7%8B%E5%8A%A8%E6%89%8B%E6%97%B6%EF%BC%8C%E4%BC%9A%E5%8F%91%E7%8E%B0%E6%B6%89%E5%8F%8A%E7%9A%84%E4%BA%A7%E5%93%81%E5%92%8C%E5%BC%80%E5%8F%91%E9%80%BB%E8%BE%91%E8%BF%98%E6%98%AF%E6%9C%89%E7%82%B9%E5%B0%8F%E5%A4%8D%E6%9D%82%E7%9A%84%E3%80%82%E5%B7%A5%E5%85%B7%E5%BB%BA%E8%AE%AE%EF%BC%9A%7BCursor%7D+%2F+Winsurf+%2B+%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E7%94%B1%E4%BA%8E%E6%98%AF%E9%9B%B6%E4%BB%A3%E7%A0%81%E5%9F%BA%E7%A1%80%EF%BC%8C%E6%88%91%E4%BB%AC%E6%95%B4%E4%B8%AA%E8%BF%87%E7%A8%8B%E5%9F%BA%E6%9C%AC%E9%83%BD%E6%98%AF%E9%87%87%E7%94%A8%C2%A0Vibe+Coding%EF%BC%88%E6%B0%9B%E5%9B%B4%E6%84%9F%E7%BC%96%E7%A8%8B%EF%BC%89%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E4%B8%8D%E6%98%AF%E7%A8%8B%E5%BA%8F%E5%91%98%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%8EAI%E5%85%B1%E5%90%8C%E5%8D%8F%E4%BD%9C%E7%BC%96%E7%A8%8B%E3%80%81%E8%A1%A5%E9%BD%90%E4%BB%A3%E7%A0%81%E7%9A%84%E6%96%B9%E5%BC%8F%E3%80%82%E8%80%8C%E6%9B%B4%E5%83%8F%E6%98%AF%E4%B8%80%E4%B8%AA%E5%BE%88%E6%9C%89%E8%80%90%E5%BF%83%22%2C%22source%22%3A%22article_sharepage_scribewords%22%7D" qqcom_pc_href="qqnews://article_9528?act=ai_chat&vertical_card_type=ai&vertical_card_desc=Cursor&jumpinfo=%7B%22scene%22%3A%22algo_scribe_words%22%2C%22sentence%22%3A%22Cursor%22%2C%22sentenceContext%22%3A%22%E4%BD%95%E4%B8%80%E6%AD%A5%E6%AD%A5%E6%8A%8A%E6%83%B3%E6%B3%95%E5%8F%98%E6%88%90%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A1%AE%E5%AE%9A%E4%BA%86%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%89%BF%E8%BD%BD%E5%88%9B%E6%84%8F%E5%90%8E%EF%BC%8C%E5%B0%B1%E5%BC%80%E5%A7%8B%E6%8E%A8%E8%BF%9B%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1%E5%92%8C%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%E3%80%82%E5%81%9C%E7%95%99%E5%9C%A8%E6%83%B3%E6%B3%95%E7%9A%84%E9%98%B6%E6%AE%B5%E6%97%B6%EF%BC%8C%E4%B8%80%E5%88%87%E9%83%BD%E6%98%BE%E5%BE%97%E5%A6%82%E6%AD%A4%E7%AE%80%E5%8D%95%E3%80%81%E6%98%93%E5%AE%9E%E7%8E%B0%E3%80%82%E7%9C%9F%E6%AD%A3%E5%BC%80%E5%A7%8B%E5%8A%A8%E6%89%8B%E6%97%B6%EF%BC%8C%E4%BC%9A%E5%8F%91%E7%8E%B0%E6%B6%89%E5%8F%8A%E7%9A%84%E4%BA%A7%E5%93%81%E5%92%8C%E5%BC%80%E5%8F%91%E9%80%BB%E8%BE%91%E8%BF%98%E6%98%AF%E6%9C%89%E7%82%B9%E5%B0%8F%E5%A4%8D%E6%9D%82%E7%9A%84%E3%80%82%E5%B7%A5%E5%85%B7%E5%BB%BA%E8%AE%AE%EF%BC%9A%7BCursor%7D+%2F+Winsurf+%2B+%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E7%94%B1%E4%BA%8E%E6%98%AF%E9%9B%B6%E4%BB%A3%E7%A0%81%E5%9F%BA%E7%A1%80%EF%BC%8C%E6%88%91%E4%BB%AC%E6%95%B4%E4%B8%AA%E8%BF%87%E7%A8%8B%E5%9F%BA%E6%9C%AC%E9%83%BD%E6%98%AF%E9%87%87%E7%94%A8%C2%A0Vibe+Coding%EF%BC%88%E6%B0%9B%E5%9B%B4%E6%84%9F%E7%BC%96%E7%A8%8B%EF%BC%89%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E4%B8%8D%E6%98%AF%E7%A8%8B%E5%BA%8F%E5%91%98%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%8EAI%E5%85%B1%E5%90%8C%E5%8D%8F%E4%BD%9C%E7%BC%96%E7%A8%8B%E3%80%81%E8%A1%A5%E9%BD%90%E4%BB%A3%E7%A0%81%E7%9A%84%E6%96%B9%E5%BC%8F%E3%80%82%E8%80%8C%E6%9B%B4%E5%83%8F%E6%98%AF%E4%B8%80%E4%B8%AA%E5%BE%88%E6%9C%89%E8%80%90%E5%BF%83%22%2C%22source%22%3A%22article_sharepage_scribewords%22%7D">Cursor / Winsurf + 微信开发者工具
由于是零代码基础，我们整个过程基本都是采用 Vibe Coding（氛围感编程）的方式，不是程序员常用的与AI共同协作编程、补齐代码的方式。而更像是一个很有耐心的文科生，不断向AI许愿。
而进行许愿的关键道具，是一类被称为 AI编程工具 的产品。它们在传统编程工具的基础上，融入了大模型的理解能力和生成能力，强调智能生成、上下文理解、自动调试、自然语言交互等能力。用户可以像聊天一样提出需求，然后由AI生成代码。
这类工具是当下AI行业的热门方向，因此有着很丰富的产品选择范围。在体验了 Cursor、Windsurf、Bolt.new、Trae CN 、Manus、Youware、Flowith 等一系列产品后，最终决定用 Cursor、Windsurf 来进行开发。在这里也简单分享下选择思路供大家参考：
1. 【小程序不是纯前端展示页面】，它涉及页面结构、组件逻辑、接口调用、数据管理等多个层级，同时还要对接微信开发者工具、支持本地调试与部署。像 Manus、Youware、Flowith 这类工具虽然能快速生成网页，但无法导出源代码或灵活修改逻辑，更适合借助它们来做简单的原型验证或者灵感启发
2. 项目仍然属于【小试牛刀】的阶段，充值费用不能太贵，Bolt.new 被淘汰，项目启动时它的价格最高能到200刀/月，虽然现在已经回落到20-30刀/月的方案
3. 希望借这次开发【实际感受不同大模型的能力差异】，因此工具本身对大模型的兼容性和可切换性很重要，Trae CN 的一些服务暂时还无法接入 GPT-4 或 Gemini 2.5 Pro
综合测评下来，Cursor、Windsurf是目前最符合小程序开发需求的选择，它们可以对整个代码进行重构、理解和生成，能够命令终端来完成代码拼贴的工作。此外，我们还要准备好一个重要的工具，就是用于调试、预览小程序的微信开发者工具，因为 Cursor、Windsurf 这样的代码编辑器里是无法直接预览小程序的实际效果的。
只要我们在点击 Cursor 的「Open Project」和微信开发者工具的「导入」时选择同一个文件夹即可把代码关联起来，这样就能边用AI编程工具生成和修改代码，边用微信开发者工具预览了。
定义产品形态：把 GPT / Claude 当成全程陪跑的专家
正式开发之前，最重要的是需要先想清楚产品形态。如开头提到的，我们想做的是一个「AI荐香」的产品概念。主题已经挺明确了，但其实对于开发而言它还只是一个模糊的想法。在想法阶段被忽略的细节，实际有可能决定了整个产品的结构和交互逻辑。描述越模糊宽泛，AI交付的东西就可能与预期相差甚远。
我去翻阅了 Anthropic（AI编程最常用到的大模型Claude的母公司）针对提示词的一些方法论，结合项目实践，总结了三个比较实用的方法：
1. 【把GPT / Claude 当成陪跑的专家，定义它们的角色】
角色提示被认为是与 Claude 互动最有效的方式之一。有了创意点子后，如果一下子没办法设想得这么具体，可以和 GPT、 Claude 多对话聊一聊，让它们充当产品专家、目标用户等不同角色，在追问和讨论中慢慢把产品形态具象化，形成产品需求文档。
2. 【提供具体的上下文信息，明确指出需要AI做什么 / 不需要AI做什么】
想清楚小程序的定位和使用场景是什么、小程序一共有多少个页面、小程序每个页面的主要功能、用户的动作有哪些事件关联等要点信息，比如把「我要一个AI荐香的小程序」变成「生成一个AI荐香的小程序，用于香氛类商品的推荐，主要分为三个页面，首页、对话页及推荐结果页，在对话页面中需要引导用户填写生日、心情、愿望等信息，并结合这些信息给出推荐，推荐的商品必须来自我提供的商品数据库，不得捏造香型进行推荐，对话结束时候出现查看气味卡片的按钮，当用户点击按钮将跳转结果页，结果页中展示香氛名称、香调信息，用户可以在这个页面中进入对应的商品链接」。
3. 【鼓励AI思考，要求它先思考、与你讨论然后再执行】
当面对逻辑较为复杂的问题时，给予AI思考的空间可以大幅提升其表现。最基础的做法就是在提示词中加入「逐步思考」的要求，更好的做法是加入「具体思考步骤」。比如把「用API的方式小程序接入大模型」变成「请逐步思考小程序如何通过 API 与大模型对接，从用户输入到推荐生成再到展示购买结果，尽可能细化每一环节的实现逻辑」，当想法不够确定或者思路还不够清晰时，在 Cursor 中可以多用 Ask 模式，通过反复讨论，帮助AI朝着更清晰的方向前进。
在这个环节，我们进一步将「AI荐香」的小程序产品形态定义为：以 AI 对话导购为核心的交互方式，具备理解上下文语境的能力，能够为用户提供个性化推荐，并支持一键跳转至微信小店完成购买。并借助 AI 给它起名为「香随SCENTFLOW」，寓意香气陪伴在身边，为我们带来好运、增强能量。
跑通主流程：AI 辅助 DeBug ，学会报错和回滚
通过上面的提示词方法、产品思路与AI编程工具对话后，会快速生成一个相对完整的代码框架文件。但无法指望它能一次就跑通，实际体验会发现很多地方是点不动，或者跳转出错的。还需要我们持续地试运行、找逻辑断点、补交互细节，才能把这个产品变成真的可用。
这时候先不用太纠结美观度，产品能动起来比什么都重要。就用最朴素的检查方法，像用户一样多走几遍流程，每出现一个感觉奇怪的地方，就截图或者复制报错信息丢给 AI 解决。
在「香随SCENTFLOW」小程序开发过程中，曾经遇到卡点包括但不限于：
● 首页点击后无法跳转 - 排查了半天，发现是没有登录开发者工具，模拟器处于游客模式
● 小程序无法被分享 - 需要单独开启分享能力并配置页面路径
● 小店商品卡片无法展示 - AI 编程工具将原生组件当成小程序第三方插件调用来写了
有大量的细节点都是在反复的体验和调试后才跑通的，没办法从开始就预判。在这个过程中，零代码基础的小白通过一轮轮的对话，可以学到很多全新的知识点。这里也给和我一样的编程新手，总结了两个关键的 DeBug 操作：
1.【提供准确的报错信息】
报错信息是调试的起点。尤其是对于没有代码基础的小白来说，找到并理解报错信息就是解决问题的钥匙。
● 找到报错信息：在小程序开发过程中，报错信息一般会出现在微信开发者工具的调试器或云开发的日志中。多留意控制台（Console）区域，它会显示错误的具体内容，如无法找到模块、参数未定义等。
● 提供报错信息给 AI：把报错信息复制到 AI 编程工具的对话框中，然后请求它根据报错内容给出可能的解决方案，或者直接修复问题。这比单纯描述错误要更准确，因为 AI 可以快速分析报错信息并为你提供定向修复建议。还可以考虑在提供报错信息的同时，找一些官方的技术文档给 AI 参考。
2.【代码回滚】
有时候，问题也可能是最近的更改导致的。回滚代码是一种快速有效的方法，可以帮助我们排除问题是不是最近的改动造成的，或者帮我们直接撤销修改。Cursor 和 Windsurf 这类编辑器都提供了回滚的按钮，Cursor 中是 [restore checkpoint] ，Windsurf 中是 [revert]。
就这样，在和 AI 多轮对话修改后，我们的荐香小程序终于顺利跑起来了。
解决技术难点：大模型接入、连接小程序与微信小店
由于「香随SCENTFLOW」是一个通过大模型对话推荐商品同时能连接微信小店的小程序，开发过程中我们主要有两大技术难点需要攻克。
1. 【大模型的接入和调试】
1.1 选择大模型服务商并获取API
目前在国内服务器环境进行开发，能比较稳定使用的大模型服务商包括 DeepSeek、通义千问、MiniMax、Moonshot、讯飞星火、文心一言、混元等，还有类似腾讯云、硅基流动这样的服务商。大家可以根据自己的预算、对响应速度的需求、表达风格进行选择。参考的操作步骤如下：
● 在官网注册账号
● 创建一个应用或项目
● 获取 API Key 或者 AppID + Secret
● 查看官方文档，了解接口地址、参数要求、限制说明
● 充值并设置余额告警（建议是测试符合需求后再大额充值）
1.2 使用小程序的「云函数」请求大模型接口
小程序前端不能直接访问外部接口，出于安全限制，我们需要用小程序云开发中的云函数力来充当中间人，防止密钥被盗用。参考的操作步骤如下：
● 在微信开发者工具中开启云开发，绑定你的小程序 AppID
● 命令 AI 在代码结构中创建一个云函数（如：callAI），并在云函数里用 Node.js 写好调用大模型 API 的逻辑
● 配置云函数的环境变量
● 将用户输入信息（如生日、情绪、愿望）打包为请求体传入
● 接收模型返回的推荐内容，再返回给前端显示
1.3 设计 System prompt（系统提示词，即：大模型的角色卡）
小程序通过对话式的交互来推荐商品，对话体验就决定了用户是否愿意停留和互动。而对话体验的感受，往往很大程度受到 System prompt 影响，一定要重视 System prompt 的设计，参考的操作步骤如下：
● 给予大模式角色设定。你可以通过人设（你是谁）、语气（你怎么说话）与使命（你要做什么）来结构化地规范大模型的对话表现。比如「你是香随，一位深谙东方五行玄学与现代香氛美学的香气顾问。你拥有朋友般的亲切与温暖，同时展现出专业、内敛而富有洞察力的沟通风格。现在是第五轮对话，你需要基于前面收集的用户完整信息（使用场景、生日、情绪、心愿）进行精准的香型推荐，营造充满格调的感官体验，传递现代东方生活美学」
● 用「多轮对话目标」约束输出稳定性。在 System prompt 里加入对话的阶段性任务，可以有效防止大模型在多轮对话中跑偏。比如：你正在进行一场五轮的香氛推荐对话，现在处于第五轮，请总结并输出一款最终推荐香型，并用富有想象力的语言描述推荐理由。
● 加入输出格式的要求。根据峰终定律，人们对某段体验的整体评价，主要会基于其在体验中最强烈的时刻与结尾时的感受强度，而非对每个时刻的总和或平均评估。优化好最终回合的对话表现，很关键。可以考虑加入输出格式的限制，比如根据用户前四轮提供的信息进行推荐，并结合五行能量学和用户的个人信息选择最合适的香型，推荐后简要说明选择理由。
● 反向调试，适当增加禁忌说明。在设计 System prompt 时，除了告诉模型「要怎么说」，也可以明确告诉它「不能怎么说」。比如禁止编造不存在的香型信息；禁止使用玄幻、古风的对话风格；禁止使用开发语言告知用户对话进行的轮次等。禁忌写法建议贴近实际遇到过具体问题来定，不必列得很多，而是要精准规避掉不希望出现的内容。
1.4 让大模型从你提供的数据库中推荐商品
光靠文字描述推荐适合什么类型，只是一个感性体验。如果想让用户在对话后直接看到具体商品，并跳转购买，就需要让大模型不仅生成推荐语，还能从我们提供的商品数据中，做出匹配选择。参考的操作步骤如下：
●准备一个结构化的商品数据库。零代码基础的小白，可以用 .csv 表格的形式整理你的商品列表。每条商品数据建议包含以下字段：Name（香型名称）、ProduceId（用于存放小店商品id）、Notes（香调信息）等。
●用微信开发者工具中的云开发能力，将数据存放在云端数据库中。方便后续的更新和调用，并通过 AI 编程将香型推荐范围限制在提供的数据库中。
1.5 检查 token 消耗情况
对于独立开发而言，有一个易被忽略但非常重要的因素：token消耗与调用成本。大模型厂商普遍按照 token（字节量）计费，不同模型价格差异巨大。小程序如果采用的是【多轮对话+商品推荐+多字段回复】，其实挺烧 token 的。可以在模型服务商后台查看平均每次调用消耗的费用，也可以在日志中注释 token 消耗情况以便查看。在这个项目中，当成本超出预期时，我们采取过以下比较有效的办法压缩 token 消耗，供参考：
●压缩 System prompt 的字数。在能满足需求的前提下，简洁表达为主
●限制输出长度。在 prompt 中加入字数限制指令「请使用不超过300字进行推荐」
●分段式请求，只在关键节点调用模型。比如在第四轮后调用香型信息，不要每次对话都上传
2.【使用原生组件能力连接小程序与小店】
接着我们来看一下小店组件的接入，大模型对话顺利推荐了商品信息后，如果在结果页中增加小店的跳转，可以大大节省交易场景的开发成本。同时，我们还希望可以它做到个性化的推荐，也就是说无论 AI 推荐了哪款商品，对应的结果页面中呈现的小店商品组件都是正确的。参考的操作步骤如下：
2.1 开通微信小店，上架商品
● 申请开通微信小店，并完成资质审核
● 填写店铺信息，上架商品，设置库存与价格
● 在微信小店后台复制小店ID及商品ID信息
2.2 向 AI 编程工具提出连接小店商品的指令
● 提出小程序中加入小店商品组件的指令，记得明确在哪个页面 / 什么位置中出推荐
● 模型的知识可能有一定的滞后性，比如会把小店组件理解为小商店（小程序团队以前的一款产品）或者小程序的第三方插件，因此这类最新的能力，最好在沟通过程中直接附上技术文档，方便理解插件、组件的区别
● 把复制的商品ID填入商品数据库中，作为其中一个字段，这样调用的大模型才能读取到对应商品信息，然后在结果页中做一一对应呈现
2.3探索小店连接小程序组件的能力边界
在「小店连接小程序」的技术文档里可以看到，小店连接小程序的能力存在自定义的空间，可以按需取用。比如我们就把购买的按钮从默认的橙色改为了更符合整体设计风格的绿色。
这部分作为AI荐香小程序的核心技术和我们的商业机密，想分享的内容忍不住越写越多，都是 AI 编程过程中真实踩过的坑、积累的经验。但对新手小白来说可能会比较晦涩，需要上手实践才能具象化。
UI / UX 细节优化：兼顾美感和功能性
尽管 AI 已经生成了完整的页面结构并跑通了主流程，结果却仍然可能让人失望，颜色不对、排版俗气、字体太大、按钮难看等等，描述的是高级感设计，AI 却生成了花哨的页面。这是因为「高级感」和「看起来舒服」这样的抽象词，对设计风格的还原帮助很有限。
《设计心理学》里有这样一句话，「体验非常重要，因为它体现了用户多么怀念他们同产品的互动」，希望我们的产品也可以带给用户类似的愉悦感。带着这样的愿景，开始打磨小程序的 UI / UX 细节吧。
1.【找到想实现的风格参考图】
● 国内站点推荐：花瓣网、小红书、站酷等
● 国外站点推荐：Behance、Drribbble、Pinterest 等
● 还有一种最粗暴的方式，就是直接截图自己喜欢的 App来研究
2.【让AI充当设计顾问，用设计语言翻译你想要的风格】
● 把找到参考图交给多个 AI 模型（如 GPT、DeepSeek、Claude、Gemini 等），让它们拆解风格并转化成易于落地的描述。通过不断追问，明确产品主色调、字体、组件样式等关键元素，形成系统的视觉方案，比如分析这张界面的设计风格，从配色、字体、排版、按钮形态等，又比如将这种风格翻译为微信小程序代码中的样式指令，包括背景色、按钮样式、字体大小和间距等。
● 将 AI 提供的设计建议梳理成为可供灵活调用的视觉规则和设计组件库。与 AI 编程工具协作时，直接引用这些设计规范，让生成结果更接近你想要的效果，比如主题色是#F8F1EB（米白），标题字体用思源宋体，正文字体用思源黑体，按钮样式均保持圆角 20px、无边框、80%透明度等。
3.【在微信开发者工具中预览和微调】
及时地在「微信开发者工具」中预览界面，逐项校对并记录每一次的微调，如：字体太小、行间距、按钮应用效果等问题。可以拿出平时认真排版 PPT 的毅力，以设计师的标准去看每一处细节，并不断与 AI 对话、反馈你的想法，直到最终还原出你理想中的页面效果。
对于初学者来说，拖拽式的设计方式其实比生成代码更直观、易上手。我们也观察到，目前已经有越来越多 AI 编程工具开始支持 可视化拖拽 + 代码自动生成 的方式，大大降低了设计与开发的门槛。如果微信开发工具也能够支持这类拖拽式的交互方式，就更好了。
4. 【利用设计工具绘制自己想要的小程序界面】
如果有一定设计基础，还有更高效的还原方式，**可以直接使用设计软件（如：Figma、Sketch、Photoshop 等）绘制出自己想要的小程序界面，通过以下两种方式快速转化为可实现的代码：
4.1 切图还原高保真视觉稿
适用于复杂背景、装饰图层或特殊排版等 AI 难以精准还原的视觉元素。在有设计基础的前提下，切图会比代码绘制更能还原想法，还可以加入AI生图来协作。但不适合频繁交互或需要适配不同设备的元素。
操作步骤：
● 在设计软件中，将视觉稿按模块切图，建议使用 2X 或 3X 分辨率导出 PNG 格式
● 将导出的图片放入小程序项目的images（可能是其他命名方式，总之是用来存放图片素材的）文件夹中
● 向 AI 明确说明图片的路径、命名方式及使用位置，如：请将名为 background.png 的图片设置为首页的全屏背景图，图片已放入 images 文件夹中
适用场景：
● 插画、背景图、图标等非交互类元素
● 对还原度要求高的特殊排版或装饰细节
● 搭配AI生图工具，可提高视觉方案的效率
4.2 复制为 CSS 代码
针对按钮、输入框、文本样式等基础样式快速复用场景， CSS 的方式适配性更强。
操作步骤：
● 在设计软件中，选中任意组件（如按钮、标题、输入框等）
● 右键选择「Copy as CSS」，即可复制对应的 CSS 样式代码
● 把这段代码粘贴到小程序的 WXSS 文件中，或交由 AI 编程工具粘贴并调整即可
适用场景：
● 快速实现文字样式、颜色、边距等基本 UI 元素
● 更适合需要响应式布局或跨设备适配的组件
● 比切图方式更轻量，更利于维护与修改
使用设计工具绘制的产品UI
除了追求界面美观，更关键的是在设计中学习做功能取舍。不追求在一期就完成所有功能，而是保持克制，从第一性原理出发，优先跑通核心流程再逐步迭代优化。如果前期的交互太花哨或功能过多，反而容易让用户失焦，削弱了主路径的效率。
以「香随SCENTFLOW」的荐香结果页为例，最初曾设想过加入一些有趣的交互方式，比如滑动替换推荐卡片颜色、一键保存为图片、授权获取用户昵称、点击复制香型名称等等。但最终，我们只保留了其中三项功能：
●重新生成对话：核心作用是提升推荐准确性。当用户对当前结果不满意时，有动力再试一次，这能有效提升留存和交互深度
●分享给好友：这是社交传播的主要路径，用户可直接将结果发送到聊天界面（由于推荐结果为随机生成的分享图，当前暂不支持朋友圈分享）
● 商品卡片内的购买按钮：这是导购类小程序的主路径，我们的第一目标是促成转化。按钮越多，越有可能稀释用户对购买动作的关注和点击，因此必须慎重取舍。 总结来说，我们希望用户在结果页的体验是聚焦且清晰的，在有限的交互中强化转化和社交传播路径，是起步阶段最优解。
小程序上架：把想法变成产品的最后一步
在产品形态、设计风格都已经符合我们的需求，主流程也整体跑通之后，就可以开始准备着手小程序上架了。
1. 【注册并认证微信小程序】
● 前往微信公众平台注册小程序账号
● 填写主体信息、小程序名称
● 上传小程序头像、介绍等信息
● 准备好邮箱、企业营业执照（如有）
小程序的注册主体分为三类：个人主体、个体工商户、企业/机构主体
● 个体工商户：是最适合大多数个人创业者的选择，支持大部分服务类和商业类目，认证费用只要30元/年，非常友好
● 个人主体：适合做一些简单的内容展示类小程序，但不支持AI服务、社交、电商等大多数功能型类目，限制较多
● 企业或机构主体：适合需要开通支付、广告、AI能力等复杂功能的小程序，认证费用通常为300元/年，支持类目最全
在前面写代码环节，大部分开发者已经就完成了注册的步骤，但如果用的是测试号 / 其他非发布用的小程序账号来写代码，可能还涉及到代码搬家的环节。建议在进行云开发之前就完成注册和搬家，不然环境配置等等都需要从头来过，Vibe Coding（氛围感编程）在代码搬家的环节中比较容易出错。
2.【服务类目备案】
类目必须与小程序功能一致，否则会审核失败。当小程序涉及到AI服务类目（如大模型生成内容，AI 图像/语音合成等）时，还需要提供「深度合成证明」，这是最近微信小程序审核中非常重要的一项合规要求，尤其小程序用了大模型生成内容，一定要准备并上传该证明材料，否则很可能会被驳回。
「深度合成证明」应该去哪找？很多独立开发者会卡在这步。以下是一个常用且实用的解决办法：
● 打开微信小程序后台的「服务市场」
● 获取订单截图和算法备案截图，截图要完整，把订单号、下单时间等截进来
● 在类目申请中，勾选「使用第三方技术」，并上传上述材料，即可完成AI深度合成类目备案
简单总结两种常见情况：
● 仅用AI写代码、但小程序本身不涉及AI功能：如果你只是用AI来写小程序，个人主体也可以上架，类目按照你实际做的小程序来申请就好
● 小程序本身使用了AI能力（如生成内容）：在小程序里用到了AI合成的能力，那么就需要企业/个体工商户这类机构主体才可以上架，并且需要提交深度合成证明
3.【提交代码审核及正式发布】
在 「微信开发者工具」 中将代码上传为体验版，进行最后的调试和功能走查。走查一切正常后，进入小程序后台的「版本管理」页面，将体验版提交审核，审核通过后就可以正式发布上线了！
至此，一次完整的AI编程小程序开发体验就基本结束了，AI 的到来让学习变得更具互动性和趣味性。零代码基础的小白，仅靠理论学习很难快速掌握编程的逻辑和原理，也很容易想要放弃。而 Vibe Coding（氛围感编程）就像是一种互动式、游戏化的体验，增强了学习的乐趣：你许愿，它实现。即使遇到报错，它也能帮助你逐步厘清背后的编程知识要点。页面跑起来的那一刻，成就感是很强烈的。在 AI 的帮助下，非技术岗位的市场人也能解锁一种新表达方式，将脑海里模糊的想法变成真实可用的产品。如果说短视频让更多普通人拥有了记录生活、被看见的方式，AI 编程或许也能成为普通人实现创意、被看见的另一种方式。想鼓励每位热爱研究产品和AI的朋友都尝试一下，整个探索的过程还是很好玩的。
「香随SCENTFLOW」小程序正式上线两周，小程序的用户数已突破 400+，微信小店销量 200+ 。小程序真的很适合用来尝试 Vibe Coding（氛围感编程），潜力巨大。对于独立开发者而言，小程序无需复杂的部署流程，一台电脑和一个微信账号就能搞定。 AI 编程工具也已经能较好地支持小程序的代码结构，比开发一个 App 更轻便，非常适合快速验证创意。且用户无需下载，扫码即用。加上小程序与微信支付、微信小店等能力的打通，可以说微信生态不仅能解决分发问题，还能直接带来收益。我们也非常期待微信开发者工具未来不断增强 AI 编程的能力，微信服务市场接入更多主流大模型接口的服务，让更多的开发者知道，用小程序就能够很方便地把 AI 相关的创意落地。