Communitygithub.com

shaharsha/claude-skill-brand-system

Claude Codeのスキル。プロダクション品質のブランドブックとデザインシステム（BRAND.md + BRAND.html/PDF + tokens.css/json）を作成します。

claude-skill-brand-system とは？

このスキルは、Webプロダクトのリポジトリルートに完全なブランドブックとデザインシステムを生成するClaude Code用のスキルです。出力は、長文の参照資料となる`BRAND.md`（20セクション）、印刷可能なステークホルダー向け資料`BRAND.html`（約7 A4ページ、Chromeヘッドレスで`BRAND.pdf`にレンダリング）、そしてTailwind v4 `@theme`用の`tokens.css`、W3C DTCG形式の`tokens.json`の5つのアーティファクトです。スキルは、ブランドの個性を引き出すための「署名ムーブインタビュー」の実施を必須としており、単なるテンプレートではなく、真にブランドを体現したドキュメントを生成します。また、WCAG 2.2 AAのコントラスト監査、既存ブランドブックのアウトライン監査、プロダクションCSSとの乖離検出など、メンテナンススクリプトも豊富に提供しています。このスキルは文書の作成に特化しており、SVGアイコンやPWAパックなどの画像生成は姉妹スキル`brand-assets`が担当するため、完全なブランドローンチには両方を順に呼び出す必要があります。

対応✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add shaharsha/claude-skill-brand-system
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

ブランドシステム

Webプロダクトのリポジトリルートに配置されるブランドブック＋デザインシステムをスキャフォールディングします。長文の参照資料BRAND.md（20セクション）と、印刷可能なステークホルダー向け資料BRAND.html（約7 A4ページ、ChromeヘッドレスでBRAND.pdfにレンダリング）、そしてTailwind v4 @themeに対応したtokens.cssを生成します。

このスキルは文書を作成します。姉妹スキルbrand-assetsはピクセルを生成（SVGファビコン、PWAパック、apple-touch-icon）します。完全なブランドローンチには、両方を順に呼び出してください。

5つのアーティファクト

アーティファクト内容生成方法
BRAND.md長文の20セクションからなる参照資料templates/BRAND.md.tmpl から scripts/new-brand-book.sh を使用
BRAND.html7ページのA4印刷可能資料templates/BRAND.html.tmpl から同じスクリプトを使用
BRAND.pdfChromeヘッドレスでレンダリングscripts/render-pdf.sh
tokens.cssTailwind v4 @theme + :root + [data-theme="dark"]templates/tokens.css.tmpl + scripts/extract-tokens.py
tokens.jsonStyle Dictionary / Tokens Studio向けW3C DTCG形式scripts/extract-tokens.py --format dtcg

ワークフロー（決定木）

  1. 新規で始める場合 — まず署名ムーブインタビューを実行してください。 templates/signature-interview.md.tmpl をリポジトリにコピーし、スキャフォールディング前にすべての質問に回答してください。各質問の重要性については reference/signature-moves.md を参照してください。このインタビューなしでは出力はテンプレートに過ぎません。インタビューを実施することで、真のブランドになります。

  2. 新しいブックをスキャフォールディングする場合 — インタビューの回答をフラグとして scripts/new-brand-book.sh を実行します。BRAND.md、BRAND.html、tokens.css、signature-interview.md を出力ディレクトリに生成します。

  3. 特定の章をドラフトする場合 — 対応するリファレンスを参照してください。

  4. ファビコン＋PWAパック？ — このスキルではアセットを生成しないでください。 reference/favicon-pack.md に要件（システム対応SVGファビコン、不透明なapple-touch-icon、マスク可能なPWA、OGライト＋ダークペア）が記載されています。この仕様書とソースSVGを brand-assets スキルの icon-pack.sh に渡してください。

  5. リリース前のコントラスト監査 → scripts/audit-contrast.py を実行します。WCAG 2.2 AA：本文4.5:1、大規模/UI/フォーカスリング3:1。テーマごと（ライト＋ダーク）に実行します。結果のマトリックスを§14に貼り付けてください。

  6. PDFのレンダリング → scripts/render-pdf.sh を実行します。Chromeヘッドレスを使用。BRAND.html から BRAND.pdf を生成します。

  7. 既存のブックを監査する場合 → scripts/audit-outline.py を実行します。20セクションのアウトラインを検証し、欠落している決定ログのエントリを報告し、§2の署名プリミティブに8つ未満の使用サイトが文書化されている場合に警告します。

  8. BRAND.mdとプロダクションCSSの乖離を検出する場合 → scripts/check-consistency.py を実行します。ブランドブックは、コードが静かに乖離すると機能しなくなります。BRAND.md内のカラートークンを1つ以上のターゲットCSSファイルと比較し、16進数値のずれがあると非ゼロで終了します。CIに組み込んでください。

  9. スキャフォールディング前にインタビューを強制する場合 → scripts/new-brand-book.sh に --require-interview path/to/signature-interview.md を渡します。インタビューに未記入の {{PLACEHOLDER}}、{{TODO}}、または > … の回答行が残っている場合、スキャフォールディングを拒否します。強く推奨します。

ハウスルール

  1. スキャフォールディング前にアンチテンプレートムーブを必須とする。 インタビューはオプションではありません。1つの考案された固有名詞、3つの反証可能な原則、過去のミスからの3つの実際の禁止事項、ブランドのボイスで書かれた150語のボイスサンプル、そしてベストプラクティスを意図的に破る1つの署名ムーブが必要です。これらがない場合、ブックはテンプレートです。reference/signature-moves.md を参照してください。

  2. ライト／ダーク間でアクセントカラーを一定に保つ。 サーフェスとテキストのセマンティックトークンだけがテーマ間で切り替わります。唯一の彩度の高いブランドカラーは両モードで同一です。これにより、署名プリミティブはシステム設定に関係なく同じ意味を持ちます。templates/tokens.css.tmpl にエンコードされています。

  3. Nathan Curtisの分類法に基づく3階層トークン。 プリミティブ（--color-cream: #F3EAD3）→ セマンティック（--bg: var(--color-cream)）→ コンポーネント（--btn-bg: var(--bg-elevated)）。プリミティブは @theme に、セマンティックは :root に、ダークモードのオーバーライドは [data-theme="dark"] に配置します。reference/tokens.md を参照してください。

  4. 2026年、WCAG 2.2 AAが法的な最低基準です。 APCAではありません。APCAは2023年7月にWCAG 3から削除され、復帰していません。AAとは、本文4.5:1、大規模/UI/フォーカス3:1、24×24のターゲットサイズ最小値を意味します。scripts/audit-contrast.py で監査します。reference/accessibility.md を参照してください。

  5. RTLは基礎であり、付録ではありません。 製品がヘブライ語やアラビア語で出荷される場合、初日からCSS論理プロパティ（margin-left ではなく margin-inline-start）を使用してください。後から修正するコストは、最初から設計する場合の10～50倍です。reference/rtl.md を参照してください。

  6. ブランドブック自体がブランドのインスタンスであること。 BRAND.html テンプレートは製品自身のパレットとタイプを使用するため、ドキュメントは1ページ目からブランドの外観を持ちます。ブランドブック自身のスタイリングが自ら説くルールを満たしていない場合、それは間違いです。

  7. ダークモードはシステムファースト、トグルはセカンド。 デフォルトで prefers-color-scheme を尊重し、明示的なユーザーオーバーライドは localStorage に保存します。ナビ内の可視的なダークモードトグルはアンチパターンです。システム対応SVGファビコンのルール（reference/favicon-pack.md 内）も同じ論理に従います。

非目標

  • ロゴアートワークの生成 — それは image-generation の担当です。
  • 機械的なアセットパイプライン（PNG→SVGのベクター化、アイコンパック生成、指定サイズでのラスタライズ）— それは brand-assets の担当です。
  • 実際のコンポーネントの構築 — BRAND.md の§18は仕様を文書化します。react-components と frontend-design がそれを実装します。
  • ブランドストーリーテリング／マーケティングコピーライティング — §13は どのように 書くかを規定し、何を 書くかは規定しません。
  • コピーの翻訳 — このスキルはRTL対応の 構造 をスキャフォールディングしますが、翻訳は行いません。
  • ブランドブックを製品としてバージョニングする — その場で更新し、明確なメッセージでコミットし、リポジトリルートに単一の信頼できる情報源を置きます。

標準の20セクションアウトライン（BRAND.md.tmplが生成するもの）

#セクション核心となる必須項目
0アイデア一文のコアアイデア + 「X以外をすべて削ぎ落とす」テスト
1マークの読み解き方ロゴの3～5の同時的な読み解き方
2署名プリミティブあらゆるサーフェスに現れるセマンティックトークン — 8つ以上の使用サイト
3署名ムーブロゴなしでブランドを特定できる5～7の要素
4ブランドエッセンス我々は何か／何でないか／トーン／ポジショニング文
5ロゴシステムバリエーション、クリアスペース、最小サイズ、禁止事項、ファビコン＋PWAパック要件
6カラーシステムコア＋拡張＋ニュートラル＋セマンティックトークン、62/30/8比率、ライト/ダークパリティ
7タイポグラフィフェイス、タブラーナ数字、スケール、メジャー、RTL対応、ワードマーク処理
8アイコノグラフィスタイル、カラールール（アクセントは不使用）、サイズトークン、RTL反転
9スペーシングとレイアウト8ピクセルグリッド、コンテナ、半径＋同心円半径ルール
10サーフェスとマテリアルデフォルト＋フローティングマテリアル、グレインオーバーレイ、ヒーロー背景
11モーション原則、トークン、署名アニメーション、動きの抑制動作
12イメージとイラストレーション写真ルール、イラストスタイル、アンチパターン
13ボイス＆トーンルール、感情状態別トーンマトリックス、同一思考の3段階、RTL固有事項
14アクセシビリティWCAG 2.2 AAコントラストマトリックス、フォーカスリング、動きの抑制、RTL等価性
15リファレンスセットブランドが位置する棚と、何でないか
16アンチパターン具体的な「してはいけないこと」リスト — 禁止された具体的な悪習慣
17実装 — Tailwind v4 @theme完全ブロック、:root + [data-theme="dark"]、ボディルール
18コンポーネントボタン、リンク、入力、カード、バッジ、ナビ、アラート、ダイアログ、プローズ、ランディングプリミティブ
19移行計画廃止されるもの、トークン/パターンごとに✅/⚠️/❌、日付
20これが何でないか＋決定ログ非目標＋決定事項の日付付きテーブルとその根拠

クイック呼び出し

# リポジトリルートに新しいブランドブックをスキャフォールディング
~/.claude/skills/brand-system/scripts/new-brand-book.sh \
  --product "Agentiko" \
  --positioning "A real worker who lives inside WhatsApp." \
  --palette-bg '#F3EAD3' \
  --palette-fg '#0E1320' \
  --palette-accent '#B85A3A' \
  --signature-primitive "voice dot" \
  --primary-font "Rubik" \
  --locale "he" \
  --output-dir .

# コントラスト監査
~/.claude/skills/brand-system/scripts/audit-contrast.py \
  --bg '#F3EAD3' --fg '#0E1320' --accent '#B85A3A'

# 印刷可能版をレンダリング
~/.claude/skills/brand-system/scripts/render-pdf.sh BRAND.html BRAND.pdf

# 後日：既存のブックをアウトラインと照合
~/.claude/skills/brand-system/scripts/audit-outline.py BRAND.md

関連スキル

  • brand-assets — 機械的なSVG/PNGパイプライン。このスキルの後に実行してファビコンパックを生成します。
  • image-generation — このスキルを実行する前にロゴ/ヒーローイメージをデザインします。
  • frontend-design — §18のコンポーネントをプロダクションコードで実装します。
  • react-components — §18が作成されたらコンポーネントプリミティブを構築します。

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community