brand-guidelines を読んでみた ― ブランドを「トークン」として設計する

このスキルは何か

brand-guidelines は、Anthropic の公式ブランド identity（色・タイポグラフィ）を提供する参照スキル。コードツールは同梱されず、内容は「役割の決まった少数の色」と「見出し/本文のフォントペア」が中心。スライド（pptx）などに“同社らしさ”を当てる場面で使う。

どう読んだか

ポイントは2つ。①色が“役割つき”で定義されていること——主要色（テキスト/明背景/二次要素/控えめ背景）と、循環して使う3つのアクセント（橙・青・緑）。②タイポが2役——見出し＝Poppins、本文＝Lora（フォールバックも明記）。少ない要素を、役割で縛って運用する設計になっている。

体験メモ：このスキルの価値は「Anthropicの色を借りること」ではなく、「ブランドを“数個の名前つきトークン＋型ペア”として畳む作法」を見られること。ui-memo は既に --color-accent（赤）・--color-button（クリーム）・--color-text（#555）を持つが、改めて“役割の抜け”を点検する良い物差しになった。

ui-memo のトークンと照らし合わせる

brand-guidelines の役割設計と、ui-memo の現状トークンを並べる（※下表は型の比較であり、色をAnthropicに合わせる意図ではない）。

※色はブランドごとに異なるのが正しい。表で見るのは「どんな役割のトークンを持っておくべきか」という設計の網羅性。ui-memo は「二次グレー」「控えめ背景」「副アクセント」「見出し書体役」あたりを足すと、トークン体系がより堅くなる。

使ってみて効いた／注意したこと

• 効いた：「色をいくつ持つか」でなく「どの役割を埋めるか」で点検できた。役割の抜け（二次グレー・subtle bg・副アクセント）が見えた。
• 効いた：見出し/本文の2役タイポという考え方。ui-memo は1書体だが、見出しに1つ役割を足すだけで階層が立つ——デザイン底上げの具体的な一手になる。
• 注意：これは Anthropic のブランド。色をそのまま借りると ui-memo らしさが消える。 frontend-design が言う「自分のブリーフ（ブランド）が優先」のとおり、借りるのは“型”であって“色”ではない。
• 注意：実体は参照テキスト。pptx等への自動適用機能は python-pptx 文脈での話で、ここで何かを生成するスキルではない。

ui-memo での使いどころ

• トークンの棚卸し：--color-* に「二次グレー」「控えめ背景」「副アクセント（図表用）」を足すか検討。
• タイポの底上げ：見出し用の書体役を1つ持つ案（デザイン底上げ／theme-factory と一緒に）。
• 多色化の安全弁：チャートや図版で色を増やすとき、循環させる副アクセントを先に決めておくと散らからない。

まとめ

brand-guidelines は「Anthropicの色を着る」スキルではなく、「ブランドを数個の役割つきトークンと型ペアに畳む」作法の見本だった。ui-memo にそのまま塗るのは違うが、自分のトークン体系の“役割の抜け”を点検する物差しとして効いた。色は借りず、設計の型だけ借りる——それが正しい使い方だと感じた。

よくある質問