mcpField
B
brandfy-templates-canais

brandfy-templates-canais

github.com/promovawebデザイン・UI13156 回インストール2 週間前に更新
リポジトリ

brandfy-templates-canais について

ブランドの各チャネル向けテンプレートを作成するスキルです。SVG例の調整から、可読性やバリエーションの確認、書き出しと記録までを支援します。

主な機能

  1. 01SVG例を brand/templates/ にコピー
  2. 02ブランドカラーとフォントの適用
  3. 03編集可能なコンテンツ欄の維持
  4. 04セーフエリアとモバイル可読性の確認
  5. 05PNGまたはJPGへの書き出し
  6. 06制限とロゴバリエーションの記録

活用シーン

  1. 01選択したチャネル向けのテンプレート作成
  2. 02長短のタイトルを使ったレイアウト確認
  3. 03明暗の写真を使ったデザインテスト

インストール

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

$npx skills add https://github.com/promovaweb/brandfy --skill brandfy-templates-canais

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

同梱ファイル

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

agents/
openai.yaml
assets/
email-header.svg
instagram-carousel-content.svg
instagram-carousel-cover.svg
linkedin-post.svg
youtube-banner.svg
youtube-thumbnail.svg
references/
channel-guides.md
scripts/
install-templates.mjs

詳細

チャネル用テンプレートの作成

運用プロトコル

  • 計画と進捗: チャネル、形式、バリエーション、エクスポート、テストを計画します。
  • 信頼できる情報源: マニュアル、トークン、アセット、および channel-guides.mdを確認します。
  • 範囲と冪等性: 調整する前に、サンプルをbrand/templates/にコピーします。 スキルにインストールされているテンプレートは保持します。
  • 検証: サイズ、セーフゾーン、密度、コントラスト、ロゴ、 タイポグラフィ、モバイルでの読みやすさを確認します。
  • 最終サマリー: テンプレート、バリエーション、エクスポート、制限事項を記録します。

ワークフロー

  1. ブランドで使用するチャネルを選びます。

  2. 必要なSVGをコピーします。

    node <caminho-da-skill>/scripts/install-templates.mjs \
      --output brand/templates
    
  3. brand/global.cssとbrand/fonts/fonts.cssの定義に従って、プレースホルダー、色、フォントファミリーを置き換えます。

  4. ビジュアルシステムを崩さず、すべての投稿が同じ構成にならないよう、十分なバリエーションを作成します。

  5. タイトル、補足文、画像、署名、セクション、番号、CTA用の編集可能なフィールドを維持します。

  6. PNGまたはJPGにエクスポートし、実際に表示されるサイズで確認します。

  7. 各テンプレートの横に、使い方、文字数制限、セーフゾーン、ロゴのバリエーションを記載します。

選択したSVGを開き、プレースホルダーを置き換えて、ブランドパレットを使用したサンプルをエクスポートします。フィードや対象画面で確認すると、小さすぎる文字、セーフゾーンへの侵入、誤ったバリエーションのロゴの適用が見つかります。

専門家の考え方

テンプレートは柔軟なルールとして扱います。認知、アクセシビリティ、制作を守る要素は固定し、コンテンツにリズムが求められる部分には変化を許容します。短いタイトルと長いタイトル、画像なし、明るい写真と暗い写真、翻訳、モバイルでのトリミング、エクスポートをテストします。理想的なサンプルでしか機能しないテンプレートは、まだエージェント向けの準備が整っていません。

コメント