前言¶

移動端產品稿若只靠通用生圖提示詞，常見結果是「像網頁塞進手機框」：安全區混亂、導航邏輯弱、多屏之間設計系統漂移，或堆滿漸變與玻璃擬態卻缺乏可讀層級。若你的目標是讓 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