Owl-Listener/designer-skills

Owl-Listener / designer-skills – AIコーディングアシスタント向けの設計実践プラグイン

何であるか

• Claude Code および Gemini CLI などのAIエージェントに、273の設計関連「スキル」（知識単位）と76の「コマンド」（事前構築済みワークフロー）を公開する プラグイン のコレクション。
• リポジトリには 設計実践 カテゴリ（研究、戦略、UI、インタラクション、設計システム、プロトタイピング、運用、ツールキット、視覚的レビューの9プラグイン）が収録されています。4つの補足コレクション（AIプロダクト設計、UXプログラム管理、設計リーダーシップ、包括的設計）は別リポジトリにあり、同じ方法で追加可能です。

なぜ重要か

• 現代のAIエージェントはコードを実行できますが、人間のデザイナーが使うような洗練された段階的設計知識は持ち合わせていません。このリポジトリは、その知識を離散的で機械可読な「スキル」として定義し、エージェントが直接呼び出せるコマンドにバンドルしています。
• プラグインをインストールすることで、AIアシスタントはユーザーが下位のプロンプトやスクリプトを書く必要なく、完全な設計ワークフロー（例：ユーザー調査の発見サイクル実行、カラーパレット生成、設計システムの審査、開発者向けパッケージ作成）を実行できます。

導入方法（コード不要）

1. Claude Code（Anthropicの無料アプリ）をインストール。起動してログイン。
2. Claude Code内で以下のコマンドを入力：

   /plugin marketplace add Owl-Listener/designer-skills
   

   – これによりリポジトリがプラグインソースとして登録されます。
3. /plugin を入力し、Discover タブを開き、インストールしたいコレクション（例：design-research, ui-design）にチェックを入れ、Enter を押してインストール。
4. コマンドを実行する。例：

   /design-research:discover
   

   – Claudeが製品の説明を尋ね、その後、ペルソナ、共感マップ、ジャーニーマップを出力します。

Gemini CLI での使用方法

git clone https://github.com/Owl-Listener/designer-skills /tmp/designer-skills
mkdir -p .gemini/extensions
cp -r /tmp/designer-skills/.gemini/extensions/. .gemini/extensions/

これにより、Gemini CLI でも同じ /plugin … コマンドが利用可能になります。

主要なプラグインと例のコマンド

プラグイン	核心的な焦点	例のコマンド
design-research	ユーザー調査手法	/design-research:discover – ペルソナ、共感マップ、ジャーニーマップを実行
ux-strategy	プロダクトレベルの戦略	/ux-strategy:frame-problem – 模糊な設計課題を構造化
ui-design	視覚的UI作成	/ui-design:color-palette – 完全なカラーシステムを構築
interaction-design	インタラクションフロー	/interaction-design:design-onboarding – 初回体験を設計
design-systems	システムライブラリ	/design-systems:create-component – コンポーネント仕様のテンプレート作成
design-ops	配信と引き渡し	/design-ops:handoff – 開発者向けパッケージを生成
designer-toolkit	支援アーティファクト	/designer-toolkit:start-here – 次に役立つコマンドへリダイレクト
visual-critique	視覚的審査	/visual-critique:critique-screen – 優先順位付き修正リストを返却
prototyping-testing	検証	/prototyping-testing:experiment – A/Bテストの定義

一般的な使用フロー

• 新製品 → design-research:discover → ux-strategy:frame-problem → ui-design:design-screen → interaction-design:design-interaction → design-systems:create-component → design-ops:handoff。
• 既存製品の審査 → visual-critique:critique-screen → prototyping-testing:evaluate → design-ops:handoff。
• 特定の出力物（例：カラーパレット） → ui-design のみインストールし、/ui-design:color-palette を実行。

誰が使うべきか

• Claude Code や Gemini CLI を使って反復的な設計作業を自動化したいデザイナー。
• AI強化設計ワークフローを構築するプロダクトチーム。
• 機内に設計知識を内蔵する高レベルエージェントを開発する人。

貢献とコミュニティ

• 9つのプラグインすべてがこのリポジトリに収録されています。スキル定義やプラグインマニフェストの変更は、プルリクエストで受け付けています。
• 補足コレクションは別リポジトリで管理され、同様のプロセスで貢献可能です。
• バグ報告や新スキルのリクエストは、Issues を通して行うことを推奨します。

ライセンス

• MIT – 無料で使用・変更・再配布可能。

---

このリポジトリは単なるカレントリストやチュートリアルではなく、本物で機能するAIエージェント対応の設計プラグインセットです。