Claude Code、Cursor、Codex向けのデザインスキル。AIコーディングエージェントが、AI生成に見えないUIを作れるよう導きます。
Owl-Listener/designer-skills
Claude CodeとGemini CLI向けに、リサーチ、システム、UI、インタラクション、デリバリーを網羅した、エージェント対応のデザインスキル273種とスラッシュコマンド76種を収録。
- スター
- 2,997
- フォーク
- 413
- 未解決の Issue
- 3
- 最終コミット
- 2 か月前
これは何?
Designer Skills Packは、AIコーディングエージェントが読み込んで活用できるよう、デザインの知識をスキルとスラッシュコマンドとしてまとめたものです。スキルは、ペルソナの作成、デザイントークンの定義、誘導的でないインタビュー質問の作成など、デザインの各テーマを扱います。コマンドは複数のスキルを連携させ、ディスカバリーサイクル、ユーザビリティ調査計画、開発者向け引き継ぎ資料など、一連の成果物を作成します。
このリポジトリのデザイン実践に関するコレクションは、design-research、design-systems、ux-strategy、ui-design、interaction-design、prototyping-testing、design-ops、designer-toolkit、visual-critiqueの9つのプラグインに分かれています。AIプロダクトデザイン、UXプログラム管理、デザインリーダーシップ、インクルーシブデザインを扱う4つのコレクションは別のリポジトリで公開されており、同じマーケットプレイスからインストールできます。
インストールにはClaude Codeのプラグインマーケットプレイスコマンドを使い、その後、Discoverタブから個別のプラグインを選択できます。各プラグインはGemini CLI拡張機能としても提供されます。/start-hereコマンドを使うと、作業の進捗段階に応じた案内を受けられます。
主な機能
- 01ユーザーリサーチからデザインシステム、UI、インタラクション、デリバリーまで、デザインの全工程をカバーします。
- 02複数のスキルを連携させて完成した成果物を作る、76種類のスラッシュコマンドを提供します。
- 03Claude Codeのプラグインマーケットプレイスに対応し、Gemini CLI拡張機能としても利用できます。
- 04どこから始めるかを案内する/start-hereルーターを収録しています。
- 05スイート全体ではなく、個別のプラグインをインストールできます。
ユースケース
- 新規プロダクトのペルソナ、共感マップ、ジャーニーマップを作成し、ディスカバリーサイクルを実施する。
- 既存画面をリデザインする前に、情報の優先順位やタイポグラフィの問題を監査する。
- 仕様、状態、QAチェックリストを含む、開発者向けの引き継ぎ資料を準備する。
- ユーザーリサーチ用のユーザビリティテスト計画やインタビュースクリプトを作成する。
クイックスタート
- 1
claude.com から Claude Code を入手してサインインします
- 2
Claude Code にスキルマーケットプレイスを追加します
/plugin marketplace add Owl-Listener/designer-skills - 3
/plugin と入力して Discover タブを開き、必要なコレクションをインストールします
- 4
ux-strategy など、名前を指定して個別のプラグインをインストールします
/plugin install ux-strategy@designer-skills
使う前に知っておきたいこと
- スキルは Claude Code や Gemini CLI などの AI コーディングアシスタント内で動作するため、いずれかが必要です。
トピック
よくある質問
- designer-skills とは?
- Claude CodeとGemini CLI向けに、リサーチ、システム、UI、インタラクション、デリバリーを網羅した、エージェント対応のデザインスキル273種とスラッシュコマンド76種を収録。 Designer Skills Packは、AIコーディングエージェントが読み込んで活用できるよう、デザインの知識をスキルとスラッシュコマンドとしてまとめたものです。スキルは、ペルソナの作成、デザイントークンの定義、誘導的でないインタビュー質問の作成など、デザインの各テーマを扱います。コマンドは複数のスキルを連携させ、ディスカバリーサイクル、ユーザビリティ調査計画、開発者向け引き継ぎ資料など、一連の成果物を作成します。
- designer-skills は無料で使えますか?ライセンスは?
- designer-skills は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- designer-skills は今もメンテナンスされていますか?
- 半年以内に更新あり。designer-skills の最終コミットは 2026年9月5日 です。
- designer-skills は何に使えますか?
- 新規プロダクトのペルソナ、共感マップ、ジャーニーマップを作成し、ディスカバリーサイクルを実施する。 既存画面をリデザインする前に、情報の優先順位やタイポグラフィの問題を監査する。 仕様、状態、QAチェックリストを含む、開発者向けの引き継ぎ資料を準備する。 ユーザーリサーチ用のユーザビリティテスト計画やインタビュースクリプトを作成する。
- designer-skills のインストール方法は?
- claude.com から Claude Code を入手してサインインします Claude Code にスキルマーケットプレイスを追加します: /plugin marketplace add Owl-Listener/designer-skills /plugin と入力して Discover タブを開き、必要なコレクションをインストールします ux-strategy など、名前を指定して個別のプラグインをインストールします: /plugin install ux-strategy@designer-skills
- designer-skills はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/Owl-Listener/designer-skills
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Claude Codeを使いこなすための45以上の実践的なヒントに、カスタムステータスラインスクリプトと日々の開発スキルをまとめたdx pluginを追加。
コーディング支援AIに、検索可能なUI/UXデザインルール、スタイル、配色、フォントの組み合わせ、スタック別のガイダンスを提供するスキルです。
アートディレクション、実際の写真、ブラウザでのセルフチェックで、コーディングエージェントに個性あるフロントエンドを作らせるAgent Skills。
Claude向けスキル。曖昧な依頼を、AIツールに合わせた構造化プロンプトに書き換える。
PythonとTypeScriptで、ツール、MCP、メモリ、モデルのポータビリティを備えたAIエージェントを構築・実行するためのオープンソースSDK。