AI打通UI到代码:手机原型一键生成微信小程序

新闻

作者：微信文章

本文适用人群：开发者、产品经理、手机端高保真原型UI/UX交互设计师

使用 AI 工具 ：智普清言 CodeGeeX、Kiro (Claude Sonnect 4.0)

本文核心目标：将手机端原型UI/UX设计稿作为AI辅助编程需求任务的起点，以目标开源框架代码为输出标准，目标通过聊天式迭代直达微信小程序代码生产

最近一个月内，作者和朋友使用业余时间，借助 AI 智能编辑器协助编程能力, 完成开发并上线了一款“运动健康”相关的小程序。打通了手机端UI原型交互到微信小程序开发环境闭环流程。实现除人工参与编写少量代码外，大多数代码都是人主导AI 协助编程完成。整个核心闭环流程设计如下图所示：



从手机端UI原型交互到微信小程序开发环境流程

其中，流程中各个阶段介绍大致如下：

手机端UI 原型交互设计阶段：启动AI 的强大能力，让AI 智能编辑器扮演-产品经理、UI及交互设计师、前端开发工程师多重角色，交付出手机端高保真的 UI 需求原型交互设计图。

AI 协助编程阶段：让 AI 智能编辑器明确手机端 UI 原型交互设计阶段的业务需求、UI 交互逻辑、界面约束、样式规范，让 AI 读懂输出目标端微信小程序端生产环境的代码。开发者通过从需求描述到功能审核验证。产出真实目标的生产环境的代码。

微信小程序开发阶段：AI 智能编辑器产出的最终目标端代码。符合真实可用的项目代码。

---

以上整个过程产出代码质量如何？取决于编码操控者描述、协同编写代码的控制力度，对有编程经验基础朋友，控制起来相对更加有优势。 如：

当智能编辑器 AI 产出代码的速度远远大于编程人员理解的速度时。作者使用模块化渐进式的开发方式来解决该问题。通俗的说就是：一次完成一个小的功能任务模块，最后将完成后的各个模块进行组合。

当然，也不难发现，彻底搞清楚需求才是一个项目价值起点，往往来回折腾，代码只是一种实现途径。有了AI协助编程，也意味着一种开发范式转变。

你无需亲自编写每一行代码，你只需分配任务、设定目标，将产出的代码进行功能需求的审核、验证。从之前纯人工编码转变为人与AI混合式开发或指挥者。



AI 协同编程下开发者角色演变

接下来是本文实现手机UI原型到真实微信小程序项目的核心演化路径，其中每个阶段核心流程的详细介绍，对于零编程经验的朋友也无需担心，你完全可以使用前端UI原型交互结构化 Prompt 使用智能编辑器Kiro、字节智能编辑器Trae，将你的想法变成高保真的手机端可交互的网页草稿。

相信对于无论产品原型设计、还是AI 协同编感兴趣的朋友有着切实的效率上升级和灵感启发。至此，R&B音乐🎶响起，你可以‘听’文章的情绪。附歌词：

在科技浪潮之巅

AI编程闪耀新篇 UI原型灵动展现

交互设计魅力无限

AI它角色万千 产品设计紧密相连

前端工程携手并肩 一同奔赴编程前沿

模块化开发的理念 小步迭代稳步向前

功能验证细致周全 代码质量牢不可撼

AI编程新纪元 从原型到小程序之间

协同编程奇妙体验 创作效率不断升迁

开发者身份转变 从编码到指挥的蜕变

需求描述清晰明辨 代码审查用

---

AI协同编程：打通手机端UI原型到微信小程序开发的演化本文目录：

一、UI 原型交互设计阶段

1.1、前端UI 原型交互说明
1.2、前端UI原型交互结构化 Prompt

二、 人与 AI 协同编程阶段

2.1、人与 AI 协同编程实践流程

2.2、核心原则

2.3、 关键心态

三、 基于开源框架微信小程序二次开发
一、 UI 原型交互设计阶段

1.1、前端UI 原型交互说明

该阶段最核心目标是：搞清楚真实业务需求，并将其转化成UI原型交互设计稿。UI 原型交互设计是为了准确传达用户真实的需求意图、直观的界面及可感知的交互展示。产出的原型网页版本代码是功能需求概念的快速验证，为后续真实开发环境 UI 界面提供真实参考依据。并为 AI 产出微信小程序的环境代码，建立约束、目标及任务。

一个前端UI原型交互结构化-Prompt 即可作为你 UI 交互需求原型交付的起点。生成完整原型交互项目目录结构后，在此基础上就可以进行需求功能新增或扩展。如下如所示

目录结构补充说明：

*.html 后缀文件，为浏览器可运行的网页文件

*.css 后缀文件, 美化样式

*.js 用户触发的行为交互脚本，如：按钮点击等



UI原型交互结构化-Prompt


1.2、手机端UI原型交互结构化 Prompt

功能作用：让AI 智能编辑器扮演-产品经理、UI 及交互设计师、前端开发工程师多重角色，极大发挥AI协助编程的能力，同时交付出iPhone 15 Pro尺寸(375x812px)的HTML原型页面, 包括登录（login.html）、主页（home.html）、个人中心（profile.html) 三个核心的初始化界面。使用者可以在此基础上依据自己需求需要，根据自己想法实现手机端UI原型交互设计稿。

优势：节省了UI设计环节，产出UI原型交互设计稿还原手机端高保真图，从而提升开发效率。

---

结构化提示词中的应用名称app-name 可根据个人真实需要更改。手机端UI原型交互结构化Prompt如下：
;; 根据 ROSES框架 - 生成结构化提示词;; Role: 角色：产品经理、UI/UX设计师、前端开发工程师;; Objective: 目标：完成登录、主页、个人中心三个核心界面初始化框架，规划可复用代码;; Scenario: 场景：生成通用移动端原型界面模版;; Expected Solution: 期望方案：iPhone 15 Pro尺寸(375x812px)的HTML原型;; Steps: 步骤;; @by 江枫
;; 定义应用变量 app-name 可根据个人需求更改(defvar *app-name* "运动健康")
;; 定义手机端原型交互模版启动函数(defun start-uiux-framework (app-var)  (list    :R (format nil "我将扮演全栈产品开发专家，融合产品经理、UI/UX设计师、前端开发工程师三重角色，负责原型~A APP的完整原型设计与实现。" app-var)    :O (format nil "开发~ APP的高保真交互原型，包含登录、主页、个人中心三个核心界面，确保原型可直接用于开发二次修改，具备完整的视觉设计和交互功能。" app-var)    :S "生成通用移动端原型界面模版初始化。系统需要提供安全登录、主页、个人中心等功能，支持页面间的数据交互。"    :E "技术实现：iPhone 15 Pro尺寸(375x812px)的HTML原型，采用使用玻璃拟态、多层阴影系统设计风格，包含iOS状态栏和底部Tab导航。使用iframe架构实现页面切换，集成涟漪动画、微交互效果。代码结构：共享CSS/JS文件 + 独立HTML页面，支持响应式设计和真实图片素材。"    :S (format nil "1. 用户体验分析：梳理~ APP的高保真图核心流程和交互逻辑                    2. 产品界面规划：设计信息架构和页面层级关系                      3. 高保真UI设计：创建符合iOS规范的现代化界面,使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）                    4. 代码架构设计：规划可复用的CSS/JS组件，要求JS实现使用驼峰命名、功能职责单一，使用 addEventListener 的方式动态绑定事件，以实现行为与结构的分离。                    5. HTML原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。                      6. 代码拆分，保持结构清晰：每个HTML独立存放 如: login.html、home.html、profile.html三个核心页面，                    7. 交互效果集成：添加涟漪动画、悬停效果、页面切换动画                    8. 测试与优化：确保跨浏览器兼容性和交互流畅性" app-var)))
;; 启动手机端原型交互模版函数(setq *uiux-framework* (start-uiux-framework *app-name*))(format t "ROSES框架已启动 - ~A APP原型开发~%" *app-name*)
二、 人与 AI 协同编程阶段

AI 协同编程阶段主要是为了 让 AI 智能编辑器读懂目标源代码（微信小程序真实开发环境的代码）后，实现前端手机端UI 原型交互到微信小程序生产代码的演变。



左图为： UI/UX 原型交互设计   右图：小程序截图

以下是作者实践后提炼的人与 AI 协同编程实践核心流程。
2.1、人与 AI 协同编程实践流程

首先，先提供给 AI 生产环境示例代码让其进行解读、代码规范作为输出的参考目标将手机端UI 原型交互设计稿html，css 样式作为需求输入，按照以上示例代码规范让AI智能编程助手进行代码编写完成功能后，要进行功能审核、验证，若编写代码没有满足需求（业务需求、代码审查、优化），需要逐步进行需求迭代与代码优化。直至满足需求即可

人与 AI 协同编程实践流程

如果你之前经常使用AI编程或设计原型，在实践过程中我们会不难发现：

AI 产出代码的速度远远大于人编码的理解的速度。为了解决该问题最好的方式就是进行模块化渐进式的开发（一次完成一个小的功能任务模块，最后将完成后的各个模块进行组合）其使用方法是合理使用Ask智能问答模式与Agent模式，其中Ask智能问答模式适合人为逐步确认将代码添加到开发环境中。而Agent模式是让AI自动协助编写代码，完成一次确认后即可完成初步逻辑代码的编写（实战详见：如何让编程助手准确生成手机端原型交互界面）无论采用哪种组合模式，AI 编程助手编写完成代码后，开发者需要进行审核、验证，直至验证通过为止。

2.2、核心原则

核心原则是人始终作为架构师、评审者和决策者，AI作为高效的副驾驶和代码生成工具。

明确需求与边界

清晰问题描述：用自然语言详细描述功能、输入输出、边界条件、性能要求。

定义上下文：提供业务背景、技术栈、现有代码片段。拆分任务：将复杂需求拆分为AI可处理的小模块（如“实现一个JWT验证函数”而非“构建用户系统”）

2.3、 关键心态

信任但要验证：AI是强大的助手，但不是替代品。保持批判性思维：生成的代码越“完美”，越需要深入审查。持续学习：理解AI生成代码背后的逻辑，提升自身能力。

三、 基于开源框架微信小程序二次开发

该阶段为作为 AI 编程助手生成的目标代码标准，为了代码的可控度，若开发者越熟悉开源框架小程序的代码，其让AI生成的目标代码的效果越好、并越可控。

若是从0-1使用uniapp 构建的项目，可控度当然更好，因为每一步开发者了然于心。以下是 使用  vue-cli方式 初始化跨平台  app 小程序目录结构如下：



微信小程序开源示例目录结构

本文考虑手机端UI原型到微信小程序开发的演化流程的通用性，并没有详细到具体的技术细节实现。总之，人与 AI 协同编程实践流程无论是使用哪种技术栈让AI协助编程，其方法论完全通用且可迁移。整个过程节省了UI设计，原型即UI代码，让AI 读懂开源框架或从0-1构建的微信小程序代码后，将手机端原型UI/UX设计稿作为AI辅助编程需求任务的起点，以目标开源框架代码为输出标准，最后通过聊天式迭代直达微信小程序代码生产核心设计思路。
引用参考

https://kcn7nwtck8k3.feishu.cn/wiki/MnVcw4ihpiVkzhkizEVcjnkMnNe 手机端原型交互构建模版结构化提示词
https://mp.weixin.qq.com/s/NSEPIUOAJLNnbGly5BLFUA 如何让编程助手准确生成手机端原型交互界面

https://uniapp.dcloud.net.cn/ uniapp 官方文档

https://github.com/dcloudio/uni-app uniapp 代码仓库

https://gitee.com/wot-design-uni/wot-design-uni 一个基于vue3+Typescript构建，参照wot-design打造的uni-app组件库

https://gitee.com/yudaocode/yudao-mall-uniapp uniapp 商城