小程序单设计UI组图生成-万维易源

概述

小程序单设计UI组图生成

任务目标

• 在单一图像内直接生成包含多个UI界面的完整小程序设计稿组图，规避多图拼接与风格不一致痛点
• 具备意图深度解析、页面结构与组件树规划、全局样式锁定、单画布精准提示词构建、组图渲染、一致性逻辑校验能力
• 触发场景：小程序UI原型设计、多页面设计稿生成、软件研发出图、图片创作、高保真设计端到端交付

能力组成

能力流程描述

技能以用户的小程序UI组图自然语言需求为起点，端到端串联 7 个能力阶段：

1. 意图深度解析（step_1_intent_analyzer）：解析用户的原始需求（raw_requirement），提炼结构化意图、扩展需求与成功标准（success_criteria）；
2. 页面结构与组件树规划（step_2_structure_planner）：基于结构化意图，规划各页面的页面ID、页面名称、核心组件与布局类型，输出页面结构清单（page_structure_list）；
3. 全局样式与排版坐标定义（step_3_style_layout_definer）：结合品牌视觉偏好（brand_style_preference）与排版偏好（layout_preference），定义全局设计令牌（global_design_tokens）与单画布排版坐标参数（canvas_layout_parameters）；
4. 单画布精准提示词构建（step_4_prompt_builder）：融合全局设计令牌、页面结构清单、画布布局参数与成功标准，构建高保真英文渲染提示词；
5. 单画布组图渲染生成（step_5_generate_image）：按指定宽高比（aspect_ratio），在单一图像内直接渲染出包含多个UI界面的组图；
6. 轮询组图生成状态（step_6_poll_image_status）：以 5 秒为间隔轮询渲染任务状态，最长等待 600 秒，直至任务成功（SUCCEEDED）并取得最终组图URL（final_image_url）；
7. UI组图一致性逻辑校验（step_7_consistency_evaluator）：对生成的组图执行风格一致性、排版一致性、规范符合度校验，输出各维度评分、评估报告（evaluation_report）与改进建议（refinement_suggestions）。

数据流转方式：各阶段通过上下文变量自动传递——step_1 的结构化意图与成功标准分别流转至 step_2/step_3/step_4/step_7；step_3 的全局设计令牌与画布布局参数流转至 step_4；step_4 的英文提示词流转至 step_5 与 step_7；step_6 轮询获得的组图URL流转至最终输出与 step_7。人机协作节点集中在输入环节（需求描述、排版偏好、品牌风格、宽高比），其余环节全自动执行。

技能能力组成流程图

flowchart TD
    A["用户输入: raw_requirement(必填) / layout_preference / brand_style_preference / aspect_ratio"] --> B["step_1 意图深度解析"]
    B --> C["step_2 页面结构与组件树规划"]
    B --> D["step_3 全局样式与排版坐标定义"]
    B --> E["step_4 单画布精准提示词构建"]
    C --> E
    D --> E
    E --> F["step_5 单画布组图渲染生成"]
    F --> G["step_6 轮询组图生成状态(间隔5s, 超时600s)"]
    G --> H["step_7 UI组图一致性逻辑校验"]
    H --> I["输出: final_image_url / page_structure_list / consistency_score / evaluation_report / refinement_suggestions"]

前置准备

• 凭证：配置 ShowAPI AppKey，凭证名称：showapi_appkey
• 鉴权配置：

本 Skill 调用需要 AppKey 鉴权。所有 API 请求的 URL 查询参数中需携带 appKey={你的AppKey}。

如何获取 AppKey

如果你还没有 AppKey，请按以下步骤通过手机验证获取：

1. 请用户提供手机号（中国大陆手机号）
2. 调用发送验证码接口：

“` POST https://www.showapi.com/auth/agent_sendCode Content-Type: application/x-www-form-urlencoded

phone={手机号} “ 成功响应：{"flag":true,"remark":"发送成功"}`

1. 请用户查看手机收到的6位验证码并告诉你
2. 调用验证接口获取 AppKey：

“` POST https://www.showapi.com/auth/agent_verify Content-Type: application/x-www-form-urlencoded

phone={手机号}&code={验证码} “ 成功响应：{"flag":true,"app_key":"你的AppKey"}`

1. 将获取到的 app_key 保存，后续所有 API 调用 URL 中携带 appKey={app_key} 参数

注意事项

• 验证码5分钟有效，每分钟只能发送1次
• 如果手机号已注册过易源数据平台账户，会直接返回该账户的 AppKey，不会重复注册
• AppKey 获取后请妥善保存，避免重复验证
• 模拟体验：无 appKey 时，系统自动触发模拟调用，直接返回完整结果，快速预览生成效果
• 计费：单次调用预估 0.25 元（含模型推理价格）
• 依赖：仅使用 Python 标准库，无需安装第三方包

入参说明

操作步骤

模拟体验流程（无 appKey）

1. 自动触发模拟调用

系统检测到未配置 appKey 时，自动向 https://www.showapi.com/_nuxt3/api/2405-105 发送 POST 请求（body: {"flow_id":"6a3cd3673c51f2c209017efb"}），直接获取完整模拟生成结果。此过程为一次性返回，不执行 execute_task.py 和 query_task.py。

1. 可视化预览

将返回的 JSON 结果以 HTML 形式可视化展示，重点呈现单画布多界面小程序UI组图图片内容。

1. 引导真实调用

提示用户当前为无 appKey 的模拟运行结果。如需真实调用，请通过手机验证获取 AppKey（步骤见「前置准备-鉴权配置」），并在后续所有 API 调用 URL 中携带 appKey={app_key} 参数。

标准流程（有 appKey，强制异步执行）

1. 收集用户需求

梳理用户的小程序业务类型、所需界面列表，确认排版偏好、品牌视觉风格与组图宽高比（均为选填，系统提供智能默认值）。

1. 异步提交生成任务

调用脚本异步执行单画布UI组图生成任务，仅返回唯一 task_id，不阻塞等待。调用示例：

   python scripts/execute_task.py --requirement "一个厨艺和美食分享微信小程序" --layout-preference "3列网格排列" --brand-style "主色#1890ff，现代简约风格" --aspect-ratio 4:3 --async

1. 轮询查询任务结果（必选）

使用 task_id 循环查询任务状态，每一轮轮询后，即时将当前返回的核心资料同步反馈给用户（如页面结构清单、组图URL、一致性评分等），直至获取完整结果。调用示例：

   python scripts/query_task.py --task-id "返回的task_id值"

1. 等待结果完成

必须轮询直到完成。

1. 结果解析与落地应用

提取 final_image_url（组图URL）用于设计稿预览与交付；结合 page_structure_list（页面结构清单）核对界面完整性；依据 consistency_score（一致性评分）与 evaluation_report（评估报告）判断是否可用；若存在风险则参考 refinement_suggestions（改进建议）迭代优化。

1. 生成html页面

生成一个简单的html页面来融合返回的主要信息，特别是单画布UI组图图片。

使用示例

示例1：厨艺美食分享小程序UI组图

• 输入：一个厨艺和美食分享微信小程序（如首页、菜谱详情、个人中心等界面）
• 流程：异步提交任务 → 获取task_id → 轮询查询（每轮反馈进度/数据）
• 产出：单画布多界面设计稿组图 + 页面结构清单 + 一致性各维度评分 + 评估报告
• 配置要点：layout_preference=3列网格排列，aspect_ratio=4:3，brand_style_preference 可指定暖色系美食风格

示例2：电商小程序多页面设计稿

• 输入：电商小程序，需首页、商品列表、商品详情、购物车、订单确认等界面一次性成稿
• 流程：异步提交任务 → 获取task_id → 轮询查询（每轮反馈进度/数据）
• 产出：风格绝对一致的多界面单画布组图，附规范符合度校验与风险识别
• 配置要点：brand_style_preference 指定品牌主色调（如"主色#ff5000，活力电商风格"），aspect_ratio 可选 16:9 横向铺开展示

示例3：工具类小程序UI组图

• 输入：记账/待办等工具类小程序，需要列表页、详情页、统计页等界面
• 流程：异步提交任务 → 获取task_id → 轮询查询（每轮反馈进度/数据）
• 产出：适配小程序尺寸规范的UI组图 + 改进建议清单
• 配置要点：layout_preference 可指定横向排列，若不指定则自动采用等距网格布局

生成效果示例

描述

技能实际运行后，输出以「单画布多界面小程序UI组图」为核心的完整交付物：

• final_image_url：一张图内并列呈现小程序多个UI界面的设计稿组图URL，所有界面共享同一套全局设计令牌（主色、圆角、间距、组件样式），排版规整、风格绝对一致，无拼接痕迹；
• page_structure_list：页面结构清单，逐页列出 page_id、page_name、core_components（核心组件）、layout_type（布局类型），便于研发对照还原；
• consistency_score：一致性各维度评分（风格一致性 style_consistency、排版一致性 layout_consistency、规范符合度 specification_compliance、整体就绪度 overall_readiness），量化交付质量；
• evaluation_report：一致性逻辑校验评估报告，包含 strengths（优势项）、risks（风险项）、fallback_strategy（兜底降级策略）；
• refinement_suggestions：若校验发现风险，给出针对性改进建议。

可视化呈现方式：可将组图图片直接嵌入 HTML 页面预览，并将页面结构清单、评分与建议以表格/卡片形式融合展示。

输出案例

说明：若输出结果包含图片，优先插入对应图片资源，之后再输出 JSON / Markdown 格式的文本内容。

单画布多界面小程序UI组图示例：

接口返回 JSON 示例：

{
  "showapi_res_body": {
    "page_structure_list": [
      {
        "page_id": "page_01",
        "page_name": "首页-菜谱推荐",
        "core_components": ["顶部搜索栏", "分类标签栏", "菜谱卡片瀑布流", "底部导航栏"],
        "layout_type": "瀑布流网格"
      },
      {
        "page_id": "page_02",
        "page_name": "菜谱详情页",
        "core_components": ["封面大图", "食材清单列表", "步骤图文时间轴", "收藏/分享操作栏"],
        "layout_type": "纵向滚动"
      },
      {
        "page_id": "page_03",
        "page_name": "个人中心",
        "core_components": ["用户信息卡片", "我的作品网格", "设置列表", "底部导航栏"],
        "layout_type": "分区列表"
      }
    ],
    "final_image_url": "https://oss.showapi.com/workflow/result/single_canvas_ui_group.png",
    "evaluation_report": {
      "strengths": ["三页面主色与圆角规范完全一致", "组件间距遵循统一8pt栅格", "底部导航栏样式跨页面统一"],
      "risks": ["详情页步骤时间轴文字密度较高，小字号下可读性需关注"],
      "fallback_strategy": "如单画布渲染异常，可降级为分页生成后按统一模板拼版"
    },
    "refinement_suggestions": [
      "建议将详情页步骤文字行高由1.4提升至1.6，增强可读性",
      "个人中心『我的作品』网格可增加空状态占位设计"
    ],
    "consistency_score": {
      "style_consistency": 0.96,
      "layout_consistency": 0.94,
      "specification_compliance": 0.97,
      "overall_readiness": 0.95
    }
  },
  "showapi_res_code": 0,
  "showapi_fee_num": 1
}

资源索引

• [scripts/execute_task.py](scripts/execute_task.py)：异步提交小程序单设计UI组图生成任务（真实调用时使用）
• [scripts/query_task.py](scripts/query_task.py)：轮询查询异步任务结果（真实调用时使用）

响应数据结构

1. 异步任务提交响应

{
  "showapi_res_body": {
    "task_id": "唯一任务ID",
    "status": "pending",
    "msg": "任务已提交，正在异步处理中"
  },
  "showapi_res_code": 0,
  "showapi_fee_num": 1
}

2. 任务查询响应（单轮轮询返回数据，需实时同步给用户）

{
  "showapi_res_body": {
    "page_structure_list": [
      {
        "page_id": "页面ID",
        "page_name": "页面名称",
        "core_components": ["核心组件列表"],
        "layout_type": "布局类型"
      }
    ],
    "final_image_url": "最终生成的单画布多界面小程序UI组图URL",
    "evaluation_report": {
      "strengths": ["校验识别的优势项"],
      "risks": ["校验识别的风险项"],
      "fallback_strategy": "兜底降级策略"
    },
    "refinement_suggestions": ["校验发现的改进建议或兜底策略"],
    "consistency_score": {
      "style_consistency": 0.95,
      "layout_consistency": 0.93,
      "specification_compliance": 0.96,
      "overall_readiness": 0.94
    }
  },
  "showapi_res_code": 0,
  "showapi_fee_num": 1
}

出参说明

异常说明

注意事项

1. raw_requirement 为必填项，需清晰描述小程序业务类型与所需界面列表。
2. 所有任务强制异步执行，不支持同步模式。
3. 轮询查询过程中，每次获取接口返回数据后，立即将主要内容反馈给用户。
4. 一致性评分、评估报告仅作参考，建议结合 refinement_suggestions 迭代优化后再次生成。
5. 单次调用预估费用 0.25 元（含模型推理价格）。
6. 模拟运行说明：无 appKey 时系统自动触发模拟调用，一次性返回完整 JSON 结果，不经过 execute_task.py 和 query_task.py，结果仅作效果预览，非真实生成内容。如需真实调用，请通过手机验证获取 AppKey 并配置。