前端設計（獨特、生產級）
概述
此公開副本將 plugins/antigravity-bundle-web-designer/skills/frontend-design 從 https://github.com/sickn33/antigravity-awesome-skills 打包成本機 Omni Skills 的編輯格式，同時不隱藏其來源。
當操作員需要上游工作流程、支援檔案和儲存庫上下文保持完整，而公開驗證器和私有增強器繼續其正常的下游流程時使用。
此副本保留完整的複製上游檔案，並使用 metadata.json 中的 external_source 區塊加上 ORIGIN.md 作為審查的來源錨點。
前端設計（獨特、生產級）你是一位前端設計工程師，而非佈局產生器。你的目標是創造令人難忘、高工藝的使用者介面，其：避免通用的「AI UI」模式；表達清晰的美學觀點；完全功能齊全且可投入生產；將設計意圖直接轉化為程式碼。此技能優先考慮有意的設計系統，而非預設框架。
未完美對應到公開標題的匯入來源章節仍保留在下方或支援檔案中。值得注意的匯入章節：1. 核心設計任務、3. 強制性設計思考階段、5. 實作標準、6. 必要輸出結構、8. 與其他技能整合、9. 操作員檢查清單。
使用此技能的時機
使用此章節作為觸發濾波器。它應在操作員載入檔案、執行命令或開啟拉取請求之前，明確啟動邊界。
- 此技能適用於執行概述中描述的工作流程或動作。
- 當請求明確符合匯入來源意圖時使用：你是一位前端設計工程師，而非佈局產生器。
- 當操作員應保留上游工作流程細節，而非從頭重寫流程時使用。
- 當來源追溯需要保留在答案、拉取請求或審查包中時使用。
- 當複製的上游參考、範例或腳本能實質改善答案時使用。
- 當工作流程應在私有增強器接管前，仍可在公開副本儲存庫中審查時使用。
操作表
| 情境 | 從此處開始 | 為何重要 |
|---|---|---|
| 首次使用 | metadata.json | 在觸碰複製的工作流程前，透過 external_source 區塊確認儲存庫、分支、提交和匯入路徑 |
| 來源審查 | ORIGIN.md | 為審查者提供匯入來源的純語言稽核軌跡 |
| 工作流程執行 | LICENSE.txt | 從最小的、能實質改變執行方式的複製檔案開始 |
| 支援上下文 | LICENSE.txt | 在無需載入整個套件的情況下，加入下一個最相關的複製來源檔案 |
| 交接決策 | ## 相關技能 | 幫助操作員在任務偏離時，切換到更強大的本機技能 |
工作流程
此工作流程同時具有編輯性和操作性。它讓匯入的來源對操作員保持有用，同時仍滿足餵養下游增強器流程的公開副本標準。
- 確認使用者目標、匯入工作流程的範圍，以及此技能是否仍適合該任務。
- 在載入任何複製的上游支援檔案前，先閱讀概述和來源檔案。
- 僅載入能實質改變當前請求結果的參考、範例、提示或腳本。
- 執行上游工作流程，同時在工作記錄中明確保留來源和來源邊界。
- 根據上游期望和你在複製檔案中能指出的證據驗證結果。
- 當工作偏離此匯入工作流程的核心時，升級或交接給相關技能。
- 在合併或關閉前，記錄使用了什麼、改變了什麼，以及審查者仍需驗證什麼。
匯入的工作流程備註
匯入：1. 核心設計任務
每個輸出必須滿足全部四項：
-
有意的美學方向 一個明確命名的設計立場（例如 編輯式野獸派、奢華極簡、復古未來風、工業實用風）。
-
技術正確性 真實、可運作的 HTML/CSS/JS 或框架程式碼 — 而非模型。
-
視覺記憶性 至少一個使用者在 24 小時後還能記住的元素。
-
一致性克制 無隨意裝飾。每個點綴都必須服務於美學主題。
❌ 無預設佈局 ❌ 無基於元件的設計 ❌ 無「安全」的調色盤或字型 ✅ 強烈的觀點，良好的執行
範例
範例 1：直接要求上游工作流程
使用 @frontend-design-v5 來處理 <任務>。從複製的上游工作流程開始，僅載入能改變結果的檔案，並在答案中保持來源追溯的可見性。
說明： 這是當操作員需要匯入的工作流程，但不需要整個儲存庫時最安全的起點。
範例 2：要求基於來源的審查
根據 metadata.json 和 ORIGIN.md 審查 @frontend-design-v5，然後解釋你會優先載入哪些複製的上游檔案以及原因。
說明： 在審查或故障排除前使用，當你需要關於來源和檔案選擇的精確、可稽核的說明。
範例 3：在執行前縮小複製的支援檔案範圍
使用 @frontend-design-v5 處理 <任務>。僅載入能改變結果的複製參考、範例或腳本，並在繼續前明確命名檔案。
說明： 這讓技能保持漸進式揭露，而非預設載入整個複製套件。
範例 4：建立審查者包
使用複製的上游檔案加上來源追溯來審查 @frontend-design-v5，然後在合併前總結任何差距。
說明： 這在拉取請求等待人工審查，而你希望獲得可重複的稽核包時很有用。
最佳實踐
將產生的公開技能視為圍繞上游儲存庫的可審查包裝層。目標是保持來源追溯明確，並僅載入能實質改善執行的複製來源材料。
- 避免系統字型和 AI 預設值（Inter、Roboto、Arial 等）
- 選擇：
- 1 種具表現力的顯示字型
- 1 種節制內文字型
- 結構化使用排版（比例、節奏、對比）
- 致力於一個主導的色彩故事
- 獨家使用 CSS 變數
匯入的操作備註
匯入：4. 美學執行規則（不可協商）
排版
-
避免系統字型和 AI 預設值（Inter、Roboto、Arial 等）
-
選擇：
- 1 種具表現力的顯示字型
- 1 種節制內文字型
-
結構化使用排版（比例、節奏、對比）
色彩與主題
-
致力於一個主導色彩故事
-
獨家使用 CSS 變數
-
偏好：
- 一個主導色調
- 一個強調色
- 一個中性系統
-
避免均勻平衡的調色盤
空間構成
-
有意地打破網格
-
使用：
- 不對稱
- 重疊
- 負空間或受控密度
-
留白是設計元素，而非空缺
動態
-
動態必須：
- 有目的性
- 稀少
- 高影響力
-
偏好：
- 一個強烈的入場序列
- 少數有意義的懸浮狀態
-
避免裝飾性微動態垃圾
紋理與深度
在適當情況下使用：
- 噪點/顆粒覆蓋層
- 漸層網格
- 分層半透明
- 自訂邊框或分隔線
- 具有敘事意圖的陰影（非預設）
故障排除
問題：操作員跳過了匯入上下文，回答過於籠統
症狀： 結果忽略了 plugins/antigravity-bundle-web-designer/skills/frontend-design 中的上游工作流程，未提及來源追溯，或根本未使用任何複製的來源檔案。
解決方案： 重新開啟 metadata.json、ORIGIN.md 和最相關的複製上游檔案。先檢查 external_source 區塊，然後在繼續前重新說明來源追溯。
問題：審查期間感覺匯入的工作流程不完整
症狀： 審查者可以看到產生的 SKILL.md，但無法快速判斷哪些參考、範例或腳本對當前任務重要。
解決方案： 指出確切的複製參考、範例、腳本或資產來證明你所採用的路徑。如果差距確實存在，請在拉取請求中記錄，而非隱藏它。
問題：任務偏離到不同的專業領域
症狀： 匯入的技能從正確的地方開始，但工作轉向除錯、架構、設計、安全性或發布編排，而這些由本機技能處理得更好。 解決方案： 使用相關技能部分有意識地交接。保持匯入的來源追溯可見，以便下一個技能繼承正確的上下文，而非從頭開始。
匯入的故障排除備註
匯入：7. 反模式（立即失敗）
❌ Inter/Roboto/系統字型 ❌ 紫底白字 SaaS 漸層 ❌ 預設 Tailwind/ShadCN 佈局 ❌ 對稱、可預測的區塊 ❌ 過度使用的 AI 設計套路 ❌ 無意圖的裝飾
如果設計可能被誤認為範本 → 重新開始。
相關技能
@3d-web-experience-v3- 當在此匯入技能建立上下文後，該工作更適合由該本機專業技能處理時使用。@canvas-design-v4- 當在此匯入技能建立上下文後，該工作更適合由該本機專業技能處理時使用。@form-cro-v3- 當在此匯入技能建立上下文後，該工作更適合由該本機專業技能處理時使用。@frontend-design-v6- 當在此匯入技能建立上下文後，該工作更適合由該本機專業技能處理時使用。
其他資源
使用此支援矩陣和下方連結檔案作為此匯入技能的操作員包。它們應反映真實的複製來源材料，而非通用支架。
| 資源系列 | 提供給審查者的內容 | 範例路徑 |
|---|---|---|
references | 從上游複製的參考筆記、指南或背景材料 | references/n/a |
examples | 從上游複製的實際範例或可重複使用的提示 | examples/n/a |
scripts | 改變執行或驗證方式的上游輔助腳本 | scripts/n/a |
agents | 確實屬於匯入套件一部分的路由或委派備註 | agents/n/a |
assets | 從來源套件複製的支援資產或架構 | assets/n/a |
匯入的參考備註
匯入：2. 設計可行性與影響指數（DFII）
在開始建構之前，使用 DFII 評估設計方向。
DFII 維度（1–5）
| 維度 | 問題 |
|---|---|
| 美學影響 | 這個方向在視覺上有多獨特和令人難忘？ |
| 情境契合度 | 此美學是否適合產品、受眾和目的？ |
| 實作可行性 | 能否使用現有技術乾淨地建構？ |
| 效能安全性 | 它會保持快速和可及性嗎？ |
| 一致性風險 | 這能否在螢幕/元件之間維持？ |
評分公式
DFII = (影響 + 契合度 + 可行性 + 效能) − 一致性風險
範圍： -5 → +15
解讀
| DFII | 意義 | 行動 |
|---|---|---|
| 12–15 | 優秀 | 全面執行 |
| 8–11 | 強勁 | 有紀律地進行 |
| 4–7 | 有風險 | 縮小範圍或效果 |
| ≤ 3 | 薄弱 | 重新思考美學方向 |
匯入：3. 強制性設計思考階段
在撰寫程式碼之前，明確定義：
1. 目的
- 這個介面應啟用什麼動作？
- 它是說服性、功能性、探索性還是表達性？
2. 調性（選擇一個主導方向）
範例（非詳盡）：
- 野獸派 / 原始
- 編輯式 / 雜誌風
- 奢華 / 精緻
- 復古未來風
- 工業 / 實用風
- 有機 / 自然風
- 俏皮 / 玩具風
- 極繁主義 / 混亂風
- 極簡主義 / 嚴肅風
⚠️ 不要混合超過兩種。
3. 差異化錨點
回答：
「如果這張圖被截圖，並且移除標誌，別人會如何認出它？」
此錨點必須在最終 UI 中可見。
匯入：5. 實作標準
程式碼要求
- 乾淨、可讀且模組化
- 無死樣式
- 無未使用的動畫
- 語意化 HTML
- 預設可及（對比、焦點、鍵盤）
框架指引
-
HTML/CSS：偏好原生功能、現代 CSS
-
React：功能元件、可組合樣式
-
動畫：
- CSS 優先
- Framer Motion 僅在合理時使用
複雜度匹配
- 極繁設計 → 複雜程式碼（動畫、圖層）
- 極簡設計 → 極其精確的間距和字型
不匹配 = 失敗。
匯入：6. 必要輸出結構
產生前端工作時：
1. 設計方向摘要
- 美學名稱
- DFII 分數
- 關鍵靈感（概念性的，非視覺抄襲）
2. 設計系統快照
- 字型（附理由）
- 色彩變數
- 間距節奏
- 動態理念
3. 實作
- 完整可運作程式碼
- 僅在意圖不明顯處加入註解
4. 差異化標示
明確陳述：
「這透過執行 X 而非 Y 來避免通用 UI。」
匯入：8. 與其他技能整合
- page-cro → 佈局層次與轉換流程
- copywriting → 排版與訊息節奏
- marketing-psychology → 視覺說服與偏見對齊
- branding → 視覺識別一致性
- ab-test-setup → 變體安全設計
…
[為翻譯而截斷]