mcpField
B
brand-style

brand-style

github.com/anthropicsデザイン・UI33.6k267 回インストール1 日前に更新
リポジトリ

brand-style について

brand-styleは、事業者がブランドの見た目や成果物の形式を設定・更新するためのスキルです。ウェブサイトや文章で情報を集め、保存前にプレビューを確認してもらいます。

主な機能

  1. 01サイトや説明文からブランド情報を収集
  2. 02適用後のページをプレビュー
  3. 03成果物の形式を設定
  4. 04承認後にビジネス情報を更新

活用シーン

  1. 01ブランドカラーやロゴの初期設定
  2. 02既存のビジュアルスタイルの変更
  3. 03ページや文書の受け取り方の変更

インストール

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

$npx skills add https://github.com/anthropics/knowledge-work-plugins --skill brand-style

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

詳細

ブランドスタイル

オーナーが、すべての見た目と納品方法を管理する場所です。オンボーディング時に一度設定すれば、その後はいつでも一言で変更できます。

Step 1 — 現在の設定を確認する

## Business context ブロックを読みます。ブランドカラー、ロゴ、または出力形式の設定があれば、まず平易な言葉で内容を伝えます。「現在のページは深いグリーンとクリーム色を使い、葉のロゴを配置しています。ビジュアルページでお届けしています。何を変更しますか?」1つの項目を更新するオーナーに、ほかの項目まで改めて回答してもらう必要はありません。

まだ何も保存されていない場合(通常は初回実行時、smb-onboard 内など)は、すぐに設定内容の確認に進みます。

Step 2 — 手間をかけずにブランドを確認する

オーナーの負担がほとんどない方法が2つあります。

  • ウェブサイトのリンク。 サイトを取得し(WebFetch)、ロゴのURL、主要なブランドカラー(CSS、テーマ、またはソーシャルプレビュー画像から)、タグラインを抽出します。オーナーはリンクを貼り付けるだけです。手順は../smb-onboard/reference/website-research.mdを参照してください。
  • 平易な言葉での説明。 「フォレストグリーンとクリーム色」「ネイビーと暖かみのあるグレー」「モダンな法律事務所のように」などです。言葉から実際の色を判断します。

カラーコード、カラーピッカー、ファイルのアップロードは絶対に求めないでください。 ブランド設定に必要なのは、リンクを1つ貼り付けるか、ひと言で説明するだけです。それ以上は必要ありません。「スキップ」も常に選択でき、その場合は標準のシンプルなスタイルを使用します。

Step 3 — 保存前にプレビューする

候補のブランドを適用した小さなサンプルページを、ハウススタイル(../../shared/artifact-style.md)でHTMLアーティファクトとして作成します。タイトル、統計タイル1つ、短い表、ステータスピルを含め、色見本ではなく実際のコンポーネントで見た目を確認できるようにします。質問は1つだけです。「イメージどおりですか?」

調整の希望(「もっと濃いグリーンに」「クリーム色を減らして」など)があれば反映して、もう一度プレビューします。このやり取りにかかる手間はわずかです。今後のすべてのページに誤ったブランドを適用するより、ずっとよいでしょう。

Step 4 — 出力の受け取り方法を確認する

次の6つから複数選択式で選んでもらいます(オーナーが色だけを変更しようとしていて、出力形式がすでに保存されている場合は省略します)。

  1. ビジュアルアーティファクト — ここで確認できる、スタイル付きのページ(デフォルト)
  2. Word文書 — ダウンロードできるDOCXファイル
  3. Markdown — ダウンロードできるプレーンな.mdファイル
  4. Notion — Notionワークスペースに作成するページ(Notionコネクターが必要です。ワークスペース内の保存先を確認します)
  5. Canva — Canvaアカウントに作成するCanva Docs(Canvaコネクターが必要です。接続済みの場合はlist-brand-kitsを実行し、適用するブランドキットを選ぶか、適用しないかを一度だけ確認します。未接続の場合は、Canvaへの納品を行う最初のスキルで確認します)
  6. スキルに最適な形式 — 各スキルが用途に合った形式を選びます

回答は、次のいずれかの値でそのまま保存します。visual artifacts、docx、md、notion、canva、best for skill。NotionまたはCanvaを選択したときに該当するコネクターが未接続の場合も、その回答は保存します。接続されるまでは納品物がビジュアルアーティファクトになることを伝え、接続のサポートを申し出ます。

Step 5 — 承認を得て保存する

保存する内容(Website、Brand colors、Logo、Output preference、および出力形式がCanvaの場合はCanvaブランドキットの名前とID)を提示し、承認を待ちます。その後、## Business context ブロック内の該当するフィールドだけを、../smb-onboard/reference/onboard-checklist.mdに記載された正確なフィールド名で更新します。それ以外のフィールドには触れず、黙って上書きすることも絶対にしません。

最後は操作手順ではなく、変更による効果を伝えて締めくくります。「完了しました。これから作成するすべてのページと文書に、新しいスタイルが適用されます。」

してはいけないこと

  • カラーコード、カラーピッカー、アップロードを求めないでください。 必ずリンク1つか、ひと言だけで済ませます。
  • 最初から最後まで聞き直さないでください。 このスキルで変更するのは見た目と納品方法だけです。「ブランドを更新して」と言ったオーナーに、オンボーディングを再度求めてはいけません。
  • プレビューを見せて承認を得る前に保存しないでください。 今後のすべてのページに適用するブランド設定には、確認が必要です。
  • 過去の納品物のスタイルを変更しないでください。 変更はこれ以降に適用します。過去の文書も更新されたと伝えてはいけません。

アップデート後

変更点を一行で伝えます。次の自然なステップは、実際に動作する様子を見せることです。「月曜日のブリーフィング」(/monday-brief)または「ビジネスの調子はどうですか?」(business-pulse)を提案して、最初のブランドページをすぐに表示します。提案は3つまでとし、このセッション中に断られたものは二度と提案しません。

コメント