AI Skills.

AI Skills › Design设计設計デザイン › impeccable

impeccable

by Paul Bakaus · Design skill作者:Paul Bakaus · 设计技能作者:Paul Bakaus · 設計技能作者:Paul Bakaus · デザインスキル

The design vocabulary for your coding agent: steer with polish and bolder, review with critique and audit, and catch AI slop before it ships. It gives agents a shared language for visual quality instead of vague 'make it nicer' prompts, and ships a CLI detector for checking work outside the agent. It works with Claude Code, Cursor, Codex, Copilot, and many other coding tools.给编码智能体的设计词汇表:用 polish 和 bolder 引导方向,用 critique 和 audit 做评审,在 AI 味设计上线之前就把它拦下来。它让智能体拥有关于视觉质量的共同语言,而不是含糊的“做得好看点”,还附带一个 CLI 检测器,可以在智能体之外检查成果。支持 Claude Code、Cursor、Codex、Copilot 等众多编码工具。給編碼智慧體的設計詞彙表:用 polish 和 bolder 引導方向,用 critique 和 audit 做審查,在 AI 味設計上線之前就把它攔下來。它讓智慧體擁有關於視覺品質的共同語言,而不是含糊的「做得好看點」,還附帶一個 CLI 檢測器,可以在智慧體之外檢查成果。支援 Claude Code、Cursor、Codex、Copilot 等眾多編碼工具。コーディングエージェントのためのデザインボキャブラリー。polish と bolder で方向付けし、critique と audit でレビューし、AI 臭さが出荷される前に食い止める。曖昧な「もっときれいに」ではなく、視覚品質についての共通言語をエージェントに与え、エージェント外で確認できる CLI 検出ツールも付属する。Claude Code、Cursor、Codex、Copilot など多数のツールに対応する。

Quick start快速上手快速上手クイックスタート

What it does

Impeccable is the design vocabulary for your coding agent. It replaces vague requests like making something pop with precise commands: steer with polish and bolder, review with critique and audit, and catch AI slop before it ships.

How it works

Run init once per project. It reads your code, asks only what it cannot infer, such as who the product is for and its constraints, and writes PRODUCT.md. Every later command reads it, and document captures your existing visual system in DESIGN.md so changes stay on-brand. The detector adds 62 deterministic rules that flag overused patterns and quality problems, with no large language model and no API key.

How to use it

  • From your project root, run
    npx impeccable install
    reload your coding tool, then run
    /impeccable init
    in your agent.
  • Start with one component, for example
    /impeccable critique the pricing cards
    and name a command plus a target, such as
    /impeccable polish settings
  • Scan outside the agent with
    npx impeccable detect src/
    or scan a rendered page with
    npx impeccable detect https://example.com

Key points

  • It offers 24 commands, including steer, review, finish, live iteration, and setup commands; narrow targets get better results than a whole page at a glance.
  • Live mode opens your running dev server with an overlay, lets you pick an element and cycle through variants, and writes the accepted variant back to your source.
  • It is strongest on interfaces that already exist. Building new pages is supported, but it is the harder mode.

它是做什么的

Impeccable 是给编程智能体的设计词汇表。它把“让它更出彩”这类模糊要求,换成精确指令:用 polish 和 bolder 调整方向,用 critique 和 audit 做评审,并在 AI 味成品发布前拦下来。

它怎么工作

每个项目运行一次 init。它会读取代码,只追问无法推断的信息,例如产品面向谁、有何约束,并写出 PRODUCT.md。后续所有命令都会读取它,document 则把现有视觉系统记录到 DESIGN.md,保证改动不偏离品牌。检测器包含 62 条确定性规则,可标记滥用模式和质量问题,无需大模型,也无需 API 密钥。

怎么用

  • 在项目根目录运行
    npx impeccable install
    重新加载编程工具,然后在智能体中运行
    /impeccable init
  • 先从一个组件入手,例如
    /impeccable critique the pricing cards
    并按“命令加目标”的方式使用,如
    /impeccable polish settings
  • 在智能体之外扫描可用
    npx impeccable detect src/
    扫描已渲染页面可用
    npx impeccable detect https://example.com

关键要点

  • 它提供 24 条命令,涵盖调整、评审、收尾、实时迭代和初始化;目标越窄效果越好,胜过粗略扫一整页。
  • 实时模式会在运行中的开发服务器上叠加操作层,让你选中元素并切换多个变体,接受后写回源码。
  • 它在已有界面上最强。新建页面也支持,但属于更难的模式。

它是做什麼的

Impeccable 是給程式設計智慧體的設計詞彙表。它把「讓它更出色」這類模糊要求,換成精確指令:用 polish 與 bolder 調整方向,用 critique 與 audit 做評審,並在 AI 味成品發布前攔下來。

它怎麼運作

每個專案執行一次 init。它會讀取程式碼,只追問無法推斷的資訊,例如產品面向誰、有何限制,並寫出 PRODUCT.md。後續所有指令都會讀取它,document 則把現有視覺系統記錄到 DESIGN.md,確保改動不偏離品牌。檢測器包含 62 條確定性規則,可標記濫用模式與品質問題,不需要大型語言模型,也不需要 API 金鑰。

怎麼用

  • 在專案根目錄執行
    npx impeccable install
    重新載入程式設計工具,然後在智慧體中執行
    /impeccable init
  • 先從一個元件入手,例如
    /impeccable critique the pricing cards
    並以「指令加目標」的方式使用,例如
    /impeccable polish settings
  • 在智慧體之外掃描可用
    npx impeccable detect src/
    掃描已渲染頁面可用
    npx impeccable detect https://example.com

關鍵要點

  • 它提供 24 條指令,涵蓋調整、評審、收尾、即時迭代與初始化;目標越窄效果越好,勝過粗略掃一整頁。
  • 即時模式會在執行中的開發伺服器上疊加操作層,讓你選取元素並切換多個變體,接受後寫回原始碼。
  • 它在已有介面上最強。新建頁面也支援,但屬於較難的模式。

何をするのか

Impeccable は、コーディングエージェントのためのデザイン語彙だ。「もっと目立たせて」のような曖昧な指示を、正確なコマンドに置き換える。polish や bolder で方向を整え、critique や audit でレビューし、AI 臭さを出荷前に捉える。

仕組み

プロジェクトごとに init を一度実行する。コードを読み、推測できない点だけを尋ねる。対象ユーザーや制約などだ。そして PRODUCT.md を書く。以後のコマンドはすべてそれを読む。document は既存のビジュアルシステムを DESIGN.md に記録し、変更がブランドから外れないようにする。検出器は 62 の決定論的ルールを持ち、使い古されたパターンや品質問題を指摘する。大規模言語モデルも API キーも不要だ。

使い方

  • プロジェクトルートで
    npx impeccable install
    を実行し、コーディングツールを再読み込みしてから、エージェントで
    /impeccable init
    を実行する。
  • まず 1 つのコンポーネントから始める。例は
    /impeccable critique the pricing cards
    で、コマンドと対象を組にして使う。例は
    /impeccable polish settings
    だ。
  • エージェント外のスキャンは
    npx impeccable detect src/
    レンダリング済みページは
    npx impeccable detect https://example.com
    を使う。

押さえておきたい点

  • コマンドは 24 個あり、方向調整、レビュー、仕上げ、ライブ反復、初期設定を含む。ページ全体をざっと見るより、狭い対象のほうが良い結果になる。
  • ライブモードは実行中の開発サーバーにオーバーレイを開き、要素を選んでバリアントを切り替え、採用したものをソースへ書き戻す。
  • 既存のインターフェースで最も強い。新規ページの作成もできるが、より難しいモードだ。

Supported platforms支持的平台支援的平台対応プラットフォーム

Claude CodeCursorCodexGitHub CopilotDevinReplitGemini CLIGrok BuildOpenCodeAntigravityKiroTraeRovo DevQoderMistral VibePiHermesDeepseekVeto

Notes备注備註備考

24 commands, 62 deterministic detector rules, live mode, CLI detector: npx impeccable detect.24 个命令、62 条确定性检测规则、实时模式、CLI 检测器:npx impeccable detect。24 個指令、62 條確定性檢測規則、即時模式、CLI 檢測器:npx impeccable detect。コマンド 24 個、決定論的検出ルール 62 件、ライブモード、CLI 検出ツール:npx impeccable detect。

More Design skills更多设计技能更多設計技能その他のデザインスキル

View all →查看全部 →查看全部 →すべて見る →

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则,产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則,產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。

Design设计設計デザインClaude CodeCursorWindsurfAntigravity+19 more+19 个更多+19 個更多+19 件
npm install -g ui-ux-pro-max-cli && uipro init --ai <agent>

A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集,已收录 70 多个真实品牌系统,包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目,编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch,合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集,已收錄 70 多個真實品牌系統,包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案,編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch,合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。

Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)

Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能:艺术指导、参考图和浏览器检查,而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局,而是推动智能体选定方向、用参考图 grounding,并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend,旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能:藝術指導、參考圖和瀏覽器檢查,而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面,而是推動智慧體選定方向、用參考圖 grounding,並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend,舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。

Design设计設計デザインClaude CodeCodexGeneric
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"