Skill 多語言閱讀指南
frontend-design用途、用法與原始來源
創建具有獨特性、生產級且設計品質高的前端介面。當使用者要求建立 Web 元件、頁面、作品、海報或應用程式（例如網站、落地頁、儀表板、React 元件等），請運用此技能。HTML/CSS佈局，或者當styling/beautifying適用於任何網頁使用者介面）。生成富有創意、精良的程式碼和使用者介面設計，避免千篇一律的AI美學。
原文擷取時間:
- SKILL.md
.agents/skills/frontend-design/SKILL.md- 儲存庫 Star
- 5,871
- 儲存庫最近更新
- 2026-08-29
- 能力分類
- 設計
- 最近採集時間
授權：MIT
流程片段用來協助閱讀上游說明。本頁沒有執行第三方 Skill，不屬於實測評測。
下面的用途與操作片段來自上游文件，由本站整理並翻譯，和另行標示的 Codez 編輯分析分開呈現。
這個 Skill 能做什麼
創建具有獨特性、生產級且設計品質高的前端介面。當使用者要求建立 Web 元件、頁面、作品、海報或應用程式（例如網站、落地頁、儀表板、React 元件等），請運用此技能。HTML/CSS佈局，或者當styling/beautifying適用於任何網頁使用者介面）。生成富有創意、精良的程式碼和使用者介面設計，避免千篇一律的AI美學。
如何使用：上游操作流程
概述
這項技能指導創造獨具特色、達到生產等級的介面，避免千篇一律的「AI垃圾」美學。編寫實際可用的程式碼，並格外注重美學細節和創意選擇。使用者提供前端需求：需要建置的元件、頁面、應用程式或介面。需求可能包含有關用途、受眾或技術限制的背景資訊。
原文片段 · L6 ↗前端美學指南
字體：選擇美觀、獨特且引人注目的字體。避免使用 Arial 和 Inter 等通用字體；相反，選擇能夠提升前端美感的獨特字體；選擇出乎意料、個性鮮明的字體。將醒目的標題字體與精緻的正文字體搭配使用。顏色與主題：堅持統一的美學風格。使用 CSS 變數來保持一致性。醒目的主色調搭配鮮明的強調色比平淡均勻的配色方案效果更佳。
原文片段 · L26 ↗環境與相依需求
本次未從該檔案選出獨立的環境需求片段，不代表無須相依套件。請繼續核對儲存庫的安裝說明和引用檔案。
限制與結果檢查
本次未從該檔案選出獨立的限制片段，不代表適用於所有輸入或環境。請閱讀完整原文，並自行驗證實際結果。
開始使用前
- 先核對支援的 Agent 宿主和儲存庫安裝說明。保留完整 Skill 目錄及其引用的腳本、資源和文件，只複製 SKILL.md 可能遺漏相依需求。
- 向 Agent 提供實際輸入、預期輸出和驗收標準。呼叫方式與可用工具取決於宿主環境，本站不假定存在通用的安裝指令。
- 先在暫存專案或輸入副本上試用。涉及修改檔案、遠端服務或計費資源的操作，應逐項核對後再授權。
- 依照原文檢查項目和自己的需求驗證輸出。成功觸發或儲存庫 Star 較高，都不能證明結果正確。
繼續閱讀原始文件
相關 Skill
翻譯與介紹範圍
本頁從固定版本的上游 SKILL.md 整理用途與操作片段，譯文使用輔助翻譯。它不是完整手冊，也不代表經過相容性實測；使用前請核對原文及其引用檔案。
介紹依據下方列出的固定版本；目前儲存庫動態和目錄擷取時間分開呈現。
- 固定版本來源
- 閱讀原文 ↗
- 原文擷取時間
- 來源提交版本
cf865e94de7729751c747171785b6ce57e7b178c- 原文 SHA-256
1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873