mcpField
T
theme-factory

theme-factory

github.com/404kidwizデザイン・UI89 回インストール
リポジトリ

theme-factory について

theme-factoryは、プレゼンテーション、ドキュメント、レポート、ウェブページに一貫したビジュアルテーマを適用するスキルです。プリセットの利用やブランド指針に沿ったテーマ作成に対応し、色のアクセシビリティも考慮します。

主な機能

  1. 01プリセットテーマの適用
  2. 02配色とフォントのカスタム生成
  3. 03形式をまたいだテーマトークン適用
  4. 04色のコントラスト確認
  5. 05ライト・ダーク版の作成

活用シーン

  1. 01スライドや文書のブランド統一
  2. 02ブランド指針に沿ったテーマ作成
  3. 03HTMLページの配色と文字組み
  4. 04レポートやデータ可視化のスタイリング

インストール

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

$npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill theme-factory

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

詳細

テーマファクトリー

目的

プレゼンテーション、ドキュメント、レポート、ウェブページなど、さまざまな成果物に一貫したビジュアルテーマを適用するためのツールキットを提供します。あらかじめ用意されたテーマに加え、色、タイポグラフィ、スタイルを調和させたカスタムテーマを生成できます。

使用するタイミング

  • プレゼンテーションやドキュメントに一貫したブランド表現を適用する
  • HTML ページにプロフェッショナルな配色を適用する
  • ブランドガイドラインに基づいてカスタムテーマを作成する
  • 装飾のない成果物をテーマ適用済みのものに変換する
  • 新しいプロジェクト用のカラーパレットを生成する
  • 色の選択でアクセシビリティを確保する
  • ダークモードとライトモードのバリエーションを作成する
  • レポートやデータビジュアライゼーションにスタイルを適用する

クイックスタート

次の場合にこのスキルを呼び出します：

  • プレゼンテーションやドキュメントに一貫したブランド表現を適用する
  • HTML ページにプロフェッショナルな配色を適用する
  • ブランドガイドラインに基づいてカスタムテーマを作成する
  • 装飾のない成果物をテーマ適用済みのものに変換する
  • 新しいプロジェクト用のカラーパレットを生成する

次の場合は呼び出さないでください：

  • UI コンポーネントをゼロからデザインする → ui-designer を使用してください
  • 完全なウェブアプリケーションを構築する → frontend-design を使用してください
  • ビジュアルアートやグラフィックを作成する → canvas-design を使用してください
  • Anthropic ブランドを特に適用する → brand-guidelines を使用してください

判断フレームワーク

Theming Need?
├── Corporate Branding → Use brand colors + approved fonts
├── Quick Professional → Apply pre-set theme
├── Custom Theme → Generate from primary color + style
├── Accessibility → Ensure WCAG contrast ratios
├── Dark Mode → Invert with adjusted colors
└── Print-Friendly → Optimize for paper output

主なワークフロー

1. あらかじめ用意されたテーマを適用する
  1. 対象の成果物（スライド、ドキュメント、HTML）を選択します
  2. 利用可能なテーマから選択します
  3. 現在のコンテンツ構造を抽出します
  4. 見出し、テキスト、背景にテーマカラーを適用します
  5. タイポグラフィ（フォント、サイズ、ウェイト）を設定します
  6. テーマに合わせて余白とレイアウトを調整します
  7. ビジュアルの一貫性を確認します
2. カスタムテーマを生成する
  1. ブランドに関する情報（メインカラー、ロゴ、ガイドライン）を集めます
  2. 調和するカラーパレットを生成します
  3. フォントの組み合わせ（見出し＋本文）を選択します
  4. 余白のスケールとコンポーネントのスタイルを定義します
  5. テーマ設定ファイルを作成します
  6. 対象の成果物に適用します
  7. フィードバックに基づいて調整します
3. 複数形式へのテーマ適用
  1. 抽象化されたトークン（色、フォント、余白）としてテーマを定義します
  2. 形式ごとの実装（CSS、PPTX スタイル、docx スタイル）を作成します
  3. 成果物の種類に応じて適切な実装を適用します
  4. 形式をまたいでビジュアルの一貫性を確保します
  5. テーマの使用ガイドラインを文書化します

ベストプラクティス

  • アクセシブルな色のコントラスト比（最低でも WCAG AA）から始めます
  • 統一感を保つため、カラーパレットは3～5色に絞ります
  • 一貫した余白のスケール（4px、8px、16px など）を使用します
  • 意図を持ってフォントを組み合わせます（対比させる、または調和させる）
  • ダミーテキストではなく実際のコンテンツでテーマをテストします
  • 可能であれば、ライトモードとダークモードのバリエーションを用意します

アンチパターン

  • 色を使いすぎる → 基本色、副次色、アクセントカラーに中間色を加えた構成に絞ります
  • コントラストを無視する → アクセシビリティのコントラスト比を必ず確認します
  • 余白に一貫性がない → 定義済みの余白スケールを使用します
  • 無計画なフォントの組み合わせ → 意図的な関係性を持つフォントを選びます
  • コンテンツのないテーマ → 必ず実際のコンテンツでテストします

コメント

Markdown 対応