google-fonts-skill について
google-fonts-skillは、1,923種類のフォントのメタデータや組み合わせ案をもとに、デザイナー向けのGoogle Fonts選定とタイポグラフィ案の作成を支援します。Claudeプラグインとして、またはgoogle-fonts MCPサーバーとともに利用できます。
主な機能
- 01ムード情報に基づくフォント選定
- 0273通りのフォント組み合わせ案
- 03CSSプロパティとTailwind設定例
- 048種類のモジュラー文字スケール
- 05100種類のタイポグラフィ例
活用シーン
- 01デザインに使うフォントの選定
- 02フォントの組み合わせ探し
- 03タイポグラフィ用CSSやTailwind設定の生成
- 04文字スケールや作例の検討
MCP 対応
google-fonts MCPサーバーと利用でき、`claude mcp add google-fonts -- uvx google-fonts-mcp`でインストールできます。Claudeプラグインとして導入する方法もあります。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/google-fonts-skillを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
google-fonts-skill
カタログのスタブ — プラットフォーム全体のスキル：sliday/google-fonts-skill
判断ツリー
-
スキルはすでに有効ですか？
google-fontsMCP サーバーが接続されているか、プラグインがインストールされているか確認します。- はい → そのまま進みます
- いいえ → 手順 2 に進みます
-
お使いの環境に適したインストール方法はどれですか？
- MCP サーバー →
uvxでインストールします（以下を参照） - Claude プラグイン →
claude plugin installでインストールします（以下を参照） - わからない場合 → 両方の選択肢をユーザーに提示します
- MCP サーバー →
インストール方法
オプション A — MCP サーバー
claude mcp add google-fonts -- uvx google-fonts-mcp
オプション B — Claude プラグイン
claude plugin install google-fonts
注：MCP の方法では Python／uvx が必要です。詳しいセットアップ手順については、GitHub README を参照してください。
インストール後の呼び出し
- スキル名：
google-fonts-skill - MCP サーバー名：
google-fonts - トリガー：「Google Fonts」、「フォントの組み合わせ」、「モジュラースケール」、「タイポグラフィのショーケース」
機能
パーソナリティやムードのメタデータを付加した 1,923 種類のフォントから、Google Fonts をインテリジェントに選択できます。実戦で検証済みの 73 種類の組み合わせ候補を提示し、そのまま使える CSS カスタムプロパティ、Tailwind 設定スニペット、Google Fonts の埋め込みリンクを生成します。8 種類のモジュラータイプスケールと、すぐにデザインの方向性を決められる 100 種類の構築済みタイポグラフィショーケースを提供します。
使用しない場合
- Google Fonts 以外のフォントソース（セルフホスト、Adobe Fonts など）
- トークンアーキテクチャが必要な、ブランド全体のタイポグラフィシステム —
design-tokens-skillと組み合わせてください - バリアブルフォントの軸レベルでの微調整 — フォント固有のドキュメントを参照してください