ardot-mobile-app-multi-screen:一次畫完一整套 iPhone App 屏幕

前言

畫一整套 App 頁面時,常見的做法是打開畫布工具,一屏一屏地起。每屏都得重新設定 iPhone 尺寸、手動對齊狀態欄、再單獨擺一遍底部標籤欄;色彩也會因爲每屏單獨取色而慢慢飄開。等到要改點綴色,就要逐屏回去找。下面介紹的 Skill 就是針對這個重複勞動和風格漂移問題的:它把一整套移動端屏幕作爲一次任務產出,並把尺寸、狀態欄、底部膠囊標籤欄和單一點綴色統一起來。

這是什麼

ardot-mobile-app-multi-screen 是一個面向 Ardot 畫布的 Skill,用來一次產出多個移動端 App 屏幕(首頁、列表、詳情、編輯、微信打通等),用於回答「怎麼一次畫一整套 App 頁面」「多屏風格怎麼統一」這類問題。

它以通用 SKILL.md 格式發佈,由 MedXpert-2655 發佈在 SkillHub,座標爲 @medxpert/ardot-mobile-app-multi-screen,版本 1.0.0,來源 enterprise,分類 design-media,標籤 requires_api_key=true。SkillHub 頁面顯示評分 100000,下載 286 次。

核心功能

根據官方頁面介紹,它統一了一套移動端屏幕的視覺基線:

  • iPhone 尺寸:各屏畫布尺寸統一
  • 狀態欄:各屏頂部狀態欄一致
  • 底部膠囊標籤欄:各屏底部導航使用同一種膠囊樣式
  • 單一點綴色:整套頁面只用一個點綴色,避免逐屏取色導致風格漂移

屏幕類型覆蓋首頁、列表、詳情、編輯,以及第三方打通(如微信打通)。需要說明的是,官方簡介沒有列出它支持的具體屏幕數量上限,也沒有給出第三方打通的接口清單。

安裝與啓用

官方頁面提供 SkillHub 地址:

https://www.skillhub.cn/skills/medxpert/ardot-mobile-app-multi-screen

源碼與說明統一指向該頁面。已抓取的資料中沒有給出命令行安裝命令、目錄路徑或配置文件字段,因此這裏不補寫推測內容。可以確認的是,它按通用 SKILL.md 格式組織,標籤 requires_api_key=true,說明運行需要 API key。

典型用法

官方簡介給出的用法是:把「一次產出一整套移動端 App 屏幕」作爲一次任務交給 Skill,讓它按統一尺寸和統一樣式在 Ardot 畫布上生成多屏,而不是逐屏手動擺。例如同時產出首頁、列表、詳情、編輯四屏,並讓底部膠囊標籤欄在各屏保持一致。

資料裏沒有提供可復現的完整調用示例或參數說明,所以這裏只描述到這一層。

適用場景與注意

適合這類需求:需要一套風格統一的移動端 App 頁面做原型或展示,且希望尺寸、狀態欄、底部標籤欄和點綴色一次對齊。

需要注意的限制:

  1. 它是 Ardot 畫布上的 Skill,用途限定在畫布產出頁面,不涉及後端接口聯調
  2. 官方簡介提到的第三方打通只有「微信打通」一個例子,未說明支持哪些平臺
  3. 需要 API key(標籤 requires_api_key=true)
  4. 已抓取的頁面沒有給出版本歷史和更新時間,資料裏只有版本 1.0.0

結尾

這個 Skill 的價值在於把「一整套 App 頁面」從多屏手動操作收斂成一次產出,並順手解決了多屏風格統一這個更常見的坑。如果你的場景是 iPhone 尺寸的移動端 App 頁面、且需要在多屏之間保持同一套狀態欄、底部標籤欄和點綴色,可以先從官方頁面看它的實際產出再決定是否採用。

官方地址:https://api.skillhub.cn/user_8a3569c1/ardot-mobile-app-multi-screen

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜