design-with-claude

design-with-claude

パッケージ全体：imsaif/design-with-claude（MIT）

判断フロー

1. パッケージはすでにインストールされていますか？ エージェントのスキルディレクトリに design-with-claude があるか確認してください。

   • はい → 呼び出して進めます
   • いいえ → ステップ 2 に進みます

2. どのエージェントを使いますか？

   • 任意のエージェント（Claude Code、Cursor、Cline、Gemini CLI、Antigravity、…）→ npx skills add imsaif/design-with-claude
   • Claude Code プラグインを使う場合 → /plugin marketplace add imsaif/design-with-claude

3. インストールせずに監査だけ行いたい場合 npx dwic-audit は、インストールもトークンも不要です。

インストールコマンド

npx skills add imsaif/design-with-claude

インストール後の呼び出し

• スキル名：design-with-claude
• トリガーフレーズ：「design with claude」、「audit my design system」、「WCAG contrast audit」、「dashboard design」、「b2b SaaS design」

機能

連携して動作する 2 つの機能があります。

測定。 npx dwic-audit は、カラー、タイポグラフィ、スペーシング、アクセシビリティ、フォーム、ナビゲーション、モーション、コピーの 8 カテゴリにわたって、決定論的な静的スキャンを実行します。WCAG のコントラスト計算、トークンの解析、マークアップのヒューリスティクスを使用し、LLM は実行しません。ダッシュボードを表示し、共有可能な .dwic/audit-<date>.md を書き出します。また、エラーがある場合は 0 以外の終了コードを返すため、CI で動作します。データがマシンの外部に送信されることはありません。

修正。 デザインの専門家がスラッシュコマンドとして利用できます。それぞれが実行時の依存関係を持たない純粋な Markdown の領域専門家です。監査カテゴリは各専門家に対応しています（コントラストの失敗 → /color-specialist、ラベルのない入力欄 → /form-designer など）。/design-triage は監査レポートを読み込み、優先度順に指摘事項に対応します。問題が複数の領域にまたがる場合は、/design-brief が平易な言葉で書かれた概要を適切な担当に振り分けます。

依頼が曖昧な場合（「デザインを改善して」、「これは問題ない？」など）に使います。推測するのではなく、まず測定し、その結果が示す専門家を呼び出してください。

使用しない場合

• デザイン要素のない、視覚に関係しない作業
• 変更方法がわかっている、1 行だけの CSS 変更
• すでにインストール済みの単一の特化スキルで十分な場合 — 単発の用途のために一式をインストールするのは避けてください