awesome-design

優れたデザインスキル：厳選ガイド

AI コーディングエージェント向けのデザインスキルを、検証・厳選したディレクトリです。ロゴ、UI コンポーネント、アニメーション、プレゼンテーション、アイコン、デザインシステム全体に適したスキルを選べます。

スキルディレクトリ

ビジュアルデザインと UI システム

スキル	機能	インストール	ソース
UI/UX Pro Max	67 種類の UI スタイル、161 の業界ルール、161 種類のカラーパレット、57 組のフォントの組み合わせ、25 種類のチャートに対応しています。最も包括的な UI システムです。	git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max	GitHub
Taste	指標に基づくルールを備えた、シニアレベルの UI/UX エンジニアリングです。7 種類のバリエーションがあります：core taste と、soft（プレミアム）、minimalist（エディトリアル）、brutalist、stitch（Google Stitch）、output（切り捨て防止）、redesign。	git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste	GitHub
Impeccable	18 種類のデザインサブスキル（/polish、/audit、/typeset、/overdrive、/colorize、/layout など）を備えています。アンチパターンを検出します。24 項目のデザイン品質チェックを行う CLI スキャナーもあります。	git clone https://github.com/pbakaus/impeccable ~/.claude/skills/impeccable	GitHub
Design & Refine	/__design_lab で、複数の異なる UI バリエーションを生成し、並べて比較できます。Figma スタイルのコメント機能を備えています。Next.js、Vite、Remix、Astro に対応しています。	git clone https://github.com/0xdesign/design-plugin ~/.claude/skills/design-plugin	GitHub
Interface Design	こだわり、記憶、一貫性の強制を備えたデザインエンジニアリングです。プロジェクト間で一貫した UI を実現するための、6 種類のデザイン方針（精密さ、温かみ、洗練さなど）を提供します。	git clone https://github.com/Dammyjay93/interface-design ~/.claude/skills/interface-design	GitHub

コンポーネントとアイコン

スキル	機能	インストール	ソース
Shadcnblocks	1,338 個のブロックと 1,189 個の shadcn/ui コンポーネントに関する専門知識を備えています。コンポーネントの選定と組み合わせをインテリジェントに行います。	git clone https://github.com/masonjames/Shadcnblocks-Skill ~/.claude/skills/shadcnblocks	GitHub
Better Icons	150 以上のコレクション（Lucide、Material、Heroicons、Tabler）から 200,000 個以上のアイコンを検索できます。お好みのアイコンセットを自動的に学習します。React/Vue/Svelte/SVG 形式でエクスポートできます。	git clone https://github.com/better-auth/better-icons ~/.claude/skills/better-icons	GitHub

SVG とロゴデザイン

スキル	内容	インストール	ソース
SVG Design	SVG の包括的な作成と編集に対応します。ロゴ、アイコン、パスコマンド、グラデーション、マスク、フィルター、CSS アニメーション、最適化／スプライト、アクセシビリティ、ブーリアン演算を扱います。リファレンスファイルが 8 個含まれます。	git clone https://github.com/tryopendata/skills ~/.claude/skills/tryopendata-skills	GitHub
SVG Logo Designer	プロジェクトごとに 3～5 個のコンセプトを提案する、プロ品質のベクターロゴを作成します。横型、縦型、正方形、アイコンのみのレイアウトに対応します。意味が明確でクリーンな SVG を生成します。	git clone https://github.com/rknall/claude-skills ~/.claude/skills/rknall-claude-skills	GitHub
Algorithmic Art	シード付きのランダム性、フローフィールド、パーティクルシステムを使った p5.js のジェネラティブアートです。アルゴリズムが 90％、パラメーターが 10％を占めます。	Anthropic Skills の一部	GitHub

SVG ワークフローのヒント： SVG の作成、編集、最適化（SVGO、スプライト、ブーリアン演算）には SVG Design をお使いください。複数のロゴコンセプトをすばやく生成するには SVG Logo Designer が適しています。SVG のモーフィングやタイムラインアニメーションには Anime.js v4 を組み合わせてください。ゼロから作成するのではなく、既存のアイコンを SVG 形式で使いたい場合は Better Icons が便利です。専用の SVG スキルを使わずに、インライン SVG の図をすばやく作成するには Visualise が対応します。

3D とクリエイティブコーディング

スキル	内容	インストール	ソース
Three.js Skills	3D シーン、ジオメトリ、マテリアル、ライティング、カメラ制御、WebXR との連携に対応します。Three.js API のリファレンスがすべて含まれています。	git clone https://github.com/cloudai-x/threejs-skills ~/.claude/skills/threejs	GitHub
WebGPU Skill	WebGPU と Three.js Shading Language (TSL) を使った GPU コンピューティングとシェーダーに対応します。	git clone https://github.com/dgreenheck/webgpu-claude-skill ~/.claude/skills/webgpu	GitHub
Motion Canvas	TypeScript を使ったプログラムによるベクターアニメーションを作成します。解説動画、チュートリアル、データビジュアライゼーションに対応します。	git clone https://github.com/apoorvlathey/motion-canvas-skills ~/.claude/skills/motion-canvas	GitHub

画像生成

スキル	内容	インストール	ソース
Z-Image	Alibaba の無料モデル Z-Image-Turbo（ModelScope API）を使って、テキストから画像を生成します。1 日あたり 2,000 回まで無料で呼び出せます。512～2048px のカスタムサイズに対応します。英語と中国語のプロンプトを使用できます。	git clone https://github.com/FuturizeRush/zimage-skill ~/.claude/skills/zimage	GitHub

アニメーションとモーション

スキル	内容	インストール	ソース
Animate	Emil Kowalski のコースに基づく、Next.js／React 向けのアニメーションパターンです。動作する例が 8 個含まれています。	git clone https://github.com/delphi-ai/animate-skill ~/.claude/skills/animate	GitHub
CSS Animation	機能紹介、デモ、オンボーディング向けの自己完結型 HTML／CSS アニメーションです。JS への依存はありません（Google Fonts を使用します）。	git clone https://github.com/neonwatty/css-animation-skill ~/.claude/skills/css-animation	GitHub
Anime.js v4	API リファレンスとサンプルを含む、Anime.js v4 のアニメーションパターンです。タイムラインの順序制御、スタガリング、SVG のモーフィングに対応します。	git clone https://github.com/BowTiedSwan/animejs-skills ~/.claude/skills/animejs	GitHub

データビジュアライゼーション

スキル	機能	インストール	ソース
Visualise	インラインのインタラクティブなビジュアル：SVG 図、HTML ウィジェット、Chart.js チャート、解説。段階的に読み込みます。依存関係はありません。	git clone https://github.com/bentossell/visualise ~/.claude/skills/visualise	GitHub

プレゼンテーションとドキュメント

スキル	機能	インストール	ソース
PPTX	PowerPoint のフルツールキット：.pptx ファイルの読み込み、編集、作成。サムネイル一覧、XML アクセス、PDF 変換。	Anthropic Skills の一部です。依存関係：pip install "markitdown[pptx]" Pillow + npm install -g pptxgenjs	GitHub

テーマとブランディング

スキル	機能	インストール	ソース
Theme Factory	色とフォントを組み合わせた、あらかじめ用意された 10 種類のテーマ。あらゆる成果物に適用できます。	Anthropic Skills の一部です	GitHub
Brand Guidelines	Anthropic のブランドカラーとタイポグラフィを適用します。ブランドガイドラインのスキルを作成するためのテンプレートです。	Anthropic Skills の一部です	GitHub
Canvas Design	80 種類以上のフォント、色彩の調和、テキスト描画エフェクトを使った高度なタイポグラフィ。	Anthropic Skills の一部です	GitHub
Web Artifacts Builder	React、Tailwind、shadcn/ui を使った複数コンポーネントの HTML 成果物。claude.ai の Web 成果物向けです。	Anthropic Skills の一部です	GitHub

どのスキルを使えばよいですか？

タスク別

タスク	おすすめのスキル	理由
「ランディングページをデザインする」	UI/UX Pro Max + Taste (soft)	Pro Max は構成を整え、Taste は高級感を加えます
「ロゴを作る」	SVG Design または SVG Logo Designer	SVG Design は細かく制御できます（パスの編集、最適化）。Logo Designer は 3～5 個のコンセプトをすばやく生成できます
「アニメーションを追加する」	Animate (React/Next.js)、CSS Animation (vanilla)、または Anime.js (timeline/SVG)	フレームワークと複雑さに応じて選びます
「アイコンを探す」	Better Icons	20 万以上のアイコンがあり、好みを自動学習します
「コンポーネントライブラリを構築する」	Shadcnblocks + Impeccable	コンポーネントには Shadcnblocks、品質チェックには Impeccable を使います
「プレゼンテーションを作成する」	PPTX	PowerPoint の読み込み、書き込み、作成に対応しています
「アプリをリデザインする」	Taste (redesign variant)	機能を損なうことなく監査し、改善します
「チャートや図を作成する」	Visualise	インラインのインタラクティブなチャートと図を作成できます
「デザインレビュー／監査を行う」	Impeccable	24 項目のデザイン品質チェックと /audit コマンド
「テーマを適用する」	Theme Factory	事前構築済みの 10 種類のテーマをすぐに適用できます
「SVG アイコンを作成／編集する」	SVG Design	パスコマンド、アイコン一覧、ピクセル単位の整列、スプライトに対応しています
「SVG を最適化する」	SVG Design	SVGO 設定、スプライトシート、ファイルサイズの削減に対応しています
「SVG 要素をアニメーション化する」	SVG Design (CSS) または Anime.js (JS)	CSS キーフレームには SVG Design、タイムライン／モーフィングには Anime.js を使います
「アイコンシステムを構築する」	SVG Design + Better Icons	カスタムアイコンには SVG Design、既存の 20 万以上のアイコンには Better Icons を使います
「データアートを生成する」	Algorithmic Art	シード付き乱数を使った p5.js のジェネレーティブアート
「3D シーンを構築する」	Three.js Skills	Three.js API と WebXR にフル対応しています
「アニメーション付きの解説動画を作成する」	Motion Canvas	TypeScript によるベクターアニメーション
「画像を生成する」	Z-Image	無料で 1 日あたり 2,000 回呼び出せ、OpenAI のキーは不要です
「UI の選択肢を比較する」	Design & Refine	コメントを付けながら、バリエーションを並べて比較できます

フレームワーク別

フレームワーク	おすすめのスキル
Next.js / React	Taste、Animate、Shadcnblocks、Design & Refine
Tailwind CSS	UI/UX Pro Max、Impeccable、Shadcnblocks
Vanilla HTML/CSS	CSS Animation、Visualise、SVG Logo Designer
Vue / Svelte	Better Icons（複数のフレームワークに対応）、UI/UX Pro Max
Three.js / WebGL	Three.js Skills、WebGPU Skill
SVG / ベクターグラフィックス	SVG Design、SVG Logo Designer、Visualise
p5.js / クリエイティブコーディング	Algorithmic Art
PowerPoint	PPTX

セキュリティに関する注意事項

ここに記載されているすべてのスキルは、安全性を確認済みです。

• curl | sh パイプや難読化されたコードはありません
• 認証情報の収集（環境変数の収集）はありません
• 隠されたペイロードを base64 でデコードする処理はありません
• 生の IP アドレスへの URL 接続はありません

ここに記載されていないスキルをインストールする前に、次のパターンがないか確認してください。

# Quick security scan
grep -rn 'curl.*|.*sh\|base64.*decode\|eval(\|exec(' /path/to/skill/ --include="*.md" --include="*.js" --include="*.ts" --include="*.py" --include="*.sh"

ヒント

• カテゴリごとに、まずは1つのスキルから始めてください。一度にすべてインストールしないでください。
• 一般的な UI 作業では、Taste + UI/UX Pro Max が最も人気のある組み合わせです。
• デザインの品質保証やアンチパターンの検出には、Impeccable が最適です。
• 「Part of Anthropic Skills」と記載されたスキルは、公式の Anthropic コレクションに由来するため、最も安全な選択肢です。
• スキルの GitHub リポジトリで最近の活動を確認してください。放置されたスキルは、パターンが古くなっている場合があります。
• スキル同士が異なるデザイン上の意見で競合する場合、通常は最後にインストールしたスキルのルールが優先されます。