前言¶

移动端产品稿若只靠通用生图提示词，常见结果是「像网页塞进手机框」：安全区混乱、导航逻辑弱、多屏之间设计系统漂移，或堆满渐变与玻璃拟态却缺乏可读层级。若你的目标是让 AI Agent 稳定产出仅图片、不写代码的 App 原生感界面与流程概念图，需要把场景边界、质量标准和反模式写进 Skill，而不是每次从零拼 prompt。

下面介绍 SkillHub 社区技能 AI生图前端-移动端（坐标 @user_3c6cb52e/imagegen-frontend-mobile-lr-rmhz，版本 1.0.0）：它基于通用 SKILL.md 格式，把「高级移动端界面图像方向」固化成 Agent 可执行的指令集。

这是什么¶

AI生图前端-移动端 是面向 AI Agent 的移动端生图专用技能。官方简介为：帮助 AI Agent 高效完成相关任务。

• 维护与来源：SkillHub 社区发布（source: community），发布者 user_3c6cb52e；Skill 元数据中的 homepage / repository 指向 https://github.com/1991513ccie-png。
• 分类：SkillHub 页面归类为 dev-programming；Skill 包内 frontmatter 另标注 category: 设计与UI/UX。
• 许可：MIT。
• 标签：requires_api_key=false（按 SkillHub 元数据，不强制额外 API Key 配置）。

它解决的是：在 Agent 对话中，用统一的设计总监式指令，生成高级、App 原生、可读、多屏一致的移动端界面与流程图像，并明确排除网站、落地页、桌面仪表盘以及「图转代码 / 前端实现」类任务。

核心功能¶

以下内容来自已安装技能包中的 SKILL.md（包内正文在发布时被截断，以下仅写可核对部分）。

角色与输出边界¶

Skill 将 Agent 定位为「精英移动产品设计艺术总监」。核心要求是：

• 只做图像：This skill generates images only；不转向前端实现或代码生成。
• 不做：网站、落地页、桌面仪表盘、image-to-code、前端实现、代码生成。

适用界面与流程类型¶

Skill 列举的典型场景包括：

• onboarding flows（引导流程）
• auth flows（认证流程）
• home dashboards（首页仪表盘）
• profile / settings screens
• chat、ecommerce、fintech、health and fitness、productivity、social、utilities
• multi-screen app concepts、premium mobile redesigns

质量目标与反模式¶

输出需具备 app-native、premium、clean、readable、flow-aware、platform-aware、多图设计系统一致等特征。

Skill 同时列出需主动打破的「标准 AI 移动端输出」问题，例如：假金融科技仪表盘、单屏精美其余屏敷衍、过多浮动卡片与标签、无安全区意识、弱导航、手机框里的网页感、无目的玻璃拟态、字号过小、首屏信息过载、各屏设计系统漂移、样机框喧宾夺主等。

声明支持的 Agent 框架¶

Skill frontmatter 中 framework 字段包含：Claude Code、Codex、Hermes Agent、OpenClaw、QClaw、WorkBuddy。是否在 Cursor 等其它客户端可用，取决于该客户端是否加载对应 skills 目录下的 SKILL.md；SkillHub 安装文档对 Cursor 给出了目录约定（见下一节）。

安装与启用¶

1、安装 SkillHub CLI（若尚未安装）¶

按 SkillHub 安装说明 检查 CLI：

command -v skillhub && skillhub --version

未安装时可执行完整安装（文档推荐）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

2、安装本技能到当前 Agent 的 skills 目录¶

安装时必须使用 --dir 指向当前 Agent 实际读取的 skills 目录，否则默认落到 ./skills/ 可能不会被识别。

skillhub install imagegen-frontend-mobile-lr-rmhz --namespace user_3c6cb52e --dir <skills 目录>

SkillHub 文档中的常用路径示例：

• Claude Code：~/.claude/skills/
• Cursor：~/.cursor/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

也可将下面提示词发给 AI，让其按官方安装文档操作（SkillHub 技能页提供的标准表述）：

请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_3c6cb52e/imagegen-frontend-mobile-lr-rmhz`。

3、启用方式¶

本技能为 Markdown 指令型 Skill：安装后 Agent 在相关任务中读取 SKILL.md 并按其中「CORE DIRECTIVE」执行。无需在资料中单独配置 API Key（requires_api_key=false）。

典型用法¶

官方页面未提供独立 CLI 子命令；可复现的用法是「安装 + 在对话中提出移动端概念图需求」，由 Agent 套用 Skill 中的场景列表与质量标准。

示例对话意图（需与 Skill 边界一致）：

1. 说明平台与产品类型（如 iOS 社交 App、Android 电商）。
2. 指定要生成的屏类型或流程（如 onboarding 三屏、登录注册、首页与个人中心）。
3. 强调仅要概念图/流程图、不要代码（与 Skill 中 images only 一致）。
4. 若需要多屏，在需求中写明「同一设计系统、样机与边距一致」，对齐 Skill 对跨图一致性的要求。

搜索与确认坐标时，可使用：

skillhub search imagegen-frontend-mobile

在结果中应看到 @user_3c6cb52e/imagegen-frontend-mobile-lr-rmhz 及对应的 install 命名空间参数。

适用场景与注意¶

适合谁

• 产品、设计或前端同行，需要快速产出移动端多屏概念图或流程图，并由 Agent 统一把控 App 原生感与反 AI 味清单。
• 已在使用 SkillHub CLI，希望在团队内用固定坐标分发同一套生图指令。

限制与注意

• Skill 包内 SKILL.md 在发布端显示为截断版本，完整细则以你本地安装包为准；若与预期不符，应在 SkillHub 检查是否有新版本（当前为 1.0.0）。
• 本技能不承担前端实现；若任务包含「根据图写 React Native / Flutter 页面」，应换用开发类 Skill 或拆分任务。
• SkillHub 统计（以抓取资料为准）：评分 100000，下载 2126，安装 0——安装数为平台统计字段，实际使用仍以本地 --dir 安装为准。
• 社区来源技能，使用前请自行评估指令内容与 homepage 仓库是否符合团队规范。

结尾¶

AI生图前端-移动端 把移动端概念图生图从「临时 prompt」收敛为可安装的 Agent Skill：划定只做图像、不做代码的边界，并内置场景清单与反模式清单，适合 onboarding、认证、首页、电商/金融等典型 App 屏与多屏流程。

• SkillHub 页面：https://www.skillhub.cn/skills/user_3c6cb52e/imagegen-frontend-mobile-lr-rmhz
• 官方 API 坐标入口：https://api.skillhub.cn/user_3c6cb52e/imagegen-frontend-mobile-lr-rmhz