小程序单画布 UI 组图生成器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @showapi/miniapp-single-canvas-ui-group-generator-showapi 到你的 AI 助手中。
技能介绍
要解决的问题
小程序 UI 原型常见做法是逐页生成再拼接,容易出现页面边界断裂、风格漂移、排版不统一,交付前还要反复人工校对。这个技能把需求、页面结构和样式约束放进同一次生成任务中,在单张画布里产出包含多个界面的高保真组图。
技能如何工作
它按异步任务方式运行,核心链路包括:
- 意图解析:从自然语言中提取业务类型、界面清单和排版偏好。
- 结构规划:生成页面 ID、名称、核心组件与布局类型清单。
- 样式锁定:结合品牌风格确定全局设计令牌与画布坐标。
- 提示词构建与渲染:融合结构、坐标和样式参数,调用图像生成能力输出组图。
- 轮询与校验:通过
task_id查询结果,并对风格一致性、排版一致性和规范符合度做评分。
适用边界与注意
适合做小程序多界面原型、设计稿快速预览和视觉规范初检。所有真实调用强制异步,轮询时需要同步反馈进度;无 appKey 时只返回模拟结果,用于效果预览,不等同于真实生成。
截图预览
使用场景
- 接到外卖或社区团购小程序需求时,一次性生成首页、分类、详情和个人中心的多界面高保真组图。
- 评审小程序视觉规范时,把品牌主色、3 列网格和界面清单输入,生成单画布组图并查看一致性评分。
- 给客户交付阅读类小程序原型前,用纵向排列和 9:16 比例生成多屏界面,快速检查排版与风格是否统一。
- 在竞品原型讨论中,快速产出美食分享小程序首页、食谱页和发布页的单画布 UI 组图,用于对齐界面结构。
适合人员
- 独立开发者在接小程序外包时,需要快速产出多页面 UI 组图,减少逐页拼图和人工校对时间。
- 产品设计师在出评审稿时,需要把首页、分类、详情等界面放进同一画布,检查风格与排版一致性。
- 前端工程师在评估页面实现范围时,需要依据技能输出的页面结构清单和组件列表拆分开发任务。
- 小团队负责人在给客户提案时,需要快速生成符合品牌色和网格布局的小程序界面原型图。

