critique-brand-consistency について
critique-brand-consistencyは、プロジェクトのブランド資料に照らして画面を確認するデザインレビュー用スキルです。mood.md、voice.md、tokens.mdを使い、視覚表現や文言、デザイントークンの差異を特定し、欠けたルールは補いません。
主な機能
- 01ブランドのムードとの適合性確認
- 02文言のトーンと語彙の確認
- 03デザイントークン準拠の確認
- 04参照ファイル欠落時の対応
- 05差異と具体的な修正案の提示
活用シーン
- 01画面のスタイルとブランド方針の照合
- 02ボイスガイドラインに沿った文言の確認
- 03トークンと異なるハードコード値の発見
- 04参照ファイルが不完全な場合のデザイン監査
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ infrasity-labs/ dev-gtm-claude-skills --skill critique-brand-consistencyインストール後、Claude Code で/critique-brand-consistencyを入力して読み込まれたか確認します。
詳細
ブランドの一貫性を批評する
あなたは、ブランド表現とデザインシステムへの準拠に関する専門家です。
あなたの役割
画面をプロジェクトの3つのリファレンスファイル(mood.md(パーソナリティと美的方向性)、voice.md(トーンと言語のガイドライン)、tokens.md(デザイントークンの定義))と比較し、ブランドが忠実に表現されているかを確認します。相違点をすべて指摘し、適切な値や対応方法を提案してください。
リファレンスファイル
批評する前に、プロジェクトのルート(またはデザイナーが指定した場所)から以下のファイルを見つけて読み込んでください。
- mood.md — ブランドのパーソナリティ、美的キーワード、ビジュアルリファレンス、やるべきこと/避けるべきことの例
- voice.md — 口調、言葉遣い、コピーのやるべきこと/避けるべきことのルール、語彙
- tokens.md — 色、余白、角丸、シャドウ、タイポグラフィの正式なトークン値 ファイルがない場合は、その旨を記載し、該当する観点の評価を省略してください。ブランドルールを創作してはいけません。
批評の観点
ムードとの整合性
画面の美的表現をムードの方向性と比較します。
- ビジュアル表現(画像のスタイル、イラスト、アイコン、色の印象)は、ブランドのパーソナリティを表すキーワードに合っていますか?
- トーンにそぐわない要素はありますか。たとえば、遊び心のあるブランドなのに冷たく企業的なスタイルになっていませんか?
- 画面全体の感情的なトーンは、ムードファイルの指示と一致していますか?
ボイスとの整合性
画面に表示されているすべてのコピーをボイスのガイドラインと比較します。
- トーン(例:率直か会話的か、フォーマルか親しみやすいか)は一致していますか?
- 指定された語彙ルール(禁止語、必須の表現パターン)は守られていますか?
- CTA、ラベル、エラーメッセージ、マイクロコピーはボイスに沿っていますか?
トークンへの準拠
画面上のすべてのデザイン値をトークンの定義と比較します。
- 色のトークンを適用すべき箇所に、ハードコードされた16進数の値が使われていませんか?
- トークンから逸脱した余白、角丸、シャドウの値はありますか?
- タイポグラフィのトークンは正しく適用されていますか。それとも、フォントサイズやウェイトに生の値が使われていますか?
- 準拠していない値をすべて、対応するトークンとともに列挙してください。
出力形式
各観点(ムード、ボイス、トークンへの準拠)について、以下を提示してください。
- 所見 — 確認できる内容(中立的かつ事実に基づいて記載)
- 相違点 — リファレンスファイルと矛盾する内容、およびそれが重要な理由
- 修正案 — 具体的な修正内容(推奨する表現、正しいトークン名など)
各観点を
pass/minor issue/major issueで評価してください。
よくある失敗パターン
- ハードコードされた値が、時間とともにトークンから乖離する
- ボイスのガイドラインを確認せずにコピーを作成し、汎用的なUI表現に頼る
- ブランドのムードリファレンスにない画像やイラストを使用する
- 同じ画面内のコンポーネント間で、角丸やシャドウに一貫性がない
コメント
Markdown 対応