前言¶

做小程序 UI 交付时，常见的做法是逐个页面分别出图，再自己拼成一张组图。拼图带来的问题很具体：每个页面的画布尺寸、留白、字号比例不统一，拼起来一眼能看出割裂；多张图分别导出，改一处要重新导一遍，风格漂移几乎不可避免。

下面介绍的 Skill「小程序单设计UI组图生成-万维易源」换了个思路：不是先生成多张图再拼接，而是在单一画布上按排版坐标一次生成包含多个 UI 界面的完整组图。

这是什么¶

「小程序单设计UI组图生成-万维易源」是一个面向小程序 UI 原型与多页面设计稿的出图 Skill，由万维易源发布，分类在 design-media，标签标明 requires_api_key=true，当前版本 1.0.1。

它解决的问题是：把「多个页面的小程序设计稿组图」做成一次生成、风格一致、可直接用于交付的产物，而不用开发者自己处理拼接和跨图对齐。

核心功能¶

1、单画布排版坐标逻辑。把多个 UI 界面按坐标排布在同一张画布上，组图的排版关系在生成阶段就确定，不需要事后拼合。

2、全局样式锁定。跨界面共用一套样式约束，页面之间的配色、元素比例、留白保持一致。

3、精准英文提示词。用英文描述出图需求，配合上面的排版与样式约束，直接生成完整的小程序设计稿组图。

4、一致性逻辑校验。生成后执行一致性校验，用于发现组图内部风格或排版不统一的情况。

官方给出的适用场景包括：小程序 UI 原型设计、多页面设计稿生成、软件研发出图、图片创作、高保真端到端设计交付。

安装与启用¶

官方资料未给出通用的一键安装命令，也没有列出 Cursor / Codex CLI / Claude Code 各自的差异步骤。可核实的信息如下：

坐标（registry path）：

@showapi/miniapp-single-canvas-ui-group-generator-showapi

来源与分类：

source:  enterprise
category: design-media
发布者:    万维易源
版本:      1.0.1

使用时的两点前提：

1、该 Skill 基于通用 SKILL.md 格式，需要在支持该格式的 Agent 中加载。
2、标签 requires_api_key=true 表明运行时需要 API Key；具体调用方式与配置字段以官方页面的 SKILL.md 说明为准，此处不臆造字段名。

官方地址：https://api.skillhub.cn/showapi/miniapp-single-canvas-ui-group-generator-showapi

SkillHub 页面：https://www.skillhub.cn/skills/showapi/miniapp-single-canvas-ui-group-generator-showapi

典型用法¶

资料中未提供可直接复制运行的官方示例命令，因此不杜撰。按 Skill 简介，实际使用时的工作流是：

1、在 Agent 中加载该 Skill，并配置可用的 API Key。
2、用英文描述要生成的小程序界面内容与数量。
3、Skill 按单画布排版坐标生成包含多个 UI 界面的完整设计稿组图，并执行一致性校验。

如果要复现，建议直接到上面的官方页面查看 SKILL.md，以其中给出的参数与调用方式为准。

适用场景与注意¶

适合的人：需要为小程序产出整套多页面设计稿、希望一次出图而非逐页拼图的 UI 设计师与前端；也适合做软件研发出图和高保真端到端交付的团队。

需要注意的点：

1、必须先解决 API Key，否则无法出图。
2、生成结果受限于模型能力与提示词描述精度，一致性校验只能发现明显不一致，不能替代人工走查。
3、单画布排版意味着多界面挤在一张图里，单个界面的展示面积有限，不适合需要看清每个像素细节的场景；细节仍需落到单页稿上。
4、分类在 design-media，说明它偏图像创作侧，不能替代真实的工程化设计稿标注与切图流程。

结尾¶

这个 Skill 的价值在于把「多页面小程序设计稿组图」从拼图工序变成一次排版生成，省掉风格对齐的重复劳动。如果你正被多页面设计稿的拼接和风格漂移困扰，可以从上面的官方地址查看说明，确认 API Key 和调用方式后再接入。

官方地址：https://api.skillhub.cn/showapi/miniapp-single-canvas-ui-group-generator-showapi