pbakaus/impeccable

Impeccable 是給 AI coding agent 用的設計指引 skill,提供 24 個指令、live 瀏覽器迭代與 62 條 deterministic 偵測規則。它針對 AI 生成前端常見的模板化痕跡,例如一律用 Inter、紫藍漸層、卡片嵌套卡片。與 Anthropic 的 frontend-design skill 相比,多了 init 建立 PRODUCT.md 的設定流程與不靠 LLM 的規則檢查。
AI 寫程式與 SkillsRust★ 91,971

專案簡介

以上內容由 AI 根據官方 README 整理,未經實測;指令以官方文件為準。

原始描述

The design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, catch AI slop before it ships.

AI 規格

可搭配的工具Claude CodeCursorCodex CLIGemini CLIGitHub CopilotGrok BuildHermes AgentVeto

主要功能

  • 24 個設計指令,如 polish、audit、critique、distill、animate
  • 62 條 deterministic 偵測規則,CLI 與瀏覽器擴充皆可跑
  • init 產生 PRODUCT.md 記錄產品脈絡,DESIGN.md 記錄視覺系統
  • live 模式在瀏覽器內即時迭代元素變體
  • pin 指令可把常用指令變成獨立短指令
  • 內建 anti-pattern 清單,避開 Inter、紫藍漸層、卡片嵌套等

系統需求

  • 使用 npx 安裝器時需要 Node.js >= 18.19.0
  • skill 本身不需要 runtime,首次執行會下載 engine 二進位到 ~/.impeccable/bin/
  • VS Code 擴充需要 VS Code 1.109.3+ 與 Copilot Chat 存取權

安裝方式

  1. 在專案根目錄安裝 skill 與對應 harness 的 hook

    npx impeccable install
  2. 更新既有安裝

    npx impeccable update

快速開始

/impeccable init

設定教學

第一次使用前在專案根目錄執行 npx impeccable install,安裝後在 AI 工具內執行 /impeccable init 產生 PRODUCT.md。CLI 與瀏覽器擴充的 62 條偵測規則不需要 LLM 或 API 金鑰。

主要設定檔

部署方式

本機開發

  1. 在專案根目錄安裝 skill 與 hook

    npx impeccable install
  2. 更新既有安裝

    npx impeccable update

Git Submodule 團隊流程

  1. 把 repo 加入為 submodule

    git submodule add https://github.com/pbakaus/impeccable .impeccable
  2. 把編譯好的 skill 連結到 harness 資料夾

    npx impeccable link --source=.impeccable --providers=claude,cursor
  3. 之後更新 submodule

    git submodule update --remote .impeccable

Claude Code 外掛安裝

  1. 加入 Claude Code 外掛市集

    /plugin marketplace add pbakaus/impeccable

設定內容整理自 repository 內的設定檔與文件,未經實測;變數名稱與指令以官方檔案為準。

適合用途

  • 用 Claude Code 或 Cursor 寫前端、想避免 AI 模板感的開發者
  • 想在出貨前跑一輪設計與無障礙檢查的團隊
  • 想在瀏覽器內即時調整元素變體的設計師與工程師
  • 想在 CI 或本機用無 API key 規則掃描前端程式碼的人

常見問題

跑偵測規則需要 API 金鑰嗎?

不需要。README 寫明 CLI 與瀏覽器擴充的 62 條 deterministic 規則不跑 LLM、也不需要 API key。

一定要裝 Node 才能用嗎?

skill 本身不需要 runtime,首次執行時會把 engine 二進位下載到 ~/.impeccable/bin/。只有使用 npx impeccable 安裝器時才會用到 Node。

已經裝過要怎麼更新?

在專案根目錄執行 npx impeccable update 即可更新既有安裝。Codex 使用者更新後要開 /hooks 重新核准專案 hook。

/impeccable init 會產生什麼檔案?

init 會檢視專案、補問缺少的產品資訊,並寫出 PRODUCT.md。視覺方向另外記錄在 DESIGN.md。

能不能把某個指令變成獨立短指令?

可以。用 /impeccable pin <command> 建立獨立捷徑,例如 pin audit 會產生 /audit。

支援哪些 AI coding 工具?

支援 Cursor、Claude Code、Gemini CLI、Codex CLI、Replit Agent、Grok Build、Hermes Agent、Veto 等工具。安裝器會偵測 ~/.claude、~/.codex、~/.grok 或專案內的 .cursor 等資料夾。

公開標籤

agent-skillsaianti-slopdesignslop
Stars 等欄位只是 GitHub 快照,不保證品質、安全性或商用適用性。