theme-factory について
theme-factoryは、スライドや各種成果物にテーマを適用するスタイリングスキルです。配色とフォントの組み合わせを提示し、選択後に適用します。要望に応じたカスタムテーマの作成にも対応します。
主な機能
- 0110種類のテーマを提示
- 02配色とフォントの組み合わせ
- 03選択したスタイルを一貫して適用
- 04確認用のカスタムテーマを作成
- 05ビルドパイプライン向けDESIGN.md仕様
活用シーン
- 01スライドの配色とフォントを統一
- 02文書やレポートにテーマを適用
- 03ウェブサイト構築用のDESIGN.mdを用意
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ lotfb86/ web-design-skills --skill theme-factoryインストール後、Claude Code で/theme-factoryを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
design-md/arctic-frost.mdbotanical-garden.mddesert-rose.mdforest-canopy.mdgolden-hour.mdmidnight-galaxy.mdmodern-minimalist.mdocean-depths.mdsunset-boulevard.mdtech-innovation.mdthemes/arctic-frost.mdbotanical-garden.mddesert-rose.mdforest-canopy.mdgolden-hour.mdmidnight-galaxy.mdmodern-minimalist.mdocean-depths.mdsunset-boulevard.mdtech-innovation.md詳細
Theme Factory スキル
このスキルでは、プロフェッショナルなフォントとカラーテーマを厳選して用意しています。それぞれに、慎重に選定されたカラーパレットとフォントの組み合わせが含まれています。テーマを選択すると、あらゆる成果物に適用できます。
目的
プレゼンテーションスライドデッキに一貫性のあるプロフェッショナルなスタイルを適用するには、このスキルを使用します。各テーマには、以下が含まれています。
- まとまりのあるカラー パレットと16進数コード
- 見出しと本文に適した、相性のよいフォントの組み合わせ
- さまざまな状況や対象者に適した、独自のビジュアルアイデンティティ
使用方法
スライドデッキやその他の成果物にスタイルを適用するには、次の手順に従います。
- テーマ一覧を表示する:
theme-showcase.pdfファイルを表示し、利用可能なすべてのテーマを視覚的に確認できるようにします。変更は一切加えず、閲覧用に表示するだけにしてください。 - テーマを選んでもらう:デッキに適用するテーマを尋ねます
- 選択を待つ:選んだテーマについて、明示的な確認を得ます
- テーマを適用する:テーマが選択されたら、そのテーマの色とフォントをデッキ/成果物に適用します
利用可能なテーマ
以下の10種類のテーマが利用可能です。各テーマは theme-showcase.pdf で紹介されています。
- Ocean Depths - プロフェッショナルで落ち着いた海洋テーマ
- Sunset Boulevard - 温かみのある鮮やかな夕焼けの色合い
- Forest Canopy - 自然を感じさせる、落ち着いたアースカラー
- Modern Minimalist - すっきりとした現代的なグレースケール
- Golden Hour - 深みのある温かな秋のカラーパレット
- Arctic Frost - 涼しげで鮮明な冬をイメージしたテーマ
- Desert Rose - 柔らかく洗練されたダスティカラー
- Tech Innovation - 大胆で現代的なテクノロジーの美学
- Botanical Garden - みずみずしく自然なガーデンカラー
- Midnight Galaxy - ドラマチックで宇宙を思わせる深い色合い
テーマの詳細
各テーマは themes/ ディレクトリに定義されており、以下の仕様がすべて含まれています。
- まとまりのあるカラーパレットと16進数コード
- 見出しと本文に適した、相性のよいフォントの組み合わせ
- さまざまな状況や対象者に適した、独自のビジュアルアイデンティティ
適用手順
希望するテーマを選択した後、次の手順に従います。
themes/ディレクトリから対応するテーマファイルを読み込みます- 指定された色とフォントをデッキ全体に一貫して適用します
- 適切なコントラストと読みやすさを確保します
- すべてのスライドでテーマのビジュアルアイデンティティを維持します
独自のテーマを作成する
既存のテーマが成果物に合わない場合は、カスタムテーマを作成します。提供された入力に基づき、上記のテーマに似た新しいテーマを生成します。フォントと色の組み合わせを表す、同様の名前を付けます。基本的な説明が提供されている場合は、それに基づいて適切な色とフォントを選びます。テーマを生成した後、確認と検証のために提示します。その後、上記の手順に従ってテーマを適用します。
拡張テーマ(DESIGN.md 形式)
DESIGN.md ファイルを使用するビルドパイプライン(website-rebuild、local-business-rebuild、azerbaijan-website-build)向けに、各テーマの拡張版を design-md/ ディレクトリに用意しています。以下の9セクションからなる完全な仕様が含まれています。
- 意味的な役割を含む完全なカラーパレット(4色だけではありません)
- サイズ、太さ、行の高さ、文字間隔を含むタイポグラフィ階層の表
- コンポーネントのスタイル(ボタンの状態、カード、入力欄、ナビゲーション)
- 正確なCSS値を含むシャドウ/エレベーションシステム
- 余白のスケールを含むレイアウト原則
- テーマに固有の推奨事項と禁止事項
- レスポンシブ動作とブレークポイント
- 正確なCSS値を含むエージェントプロンプトの例
ビルドパイプラインでの使用方法
- 通常どおりテーマ一覧を表示します
- ユーザーがテーマを選んだら、
design-md/[theme-name].mdから DESIGN.md 版を読み込みます - その内容をプロジェクトのルートに
DESIGN.mdとしてコピーします - コード生成時にビルドパイプラインがこのファイルを使用します
ビルド以外の成果物での使用方法
スライド、ドキュメント、レポートには、引き続き themes/ のシンプルなテーマファイルを使用します。シンプルな形式で成果物のスタイル設定には十分であり、軽量に保てます。