自然语言生成小程序页面:把一句话描述变成完整微信小程序页面代码

前言

写微信小程序页面时,重复劳动很多:照着需求搭 WXML 结构、写 WXSS 样式、补 JS 交互、配 JSON 页面配置,四个文件互相对齐。改动一处布局,往往要同时改三四份代码,容易出错。

下面介绍的 Skill「自然语言生成小程序页面」做的事很直接:你用一句自然语言描述想要什么页面,它给出这个页面完整的微信小程序代码,包含 WXML、WXSS、JS、JSON 四个文件。它属于 dev-programming 分类,由社区发布者 user_92725383 维护,版本 1.0.0,来源标记为 community,当前不需要 API Key。

这是什么

一句话定位:自然语言描述 → 微信小程序完整页面代码(WXML+WXSS+JS+JSON)。

它不是一个小程序框架,也不是低代码可视化编辑器,而是把「描述需求 → 得到四件套代码」这一步自动化的生成类 Skill。你负责把页面需求说清楚,它负责产出可以直接放进项目的页面文件。

官方地址:https://api.skillhub.cn/user_92725383/miniapp-page-builder
SkillHub 页面:https://www.skillhub.cn/skills/user_92725383/miniapp-page-builder

核心功能

只列出资料中明确出现的能力:

  1. 接收自然语言描述作为输入,不需要手写界面结构或样式代码。
  2. 输出微信小程序完整页面代码,覆盖 WXML(结构)、WXSS(样式)、JS(逻辑)、JSON(页面配置)四个部分,而不是只给片段。
  3. 输出是页面级别的四件套,四个文件对应同一个页面,便于直接落盘使用。
  4. 元数据显示 requires_api_key=false,使用前不需要准备额外的 API Key。

资料中没有列出它支持的页面类型、组件范围、是否支持多页面项目或自定义组件复用。这些能力边界需要在实际使用时自行确认,不要假设它覆盖全部小程序开发场景。

安装与启用

已抓取资料中只给出了 Skill 的官方地址、SkillHub 页面和版本信息,没有提供命令行安装命令、目录约定或配置文件字段,也没有说明 Cursor、Codex CLI、Claude Code 在不同宿主下的安装差异。

因此这里不写未经核实的安装命令。启用方式以官方页面为准:打开 SkillHub 页面查看安装或导入说明,按页面上的指引把该 Skill 接入你使用的 Agent 宿主。

需要核对的信息点:

  1. Skill 坐标为 @user_92725383/miniapp-page-builder,版本 1.0.0,在按名称引用或检查版本时可以用上。
  2. 分类是 dev-programming,如果宿主支持按分类浏览,可以在该分类下找到它。
  3. 标签为 requires_api_key=false,说明不涉及密钥配置;若你的宿主仍提示需要密钥,那是宿主侧的通用设置,与该 Skill 无关。

典型用法

资料中的简介给出的是能力描述,没有附带可复现的完整输入输出示例。下面给出的是使用流程,输入内容示例属于按能力描述组织的演示,不是官方原文。

  1. 明确页面目标:想清楚这个页面要展示什么内容、有哪些区域、点击后做什么。描述越具体,得到的结构越可用。
我想做一个商城商品列表页,顶部有搜索框,下面是商品卡片网格,每张卡片包含商品图、名称、价格和「加入购物车」按钮,点击按钮时把商品信息打印到控制台。
  1. 把这段描述交给已启用该 Skill 的 Agent,要求它生成完整页面代码。

  2. 拿到输出后检查四件套:

  • WXML:确认页面结构、容器层级、按钮绑定的事件名与 JS 中的方法名一致。
  • WXSS:确认布局是盒模型而不是小程序默认的 View 布局,检查 rpx 单位和样式作用范围。
  • JS:确认 Page 配置、data 字段、事件处理函数是否齐全。
  • JSON:确认页面标题、是否启用某项页面级能力。
  1. 把四个文件按小程序项目结构放好,例如 pages/goods-list/ 下分别命名为 index.wxml、index.wxss、index.js、index.json,然后在 app.json 的 pages 数组中登记路径。
pages/
  goods-list/
    index.wxml
    index.wxss
    index.js
    index.json
  1. 在微信开发者工具中编译预览,再根据实际显示调整。生成的代码是起点,不是终点。

适用场景与注意

适合的场景:

  1. 需要快速搭出页面骨架,再在骨架上继续迭代。
  2. 想先看到一份完整四件套,用来对照自己手写的实现。
  3. 熟悉的页面类型(列表页、表单页、详情页)的样板生成。

需要注意的限制:

  1. 生成结果需要人工审查。WXML 中的事件绑定、JS 中的方法名、WXSS 中的类名,任一处不一致都会导致页面跑不起来,审查时优先对齐这三处。
  2. 复杂业务逻辑、网络请求、状态管理、自定义组件封装不在已核实的能力范围内。需要这些能力时,要么在生成结果基础上自行补齐,要么换用更专门化的工具。
  3. 样式与布局仍需在微信开发者工具中实机预览确认,生成代码不能替代真机验证。
  4. 该 Skill 来自社区发布者,版本为 1.0.0,安装前先看官方页面说明,确认与你当前的开发栈和宿主兼容。
  5. 涉及页面数据来源、登录态、权限校验等安全相关逻辑时,不要直接信任生成结果,必须按项目的安全规范自行实现。

结尾

这个 Skill 的价值在于省掉从需求到四件套的第一遍编写工作:你描述页面,它给出 WXML、WXSS、JS、JSON。生成结果之后仍需自己审查、调整和验证,但起步成本明显降低。

官方地址:https://api.skillhub.cn/user_92725383/miniapp-page-builder

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜