brand-style について
brand-styleは、事業者がブランドの見た目や成果物の形式を設定・更新するためのスキルです。ウェブサイトや文章で情報を集め、保存前にプレビューを確認してもらいます。
主な機能
- 01サイトや説明文からブランド情報を収集
- 02適用後のページをプレビュー
- 03成果物の形式を設定
- 04承認後にビジネス情報を更新
活用シーン
- 01ブランドカラーやロゴの初期設定
- 02既存のビジュアルスタイルの変更
- 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つから複数選択式で選んでもらいます(オーナーが色だけを変更しようとしていて、出力形式がすでに保存されている場合は省略します)。
- ビジュアルアーティファクト — ここで確認できる、スタイル付きのページ(デフォルト)
- Word文書 — ダウンロードできるDOCXファイル
- Markdown — ダウンロードできるプレーンな.mdファイル
- Notion — Notionワークスペースに作成するページ(Notionコネクターが必要です。ワークスペース内の保存先を確認します)
- Canva — Canvaアカウントに作成するCanva Docs(Canvaコネクターが必要です。接続済みの場合は
list-brand-kitsを実行し、適用するブランドキットを選ぶか、適用しないかを一度だけ確認します。未接続の場合は、Canvaへの納品を行う最初のスキルで確認します) - スキルに最適な形式 — 各スキルが用途に合った形式を選びます
回答は、次のいずれかの値でそのまま保存します。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つまでとし、このセッション中に断られたものは二度と提案しません。