Communitygithub.com

設計

使用產品特定的層級、字體排印、佈局、元件、文案、動畫和無障礙設計,來設計、優化或審查視覺介面與成品。除非要求重新設計,否則保留現有視覺語言;僅選擇相關的設計部分。

設計 是什麼?

此技能為 AI 代理在設計、優化或審查數位產品的視覺介面與成品時,提供了一套結構化的專業方法。其核心原則是讓成品服務於使用者與主題,並強調產品現有行為、品牌、內容、平台及無障礙要求,應優先於設計師的個人品味或直覺。技能透過一個「路由」表格,將設計任務精確對應到專用的參考文件,涵蓋方向、設計 token、字體排印、佈局、元件、動畫、文案、無障礙、反模糊審查及證據審查,確保代理只處理與當前任務直接相關的面向。此外,技能還定義了彈性設計代理的協作模式(如流程/內容審查、無障礙審查、視覺審查),並詳細說明了實踐要求,包括直接渲染成品進行驗證,以及避免僅依賴截圖或自動化工具來證明無障礙合規性。此技能適用於 Claude Code、Coder、Cursor 等開發工具,幫助 AI 代理在修改或建立介面時,能遵循專業的設計實務,產出高品質且符合無障礙標準的成果。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Dev-PGVAA/skills/tree/HEAD/design

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

設計 是做什麼的?

讓成品服務於其使用者與主題。使用者的簡報、現有產品行為、品牌、內容、平台和無障礙要求,應優先於品味啟發法。在做出設計主張之前,請檢查當前的成品或相關程式碼/素材。

優化應保留已建立的身份識別與工作流程。重新設計僅改變使用者實際要求的維度;它不會自動拋棄所有現有選擇。一個操作型工具可能受益於熟悉的模式和中性字體。新奇性只有在支援簡報時才有用。

路由

僅閱讀影響此任務的部分。一個狹隘的間距修正並不需要一份方向宣言或十階段工作流程。

部分參考用途
方向方向產品意圖、表面模式、現有視覺語言、審慎的新方向
代幣代幣字體、間距、顏色、形狀和元件角色
字體排印字體排印字型、字形覆蓋率、度量、大小、行高、資料
佈局佈局層級、分組、網格、內容順序、響應式行為
元件元件控制項、相關狀態、互動和平台模式
動畫動畫具減少動態支援的回饋與狀態轉換
反模糊具體性審查模糊產品的一般視覺/文案模式
文案文案標籤、錯誤訊息、空白狀態、行銷主張
無障礙無障礙適用的 WCAG 要求與實際檢查
審查審查基於證據的驗證與優先排序的發現

每個部分連結的深度參考提供了可選的領域細節。數值設計比例是起點,而非普遍要求或無障礙的證明。適用的標準、使用者需求和實際可用性決定了阻斷因素。

獨立設計代理

對於重要的成品,在有用且允許的情況下,使用有邊界的獨立審查或不重疊的實作:

  • 流程/內容審查者: 實際畫面和使用者任務;辨識缺失的狀態、不明確的操作、領域不準確和斷裂的旅程。
  • 無障礙審查者: 特定流程、呈現的 UI 和相關原始碼;回傳可重現的障礙、適用的準則、嚴重程度和未測試的區域。
  • 視覺審查者: 當前成品、簡報和先前版本;評估層級、字體排印、響應式行為以及身份識別的保留,並附上截圖/頁面證據。

提供真實的簡報、素材、範圍、輸入狀態、允許的操作、輸出格式和努力限制;避免以期望的發現來引導審查者。父代理擁有方向、共享代幣、最終實作和整合的主導權。僅分配不重疊的檔案進行並行編輯。不要派送多個設計師去重新設計整個產品。預設情況下不進行遞迴委派;對於小型工作或不可用的工具,使用順序審查。

證據與交付

在可能的情況下,渲染或執行實際成品,檢查相關狀態和代表性尺寸,然後驗證修正。僅靠程式碼檢查和截圖並不能證明鍵盤行為、輔助技術支援或即時整合。說明觀察到了什麼、在原始碼中檢查了什麼,以及哪些仍然未經驗證。不要根據部分清單或自動化掃描來聲稱 WCAG 合規。

深度參考的歸屬資訊保留自原始套件。它們是歸屬通知,而非聲明當前的平台文件或所有許可條款已獨立稽核。當精確的合規性或平台版本細節很重要時,請使用官方的現行標準。

回答的語氣

開門見山。不要有鋪陳的開場白,不要有「不是 X 而是 Y」,不要有聊天殘留,不要有重要性填充。短句穿插於長句之間。事實和限定詞應保持與證據相符的強度。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相關技能