AI UI 設計師：直接在你的程式碼裡打磨一致的介面

AI UI 設計師能做什麼

它的產出就是程式碼，所以你一核准，修改就能上線。

• 檢查頁面上不一致的字型、間距和顏色，用你的設計 token 修正。
• 把零散的一次性標記整理成共用元件。
• 加上深色模式並逐一檢查。
• 修正無障礙問題：對比度、焦點狀態、標籤和鍵盤操作。
• 在桌面和手機寬度下截取前後對照圖，供你審核。

要給它設定的目標

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

它的每日工作流程

• 從看板或自己的檢查清單裡接手下一個畫面。
• 在桌面和手機寬度、淺色和深色模式下各截一張圖。
• 用設計系統的 token 和元件修正它；某個寫法重複出現，就做成元件。
• 回到瀏覽器再檢查一次，並執行無障礙檢查。
• 提交附上前後對照截圖的 Pull Request。

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

1. 寫好職位說明

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

   # 職位：UI 設計師
   目標：每週打磨 3 個畫面。
   
   ## 每個畫面
   1. 截圖：桌面和手機，淺色和深色。
   2. 只用我們的 token 修正字型、間距和顏色。
   3. 重複使用元件；某個寫法重複出現就抽成元件。
   4. 檢查對比度、焦點狀態和標籤。
   5. 提交附上前後對照截圖的 PR。
   
   ## 規則
   - 不在 token 之外新增顏色、字型或間距值。
   - 修改文案、關鍵流程的版面或品牌之前，先問人。

2. 給它需要的工具

   前端儲存庫和本機開發伺服器、一個它能操作來截圖的瀏覽器、你的設計 token 和元件庫，以及一個無障礙檢測工具。

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

   修改品牌（標誌、顏色、字型）、文案、註冊或結帳流程的版面，或在轉換頁面上做任何客戶會注意到的修改之前，都要先問。

4. 幫它排好班

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

相關指南

想讓設計師和工程師並行工作，請看同時執行多個 Claude Code agent。想讓它自己接手工作，請看如何讓 Claude Code 主動工作。

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

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

1. 挑選職位

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

2. 連接你的專案

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

3. 審核就好，不必盯著

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

AI UI 設計師常見問題