mcpField
D
design-system-generator

design-system-generator

github.com/qodex-aiデザイン・UI47130 回インストール43 週間前に更新
リポジトリ

design-system-generator について

design-system-generator は、スライドデッキなどに色とフォントを一貫して適用するテーマスキルです。10 種類の既存テーマを備え、合うものがない場合はカスタムテーマも作成できます。

主な機能

  1. 01厳選された 10 種類のテーマ
  2. 02配色とフォントの組み合わせを定義
  3. 03theme-showcase.pdf でテーマを表示
  4. 04選択したスタイルを成果物全体に適用
  5. 05確認用のカスタムテーマを作成

活用シーン

  1. 01プレゼン資料のスタイル統一
  2. 02成果物に合うビジュアルテーマの選択
  3. 03個別の要件に沿ったテーマ作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/qodex-ai/ai-agent-skills --skill design-system-generator

インストール後、Claude Code で/design-system-generatorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
themes/
arctic-frost.md
botanical-garden.md
desert-rose.md
forest-canopy.md
golden-hour.md
midnight-galaxy.md
modern-minimalist.md
ocean-depths.md
sunset-boulevard.md
tech-innovation.md

詳細

Theme Factory スキル

このスキルでは、プロフェッショナルなフォントとカラーテーマを厳選して用意しています。各テーマには、慎重に選定されたカラーパレットとフォントの組み合わせが含まれています。テーマを選択すると、あらゆる成果物に適用できます。

目的

プレゼンテーションのスライドデッキに一貫性のあるプロフェッショナルなスタイルを適用するには、このスキルを使用します。各テーマには以下が含まれています。

  • まとまりのある、16 進コード付きのカラーパレット
  • 見出しと本文に適した、相性のよいフォントの組み合わせ
  • さまざまな状況や対象者に適した、独自のビジュアルアイデンティティ

使用方法

スライドデッキやその他の成果物にスタイルを適用するには、次の手順に従います。

  1. テーマの一覧を表示する:theme-showcase.pdf ファイルを表示し、ユーザーが利用可能なすべてのテーマを視覚的に確認できるようにします。このファイルには一切変更を加えず、閲覧用に表示するだけにしてください。
  2. テーマを選んでもらう:デッキに適用するテーマを尋ねます。
  3. 選択を待つ:選択したテーマについて、明確な確認を得ます。
  4. テーマを適用する:テーマが選択されたら、選択したテーマの色とフォントをデッキ/成果物に適用します。

利用可能なテーマ

以下の 10 種類のテーマを利用できます。それぞれのテーマは theme-showcase.pdf で紹介されています。

  1. Ocean Depths - プロフェッショナルで落ち着いた海洋テーマ
  2. Sunset Boulevard - 暖かく鮮やかな夕焼け色
  3. Forest Canopy - 自然で落ち着いたアースカラー
  4. Modern Minimalist - すっきりとした現代的なグレースケール
  5. Golden Hour - 豊かで暖かみのある秋のパレット
  6. Arctic Frost - 冬をイメージした、涼やかで澄んだテーマ
  7. Desert Rose - 柔らかく洗練されたダスティカラー
  8. Tech Innovation - 大胆で現代的なテック系の美学
  9. Botanical Garden - 爽やかで有機的なガーデンカラー
  10. Midnight Galaxy - ドラマチックで宇宙を思わせる深い色調

テーマの詳細

各テーマは themes/ ディレクトリに定義されており、以下を含む完全な仕様が記載されています。

  • まとまりのある、16 進コード付きのカラーパレット
  • 見出しと本文に適した、相性のよいフォントの組み合わせ
  • さまざまな状況や対象者に適した、独自のビジュアルアイデンティティ

適用手順

希望するテーマを選択したら、次の手順に従います。

  1. themes/ ディレクトリから該当するテーマファイルを読み込みます。
  2. 指定された色とフォントをデッキ全体に一貫して適用します。
  3. 適切なコントラストと読みやすさを確保します。
  4. すべてのスライドでテーマのビジュアルアイデンティティを維持します。

独自のテーマを作成する

既存のテーマがどれも成果物に合わない場合は、カスタムテーマを作成します。提供された入力に基づき、上記のテーマに似た新しいテーマを作成します。フォントと色の組み合わせが表す内容を説明する、同じような名前を付けます。基本的な説明があれば、それを参考に適切な色とフォントを選びます。テーマを作成したら、確認と検証のために表示します。その後、上記の手順に従ってテーマを適用します。

コメント