微信小程序前端UI开发

解决什么问题

微信小程序开发中，前端 UI 搭建常常卡在几个环节：设计稿要手动翻译成 WXML 和 WXSS，配色、字体、组件布局全凭经验；不同页面间样式容易跑偏；更常见的是生成出来的代码缺文件、缺页面注册、事件绑定对不上，贴进开发者工具才发现跑不起来。WMP-Front 把设计系统、API 规范和 UI 模式打包成一个自包含技能，让你描述完需求就能拿到一份可直接预览的完整工程。

技能如何工作

整个流程分四个阶段，前两个需要你参与确认，后两个自动完成。

阶段一：需求澄清。技能会一次性批量提问，包括小程序类型、需要的页面、核心布局，以及风格方向、配色、字体、关键交互等设计偏好。每个选项附简短预览，你可以直接说"你决定"让 AI 自动匹配。

阶段二：设计生成。产出设计 Token 和页面线框，你确认后进入代码生成。

阶段三：代码生成。按确认方案逐页生成完整的 .wxml、.wxss、.js 三件套，页面路径自动注册到 app.json，TabBar 一并配置。尺寸单位统一用 rpx，不使用 CSS 变量，不混入 HTML 标签或 Web API。遇到语法错误先自动修正一次，同一错误第二次出现才暂停报告。

阶段四：验证与输出。检查页面注册、文件完整性、WXML 指令、WXSS 合法性、事件绑定对应关系，最后输出可用工程。

还有一个关键设计：凡是涉及图片（Banner、商品图、头像等），技能会在早期就询问你倾向哪种处理方式——文字占位、你提供 URL、还是现场 AI 生成，而不是直接写死一个图片地址。

适用边界与注意点

• 技能生成的是前端页面代码，不含后端逻辑、云函数或网络请求的真实实现。
• 图片默认走文字/色块占位，如果选 AI 生成，耗时明显增加，需要确认后再执行。
• 输出目录有安全检查：目标目录已有同名项目时，会在新子目录（_v2、_v3）中生成，不覆盖原有文件。
• TabBar 图标路径会标注需要你手动替换为本地资源。
• 生成后请在微信开发者工具中实际预览，部分交互行为仍需根据你的业务逻辑调整。