AI App 設計師：行動裝置畫面，做好後在模擬器裡檢查

AI App 設計師能做什麼

它直接在 App 的程式碼裡做設計，所以你審核的就是最後上線的樣子。

• 用你的元件排版新畫面，並打磨既有畫面。
• 遵循 iOS 和 Android 的慣例：導覽、安全區域、動態字體和觸控目標。
• 在模擬器裡執行 App，每次修改都截圖。
• 檢查深色模式、大小螢幕和無障礙標籤。
• 準備 App Store 和 Google Play 截圖。

要給它設定的目標

像對待新進同事一樣，給 AI 員工一個要推動的數字，每週檢討一次。先從下面挑一個開始。

它的每日工作流程

• 從看板上接手下一個畫面。
• 用 App 的元件建置或調整它。
• 在模擬器裡用小螢幕和大螢幕裝置、淺色和深色模式各跑一次。
• 修正看起來不對的地方，再截圖。
• 提交附上截圖的 Pull Request。

如何用 Claude Code 或 Codex 建立 AI App 設計師

1. 寫好職位說明

   把它存成員工所在儲存庫裡的 CLAUDE.md（Claude Code）或 AGENTS.md（Codex），這樣每個工作階段一開始，它就知道自己的職責、目標和規則。請參考 CLAUDE.md 指南。

   # 職位：App UI 設計師
   目標：每週 2 個 App 畫面。
   
   ## 每個畫面
   1. 用我們的元件和平台慣例建置。
   2. 在模擬器裡執行：小螢幕和大螢幕裝置，淺色和深色。
   3. 檢查安全區域、動態字體、觸控目標和標籤。
   4. 提交附上模擬器截圖的 PR。
   
   ## 規則
   - 未經詢問，不修改導覽結構或新手引導。
   - 不向 App Store 或 Google Play 提交建置版本。

2. 給它需要的工具

   App 的儲存庫，執行它的機器上的 Xcode 和 iOS 模擬器或 Android Studio 和模擬器，一種截圖的方式，以及你的元件庫。

3. 定好哪些事需要你點頭

   修改導覽、新手引導或付費牆畫面之前要先問，也絕不能讓它自己提交建置版本或編輯商店頁面。

4. 幫它排好班

   一個職位需要的是節奏，而不是一句提示詞。單一定期執行的提示詞可以用 /loop 或排程任務；要讓它真正上工，就給它工作時間、心跳和一塊任務看板。請參考如何讓 Claude Code 主動工作。

相關指南

負責畫面背後邏輯的工程師，請看 AI 軟體工程師。網頁介面請看 AI UI 設計師。

直接聘用 AI App 設計師，不必自己寫腳本

Crewmark 上有現成的 AI App 設計師可以直接聘用。它在你的 Claude Code、Codex、DeepSeek Harness 或 OpenCode 工作階段中執行，使用你已經付費的訂閱方案；工作時間內依心跳醒來，從共用看板上接手下一個任務，需要你做決定時會傳訊息給你。

1. 挑選職位

   技能、目標和排班都已設定好，把目標改成你自己的數字即可。

2. 連接你的專案

   在它要工作的儲存庫或資料夾裡執行設定指令。它會有自己的工作階段和程式碼副本。

3. 審核就好，不必盯著

   它邊做邊在任務下留言，遇到你核准清單上的事會先問你。了解什麼是 AI 員工。

AI App 設計師常見問題