SuperAPI AI 工具集

imagegen-frontend-mobile

设计与创作

查看项目

更新于 10-13 20:08

技能介绍

用途

imagegen-frontend-mobile 是一个用于生成移动应用界面图像的技能,定位为精英级移动产品设计艺术指导。其目标不是生成通用应用样机,而是生成高端、具备原生应用质感、高度可读的移动应用屏幕图像和流程图像。

它适用于以下场景:

  • onboarding 流程
  • 认证流程
  • 首页仪表盘
  • 个人资料页面
  • 设置页面
  • 聊天页面
  • 电商页面
  • 金融科技页面
  • 健康与健身页面
  • 效率工具应用
  • 社交应用
  • 实用工具
  • 多屏应用概念
  • 高端移动端重设计

它不适用于:

  • 网站
  • 落地页
  • 桌面仪表盘
  • 图像转代码
  • 前端实现
  • 代码生成

主要能力

该技能被设定为一套移动端图像生成规范,核心能力包括:

  • 生成应用原生、高级、干净、具有意图感、视觉强烈、可读、可信、流程感知、平台感知、艺术指导明确的屏幕图像。
  • 支持 iOS 原生高级、Android 原生高级、跨平台高级中性三种平台模式。
  • 支持多屏一致性与逻辑流程:默认应生成足以让流程显得真实的多张屏幕图像,并保持同一设计系统。
  • 默认在干净的手机样机中呈现界面,同时保持界面内容为视觉焦点。
  • 支持通过额外细节视图、重新生成干净屏幕等方式补充细节,而不是裁剪旧图。
  • 支持创意图像指导,包括摄影主导的 onboarding、大型编辑式图像块、图像背景标题、产品/生活方式图像、场景或氛围背景、插画驱动入口页等。

技能内置一组基线配置,包括设计变化度、视觉密度、艺术指导强度、平台感知度、流程多样性、图像生成积极性、间距充裕度、清晰度纪律、图像创意度、纹理强度、配色纪律、非通用性、受控复杂度、一致性强度、流程逻辑纪律、样机边框纪律、文字可读性优先级、内容优先于样机平衡、最小字号纪律等参数。这些参数被用作默认值,并可按应用类别调整。

使用方式

根据资料,该技能以图像生成为唯一输出形式:

  • 对于移动应用请求,直接生成屏幕图像或屏幕集。
  • 不用纯文本回答,不只描述应用可能的样子而不生成图像。
  • 如果用户实际需要流程,不将多个屏幕压缩成一个模糊的概念板。
  • 主要交付物为一个或多个移动屏幕图像;需要时可附加细节视图;请求多个屏幕时形成清晰的流程集。
  • 不进入编码模式,不描述代码,不构建 SwiftUI、React Native、Flutter 或 HTML。

在平台模式上,必须先决定:iOS 原生高级、Android 原生高级或跨平台高级中性。不同平台对应不同的布局、导航与组件倾向。不要随意混合 iOS 与 Android 模式,应选择一个主导平台感觉并保持连贯。

在屏幕数量上,资料要求不要偷懒:用户要求 1 屏就生成 1 张屏幕图像,2 屏就生成 2 张,3 屏就生成 3 张,5 屏就生成 5 张,7 屏就生成 7 张。onboarding 流程应生成多张不同的 onboarding 屏幕,而不是一张;认证流程应在有用时分别生成登录、注册、找回状态。若细节不清晰,可生成额外细节图像或干净地重新生成该屏幕。

在图像生成上,当某个屏幕或细节需要专门视图时,不要简单裁剪或放大之前的较大图像。不要从大板中裁出设置视图、从多屏拼贴中裁出过小的 onboarding 文案,也不要依赖会扭曲间距、比例或排版的抠图。应生成全新的独立屏幕图像或细节渲染,并保持相同设计语言、颜色、字体气质和组件家族。

由于该技能涉及多图生成,资料要求锁定一套内部设计圣经,包括平台模式、设备边框风格、设备比例、配色逻辑、字体气质、字号节奏、间距系统、圆角逻辑、图标风格、插画/图像处理、纹理强度、装饰资产语言、导航模型、卡片与列表行为、按钮样式、阴影语言等,确保第 3、4、5 屏不会漂移到另一个应用。

适用场景

该技能适合需要在移动应用设计早期产出高端屏幕概念与流程图的场景,例如:

  • 设计 onboarding 流程,要求多屏且不重复模板。
  • 设计认证流程,需要登录、注册、找回等独立状态。
  • 设计首页仪表盘、个人资料、设置、聊天、电商、金融科技、健康健身、效率工具、社交应用、实用工具等界面。
  • 生成多屏应用概念,要求流程逻辑连贯、像真实产品走查。
  • 进行高端移动端重设计。

资料特别强调首个可见屏幕的干净度,要求其平静、高级、立即可读、视觉聚焦:使用一个主要焦点,保持顶部区域可控,标题简短,不塞满额外统计、标签、胶囊元素,不埋没主 CTA,并在普通手机尺寸下不显得拥挤。若文字后有图像,需通过渐变、遮罩或柔和蒙层保持清晰可读。

同时强调安全区域与系统区域意识,包括状态栏区域、顶部栏或标题区域、底部导航区域、home 指示器区域、sheet 停靠区、手势空间等。不要将重要内容塞入不安全区域,不要忽略上下系统区域,也不要让屏幕像无功能逻辑的边到边海报。

导航方面,要求使用可信的移动模式,如底部标签栏、堆叠导航、sheet、分段控件、应用栏等,并清晰区分主次操作。不要过载底部导航,不要隐藏主路径,不要让所有操作同等重要。

限制

资料明确该技能生成图像,不生成代码:不进入编码模式,不描述代码,不构建 SwiftUI、React Native、Flutter 或 HTML。它不适用于网站、落地页、桌面仪表盘、图像转代码、前端实现和代码生成。

关于收费、价格、平台支持细节、具体效果或使用步骤等事实,资料中暂未提供。