什麼時候適合用？
改版首頁、活動頁與作品集時，想避開套版感的人。
建議從這裡開始
提供品牌色、參考畫面及主要行動，先確定視覺方向，再檢查手機排版。
1. 準備任務資料
提供品牌色、參考畫面及主要行動，先確定視覺方向，再檢查手機排版。 補上讀者、使用情境、既有資料與交付期限；沒有的資料先標示待補。
2. 先完成一個小範圍版本
先用一份範例或一個頁面練習。為一個運動教學網站設計白底首頁，保留清楚的課程入口，說明字體、留白與互動的取捨。 確認方向後再處理完整內容。
3. 檢查後再採用
手機與桌機都能讀清楚文字，主要按鈕容易找到。 需要可編輯前端程式的代理環境；產出仍應實際打開檢查。
一段可以調整的起手指令
請使用 frontend-design 協助以下任務。
任務：為一個運動教學網站設計白底首頁，保留清楚的課程入口，說明字體、留白與互動的取捨。
使用情境：[填寫你的情境]
對象：[填寫讀者或使用者]
可用資料：[貼上已確認資料或檔案名稱]
限制：[填寫格式、時程與不可改動的項目]
請先指出資訊缺口，分清楚已知事實與假設。
先提供一份小範圍成果，再列出檢查方式與需要我補充的資料。
不要捏造數字、來源或已完成的成果。將情境、資料與輸出需求改成自己的任務；這段指令是本站提供的練習範例。
安裝與環境確認
以下文字可交給支援工具操作的 AI 代理。複製不會自動安裝；先核對官方文件、安裝位置與權限，再執行。
請協助評估並安裝 frontend-design。
官方來源：https://github.com/anthropics/skills/tree/main/skills/frontend-design
先讀取官方安裝文件與 SKILL.md，確認目前使用的 AI 代理是否支援。
說明需要的程式、權限、授權與相依服務，優先安裝在目前專案。
若不支援，請停止並說明原因，不要使用來源不明的替代套件。
完成後列出安裝位置，並以不含敏感資料的小任務驗證；未測試的部分請標明。安裝後的小任務驗收
- 手機與桌機都能讀清楚文字，主要按鈕容易找到。
- 用鍵盤可以操作主要功能，焦點位置清楚。
- 字體、配色與留白遵守品牌規範，實際打開檢查沒有溢出。
使用前先確認
需要可編輯前端程式的代理環境；產出仍應實際打開檢查。
請依來源專案說明確認支援的代理、必要工具與授權範圍。不同 Skill 可能採不同授權條款，商業使用或再散布前應閱讀對應文件。