技能介绍

问题：移动界面的 AI 生图为什么总像套模板

把同一个提示词丢给通用生图模型，十次里有八次得到的是同一张「假 fintech 仪表盘」：随机堆砌的柱状图、飘在半空的卡片、圆角药丸标签满天飞，安全区完全不考虑，导航逻辑似有若无，满屏紫蓝渐变加无意义的毛玻璃。更糟的是多屏生成时，设计系统会漂移——第一屏还很精致，第二屏就退化成「手机尺寸的网页」，设备框比内容还抢眼，边距忽大忽小，文字小到不可读。

这类输出的本质问题不是画工，而是缺少移动端的领域约束：没人检查状态栏与 Home Indicator 的安全区，没人关心 Tab Bar 的层级归属，信息密度全凭运气。

技能如何工作

AI生图前端-移动端 把工作重心放在明确的方向定义上：它扮演的不是通用画师，而是移动端产品美术总监，只生成 App 原生的高质感屏幕图与流程图。

核心工作方式：

场景白名单：onboarding、auth、首页 dashboard、profile、settings、聊天、电商、fintech、健康健美、效率工具、社交、工具类 App、多屏概念图、移动端重设计。每一类都有对应的视觉惯例，而不是一套通用模板到处贴。
默认值对抗清单：SKILL.md 里明确列出了要打破的典型翻车模式——渐变泛滥的 Dribbble 克隆、无目的的 glassmorphism、首屏塞太多内容、克隆式 onboarding、空而无物的大色块背景、默认紫蓝色调。方向指令要求输出必须app-native、premium、readable、flow-aware、platform-aware。
一致性控制：多屏生成时强制统一的配色体系（clean, controlled color palette）与设备样式，避免屏幕集退化成多个设计系统拼凑的混合物。
纯生图，不写码：明确禁止切入代码模式——不生成 SwiftUI、React Native、Flutter 或 HTML，不描述代码实现，只交付移动端屏幕图与流程图。

适用边界与注意点

适用：移动端 UI 概念图、设计探索、多屏流程演示、设计评审素材、移动端重设计方案的视觉化。
不适用：网站与落地页、桌面端 dashboard、截图转代码（image-to-code）、前端实现与代码生成。这些场景请换专门的技能。
仍需人工把关的地方：生图结果是方向性的视觉提案，不能替代真实的设计规范（Design System）与设计走查。安全区、字号可读性、交互状态（空态/加载/错误）这些细节，最终仍需设计师在真实设备与设计工具里验证。
一次说清边界，避免误用：这个技能交付的是「像真的 App 截图」的图像，而不是可用的产品界面。把它当概念稿工具用，比当交付工具用，价值大得多。