能幫你做什麼？
- 根據產品與使用者需求建立視覺方向。
- 檢查字體、布局與畫面層級是否一致。
適合這些情境
- 新網站的首頁與核心介面設計。
- 既有產品需要更明確的視覺辨識。
不適合的情境
- 取代真實使用者研究或無障礙驗收。
開始之前，先準備
- 準備產品用途、目標讀者與主要操作。
- 提供既有畫面或設計限制，以及要修改的專案。
一個具體的任務範例
你提供的輸入
產品說明、首頁內容、品牌色與現有程式碼。
本站範例 · 任務描述，非安裝指令
請使用 frontend-design，替這個讀書社群設計首頁。優先呈現本週讀書活動與參加入口，說明字體、配色和閱讀順序的選擇。
預期輸出（本站範例）
視覺方向說明與對應介面實作，仍需檢查手機版與互動。
限制與權限
安全與權限說明
目前僅供了解用途，暫不提供安裝步驟。
核對目錄內 2 個文字檔；指令要求設計與修改前端，未附可執行腳本。
- 只授予目標專案的讀寫權限，產生的程式需另行檢查。
- 掃描中的 token、webhook 是設計用語，未發現要求讀取憑證或傳送資料的指令。
- 偏向設計判斷，不能保證每位使用者都偏好同一風格。
- 實作介面時可能讀寫專案檔案。
- 網路存取
- 設計說明本身不要求特定外部 API；素材與依賴由實際任務決定。
- 外部費用
- 使用模型服務、評估任務或外部 API 可能產生費用，依所用帳號與服務計費；本站未量測。
- 執行檢查
- 僅核對公開檔案與文件；未安裝、未執行第三方 Skill。
平台相容性
| 平台 | 支援情況 | 參考文件 |
|---|---|---|
| Claude Code | 官方文件明示 | 平台文件 41bbe19d1a1a |
| Codex | 尚未確認 | 尚無資料 |
遵循同一份格式標準，不代表各平台的安裝方式或執行能力相同。
版本與來源
- 作者／發布者
- Anthropic
- 來源 repository
- https://github.com/anthropics/skills
- SKILL.md 路徑
- skills/frontend-design/SKILL.md
- 來源 commit
- 41bbe19d1a1a7eaab5e7bb9050a417e5c6cffc8f
- 授權
- Apache-2.0
- 來源更新時間
- 2026/09/04 00:37（台北）
格式背景閱讀：
Agent Skills 格式規格（外部網站，另開分頁）為什麼選入編輯精選？
適合把模糊的「想更好看」轉成可討論的視覺選擇。