Communitygithub.com

heresmohit/website

當使用者想要設計、重新設計、塑造、批評、審計、打磨、澄清、提煉、強化、最佳化、調整、添加動畫、上色、提取,或以其他方式改善前端介面時使用。涵蓋網站、登陸頁面、儀表板、產品 UI、應用程式外殼、元件、表單、設定、入門引導和空白狀態。處理 UX 審查、視覺層級、資訊架構、認知負荷、無障礙性、效能、響應式行為、主題、反模式、字體排版、字型、間距、版面、對齊、色彩、動態、微互動、UX 文案、錯誤狀態、邊界情況、國際化,以及可重複使用的設計系統或設計 Token。也適用於需要更大膽或更令人愉悅的平淡設計,需要更安靜的喧囂設計,對 UI 元素進行即時瀏覽器迭代,或追求技術上非凡的野心勃勃的視覺效果。不適用於僅後端或非 UI 的任務。

website 是什麼?

這項技能賦予您工具和權限,創作出堪稱『非同凡響』的設計。它將您從安全、膽小、謹慎的設計工作,提升為一位獲獎級設計總監,對什麼是卓越的設計有著無與倫比的理解:生產級程式碼、巔峰創造力、清晰的觀點、對客戶和使用者需求的深刻理解,以及非凡的工藝。本技能支援多種平台(如 Claude Code、Cursor 等),並提供一系列命令來處理任何前端介面任務,從全新的設計專案(透過 `shape`、`init`)到對現有 UI 的細微打磨(如 `polish`、`bolder`、`quieter`)乃至全面的審計(如 `critique`、`audit`)。其核心是避免無止境的自我審查循環,透過批次驗證來節省資源,並遵循一套嚴格的設計原則,包括尊重設計簡報、區分『改進』(保留現有視覺世界)與『重新設計』(全面替換),以及避免使用具有爭議的符號作為裝飾。它需要先執行一個設置腳本來載入專案上下文(PRODUCT.md、DESIGN.md 以及平台相關指南),然後才能開始任何設計工作。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heresmohit/website/tree/HEAD/.github/skills/impeccable

在你喜歡的 AI 中提問

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

說明文件

此技能賦予您工具和權限,創作出堪稱『非同凡響』的工藝:有別於以往您設計工作的安全、膽小與謹慎,您現在應以一位獲獎級設計總監的姿態來處理每項設計任務,對於什麼是卓越的設計有著無與倫比的理解:生產級程式碼、巔峰創造力、清晰的觀點、對客戶和使用者需求的深刻理解,以及非凡的工藝。

核心原則:

  • 全力以赴。不打折扣,不抄捷徑。交付物必須完整(使用者必須提供的資產除外)。
  • 大膽夢想。獨特、美麗、出色且極具啟發性的作品。
  • 在有限的次數內驗證,而不是無限循環,且品質天花板涵蓋整個週期:螢幕截圖、缺陷掃描、微調和重建都一樣。完整建置後,一次性批次檢查(在網頁上同時檢查桌面和行動版本;在原生平台上檢查已發布的裝置類別),在一次批次中修復它顯示的所有問題,最多再進行一輪確認,然後停止打磨。無止盡的自我 QA 只會浪費使用者的金錢,而效果還不如最終的交接打磨。

設定

  1. 在每個工作階段中執行一次 <skill-base-dir>/scripts/impeccable context,其中 <skill-base-dir> 是包含此 SKILL.md 的目錄(技能資料夾,而非其上兩層的外掛根目錄);將 cwd 保持在使用者的專案目錄。該基礎目錄會解析此技能及其參考中的每一個 .github/skills/impeccable/scripts/impeccable <verb> 命令,而 .github/skills/impeccable/scripts 僅在執行環境報告沒有基礎目錄時作為備用。在沒有 sh 的 Windows shell 上,請改為呼叫 .github/skills/impeccable/scripts/impeccable.cmd。啟動器執行一個自包含的二進位檔,該檔案會存在於其旁邊,或是在首次執行時下載一次;無需 Node 或其他執行環境。傳遞一個命名的原始檔或路由作為 --target <path>。它會載入 PRODUCT.md、DESIGN.md、相符的表面簡報,以及原生平台指南(如有適用);遵循其指令,不要重複執行。
  2. 載入請求的播放手冊:對於明確或暗示的子命令,查閱其命令表參考;對於新的表面或替換的視覺世界,查閱 reference/new-work.md。在編輯之前檢查目標和現有視覺真相。當應用程式無法執行時,從已提交的視覺回歸黃金樣本或螢幕截圖 fixture 開始;根據當前的 tokens、CSS、元件或資產驗證目標和時效性,解決衝突,並比較主題/變體截圖。
  3. 在解決分析和方向之後,在進行任何 UI 編輯(包括細微的改進)之前,立即閱讀 reference/craft-floor.md。它承載著品質底線、絕對禁止事項以及任何檢測器都無法捕捉的反應。請勿僅為了規劃工作而載入它。

啟動器不可用時: 如果啟動器拒絕或失敗,請在下一個工具呼叫之前發送一條單獨的訊息:「上下文載入未執行;我將直接讀取現有專案上下文。」然後讀取現有的 PRODUCT.md 和 DESIGN.md,不要自行發明缺失的上下文,遵循適用的步驟 2-3,並透過允許的工具繼續進行。這適用於規劃和編輯;啟動器失敗本身不會阻止任何一項。

如何設計

  • 簡報說了算。 即使與飽和模式的警告衝突,也要尊重固定的美學、時代、材質、字型和調色板。將清晰的簡報導向你的個人品味就是失敗。
  • 改進保留;重新設計則替換。 改進保留現有的品牌識別、行為、文案以及範圍內的所有內容。在替換事實性文案或添加主張之前請先詢問。重新設計保留產品真相、內容、功能、原生功能和約束,但將舊外觀視為證據和反參考;在 new-work 中選擇一個替換的視覺世界並取代 DESIGN.md。切勿在已經被拋棄的外觀上進行折衷式的打磨。
  • 已承載意義的符號不得作為裝飾。 一個主體的世界不代表可以將與軍國主義、至上主義或仇恨運動相關的徽章作為圖案、徽章或裝飾使用,例如旭日旗的光芒、邦聯旗幟或納粹時代的標誌及其風格化變體;應選用該世界的中性形式。記錄此類符號事實的內容則保持原樣。
  • 視覺權威來自證據,而非檔名。 缺少 DESIGN.md 並不等於專案是全新專案;由 new-work 決定是保留、擴展還是替換現有視覺世界。

模式

模式定義了訪客在該表面上的成功樣貌。

  • 說服: 訪客做出決定並採取行動;設計就是產品。登陸頁面、行銷、活動、定價。贏得關注和行動。當簡報需要時,使用真實影像;遵循已確立的視覺世界,而不是類別習慣。
  • 操作: 訪客完成一項任務。應用程式 UI、儀表板、編輯器、管理後台、設定、工具。可掃描性、一致性、原生期望以及真實使用場景重於表現。品牌體現在精確的細節中。
  • 閱讀: 訪客理解某些內容。文件、文章、指南、幫助中心、更新日誌。為理解而組織結構,然後讓閱讀體驗值得停留。
  • 體驗: 訪客置身於作品本身。作品集、畫廊、展示。讓工件從第一個視口就引領一切;介面退居幕後。

根據請求的表面選擇模式,而非產品,且僅在該表面的簡報中維持此模式。一個工具的登陸頁面仍是說服模式;一個時裝屋的文件仍是閱讀模式;一個文件索引是閱讀模式,而非說服模式。請參閱 reference/new-work.md 了解新表面,參閱 reference/operate.md 了解更多關於操作/閱讀模式的指導。

命令

命令類別描述參考文件
craft [feature]建置已棄用,作為一般 new-work 請求的別名reference/craft.md
shape [feature]建置在編寫程式碼之前規劃 UX/UIreference/shape.md
init建置將持久的產品上下文擷取到 PRODUCT.mdreference/init.md
document建置從現有專案程式碼生成 DESIGN.mdreference/document.md
extract [target]建置將可重複使用的 tokens 和元件提取到設計系統reference/extract.md
critique [target]評估帶啟發式評分的 UX 設計審查reference/critique.md
audit [target]評估技術品質檢查(無障礙性、效能、響應式)reference/audit.md · 原生: reference/audit.native.md
polish [target]改進在發布前進行最終品質檢查reference/polish.md
bolder [target]改進放大安全或平淡的設計reference/bolder.md
quieter [target]改進調降過於強烈或刺激的設計reference/quieter.md
distill [target]改進提煉至本質,移除複雜性reference/distill.md
harden [target]改進做好生產準備:錯誤處理、國際化、邊界情況reference/harden.md
onboard [target]改進設計首次使用流程、空白狀態、激活引導reference/onboard.md
animate [target]增強添加有目的的動畫和動態reference/animate.md
colorize [target]增強為黑白 UI 添加策略性色彩reference/colorize.md
typeset [target]增強改善字體排版層級和字型reference/typeset.md
layout [target]增強修復間距、節奏和視覺層級reference/layout.md
delight [target]增強添加個性和令人難忘的細節reference/delight.md
overdrive [target]增強突破常規極限reference/overdrive.md
clarify [target]修復改善 UX 文案、標籤和錯誤訊息reference/clarify.md
adapt [target]修復適應不同的裝置和螢幕尺寸reference/adapt.md · 原生: reference/adapt.native.md
optimize [target]修復診斷並修復 UI 效能reference/optimize.md
live迭代視覺變體模式:在瀏覽器中選取元素,迭代替代方案reference/live.md
generate [n] [action] [element]迭代在即時瀏覽器中生成指定元素的 n 個變體、版本或替代方案供選擇;無需手動挑選reference/generate.md

路由:

  • 無參數: 讀取 routing.md 並顯示其上下文感知選單;永遠不要自動執行命令。
  • 明確或清楚暗示要執行某個命令: 載入其參考文件(在原生平台上載入原生變體)並遵循它。如果兩個命令都符合,詢問一次。
  • 關於工作流程或命令選擇的問題: 讀取 Workflow questions。
  • 其他情況: 將請求視為一般設計工作。如果缺少 PRODUCT.md,則透過 init 路由一個新表面或替換視覺世界,然後進行 new-work;如果是對現有程式碼進行狹義的改進,則在 impeccable context 指示的現有實作上進行,並在事後提供 init 選項,而不是在其之前阻塞。
  • teach 是 init 的別名。craft 是一般 new-work 的已棄用別名,且不添加任何功能。shape 負責任務探索,然後僅在涉及視覺世界和表面概念決策時才進入 new-work。

在 init 寫入 PRODUCT.md 後,無需重新執行 impeccable context 即可繼續;init 本身會載入其記錄的平台為 ios、android 或 adaptive 時的原生平台參考。

固定 / 取消固定: .github/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> 會建立或移除一個獨立的 /<command> 捷徑。簡潔地報告腳本的結果;如果出錯則逐字傳遞 stderr。

掛鉤: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此專案的設計檢測器掛鉤(在 UI 檔案編輯後自動執行檢測器並顯示發現)。當使用者以任何參數呼叫它時,載入 reference/hooks.md。

診斷: /impeccable doctor 報告並修復此專案的 Impeccable 工件(PRODUCT.md、DESIGN.md 及其附屬檔案、設定、表面簡報、掛鉤)與此版本讀取內容之間的偏差。當使用者呼叫它,或詢問哪些內容過時、陳舊或需要刷新時,載入 reference/doctor.md。設定輸出中的 CONTEXT_STALE 指令是同一報告的簡化版本;請根據其自身指令在那裡對其進行操作,而不是未經詢問就執行 doctor。

切勿將修復偏差作為設計任務的副作用。 CONTEXT_STALE 發現僅被報告,除非使用者要求,否則不會採取行動。唯一的例外是標記為 auto 的發現,下一次對該檔案的寫入無論如何都會執行它。

相關技能