frontend-design

frontend-design

改編自 Anthropic 官方為 Open Design 所打造的 frontend-design Skill。

當使用者要求建置或改善前端介面時，請使用此 Skill：包含網站、Landing Page、儀表板、應用程式畫面、HTML/CSS 構件、React/Vue/Svelte 元件，或對既有 UI 進行視覺重構。

我們的目標不只是「讓它好看一點」，而是要交付具備明確設計觀點、精湛工藝，且飽含產品細節的可執行前端程式碼，讓成果貼合使用者的實際應用情境。

工作流程（Workflow）

1. 在決定視覺風格之前，先充分理解需求（Brief）。

   • 明確目標受眾、核心任務、領域背景與情感基調。
   • 梳理技術限制：前端框架、既有樣式、無障礙規範（Accessibility）、效能要求、匯出目標或響應式（Responsive）需求。
   • 若專案庫中已包含 Design Tokens、元件、畫面截圖或 DESIGN.md，請將其視為唯一真理來源（Single Source of Truth）。

2. 堅定選擇一種特定的美學方向。

   • 選定契合產品特性的風格方向：極簡主義（Brutally Minimal）、社論雜誌風（Editorial）、奢華質感（Luxury）、活潑趣味（Playful）、硬派工業風（Industrial）、復古未來感（Retro-futuristic）、高密度作業型（Dense operational）、沉穩企業級（Calm enterprise）、藝術感消費級（Artful consumer）或其他明確的設計語彙。
   • 透過字型排版、間距、色彩、視覺階層、動態效果（Motion）與元件形狀，將設計方向具象化。
   • 避免通俗的 AI 預設罐頭風格：紫藍漸層、模糊玻璃卡片、千篇一律的 SaaS 版面、過度圓角化的卡片、罐頭圖示列，以及對介面無益的裝飾性套版圖案。

3. 設計真實可用的介面，而非僅止於展示的樣板海報。

   • 補齊真實使用者期待的各類控制項、空白（Empty）/載入中（Loading）/錯誤（Error）狀態、表格、篩選器、導覽列與響應式行為。
   • 使用真實文案與數據。若資料未知，請明確標註為範例（sample）、處理中（pending）或暫無資料（unavailable），切勿虛構誇大。
   • 保持目標使用者的操作效率。儀表板與工具類介面應具備良好的視覺可讀性（Scannable）與適當的資訊密度，以利高頻使用；行銷頁面則可更富表現力。

4. 開發符合生產級標準（Production-Grade）的前端程式碼。

   • 優先採用專案庫既有的框架、元件規範、圖示庫、Tokens 和樣式寫法。
   • 對於獨立存在的 Code Artifacts，除非使用者指定特定框架，否則請優先建立自包含（Self-contained）的 HTML/CSS/JS。
   • 遵循語意化標籤（Semantic markup）、支援鍵盤操作的控制項、清晰的焦點狀態（Focus states）、合理的對比度以及健全的響應式佈局限制。
   • 重複使用的色彩、間距、陰影和字階（Type scale）一律抽離為 CSS 變數（Variables）。

5. 琢磨視覺工藝（Visual Craft）。

   • 字型排版（Typography）：選用具表現力且易讀的字型搭配（Type pairings）。除非設計方向本就刻意走實用主義，否則避免直接拿系統預設字集作為核心視覺概念。
   • 色彩（Color）：建立角色分明且平衡的配色方案。強調色（Accent color）的使用應精準克制。
   • 版面佈局（Layout）：有意識地運用對齊、韻律、資訊密度與留白（Negative space）。切勿讓卡片、面板或標籤產生視覺上的位移散亂。
   • 動態效果（Motion）：為狀態切換、元素揭示與使用者回饋添加具備明確目的的過渡動畫。效能考量上，優先選用 transform 與 opacity。
   • 細節雕琢（Details）：僅在有助於強化設計概念時，才使用材質紋理、邊框、陰影、分隔線、媒體與圖示。

6. 最終交付前進行自我審查（Self-Review）。

   • 介面在行動端與桌面端寬度下均能正常運作。
   • 文字契合容器大小，不會重疊或遮擋相鄰 UI。
   • 互動元素皆包含 Hover / Focus / Active / Disabled 等完整狀態。
   • 設計成功避開了明顯的 AI 罐頭視覺套路。
   • 成果具備一項令人印象深刻的亮點，讓使用者關閉頁面後仍能清晰描述。

Open Design 整合（Open Design Integration）

當 Open Design 提供有效的設計系統（Design System）時，請將其視為產品的品牌契約（Brand Contract）。優先套用注入的色彩、字型排版、佈局與元件指引；僅在設計系統未涵蓋的細節處，補充套用本 Skill 的前端工藝規則。

當 Open Design 注入如 typography、color 及 anti-ai-slop 等工藝參考標準時，請在完成前執行這些檢查。若使用者的品牌指引與通用工藝規則相抵觸，一律以使用者的品牌指引為準。

來源（Source）

• 上游：https://github.com/anthropics/skills/tree/main/skills/frontend-design
• 分類：web-artifacts

授權（License）

本 Skill 改編自 Anthropic 官方技能庫（Skills Repository）。上游 Apache-2.0 授權條款請參閱本資料夾中的 LICENSE.txt。