Communityコーディング&開発github.com

brand-identity-builder

短いプロダクト概要から、1ページのブランドシステム(名前、カラー、フォント、タグライン、トーン)を作成し、brand-system.mdとして保存。Lovableのプロジェクトナレッジにそのまま貼り付けられます。

brand-identity-builder とは?

このスキルは、開発者がアプリやプロダクトの構築を始める前に、ブランドの基礎を固めるためのものです。多くの場合、開発者は色やフォント、トーンを決めずに開発を始めてしまい、結果的に画一的なデザインになりがちです。このスキルは、ユーザーが入力した簡潔なプロダクト概要をもとに、製品名、カラーパレット(5色、各色に役割と意味を付与)、フォントペア(Google Fontsから選択)、タグライン(2文)、ボイス原則(4組の対比)を決定し、Lovableなどのビルダーが直接利用できるブランドシステムドキュメント(brand-system.md)を生成します。主にLovableでの利用を想定していますが、他のAIエージェントやツールでも使用可能な構造化されたマークダウンを出力します。プロセスはユーザーに一度に一つの質問をし、不足情報を補いながら段階的に決定を進めるため、効率的かつ深みのあるブランド設計が可能です。また、コントラスト比のWCAG AA準拠を必須とし、アクセシビリティにも配慮しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lexthirteen-ai/claude-loves-lovable-skills/tree/main/sessions/01-brand/finished/brand-identity-builder

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

ドキュメント

Brand Identity Builder (ブランドアイデンティティビルダー)

Lovableはあなたの説明に基づいて構築を行いますが、ほとんどの人が自分のプロダクトがどのように見え、どのように聞こえ、何を象徴するのかをまだ決めていません。その結果、誰もが手にするありきたりなグラデーションになってしまいます。このスキルは、v1に実際に必要なブランド上の決定を行い、ビルダーが従える形式で書き出します。

使用するタイミング

  • 構築を開始しようとしているが、色、フォント、トーンをまだ決めていない場合。
  • Lovableでのビルド結果がどうしても無個性になってしまう場合。
  • 名前はあるが、その背後にある理由がない、または名前すら決まっていない場合。
  • ツール、チームメイト、または請負業者があなたの立ち会いなしでも従えるブランドドキュメントが必要な場合。

入力

短い概要で十分です:プロダクトが何をするのか、誰のためのものか、そしてすでに決まっていること(名前、好きな色、似たくない競合など)。ユーザーがすでに名前を持っている場合は、それを維持し、その理由を説明してください。名前変更の依頼がないプロダクトの名前を変更しないでください。

プロセス

ユーザーには一度に1つの質問をし、概要がすでに回答していることについては質問しないでください。

  1. 状況を把握する。 何かを選ぶ前に、概要から以下の4つの質問に自分で答えてください。概要で答えが明らかでないものについてのみユーザーに質問してください。

    • 実際に何をするのか、一文で運用を説明してください。(「個人営業の犬のトリマーのための予約とルート管理」であって、「ペットケアのエンパワーメント」ではありません。)
    • 誰がそれを信頼しなければならないのか?主要な信頼関係と、副次的な信頼関係を1つずつ挙げてください。
    • その仕事における緊張関係は何か?強いブランドは、本来相容れない二つのものが交わる場所に位置します(物流と静けさ、データと温かみ)。名前とタグラインはその緊張関係の中に存在します。
    • それが機能する最小の場所はどこか?ファビコン、アプリアイコン、テキストメッセージのヘッダー。そのサイズに合わせてデザインしてください。
  2. 名前(必要な場合のみ)。 運用面を表す単語を10個、関係面を表す単語を10個リストアップし、それぞれから1つずつ組み合わせてください。2~3のオプションを、それぞれ一文の根拠とともに提示してください。各候補をテストしてください:一息で言えるか、URLとして機能するか、第三者が少なくとも半分は理解できるか?

  3. カラー:5色、それぞれに役割を持たせる。

    • プライマリ:CTAと主要ブランドの瞬間に使用。高エネルギー。
    • ダーク:深みとコントラストのために。純粋な黒より暖かみのある色。
    • ライト:背景やダーク上のテキストに使用。
    • セカンダリ:プライマリの主張を和らげるカウンターウェイトとして。
    • アクセント:数字、ハイライト、強調のために。

    各色には、色相ではなく、ブランドにとって何を意味するかで名前を付けてください(「ダークネイビー」ではなく「ナイトルート」)。コントラストを確認してください:本文テキストは、割り当てられたすべての背景上でWCAG AA(4.5:1)をパスしなければなりません。

  4. フォント:2つのフォント。 見出しや数字を十分に支えられるディスプレイフォント1つ。小さなサイズで目立たなくなるボディフォント1つ。どのビルダーでも読み込めるようにGoogle Fontsから選んでください。これらはウェイトで対照的であり、スタイルで争ってはいけません:個性的で存在感のあるディスプレイフォントと、控えめで読みやすいボディフォントの組み合わせ。

  5. タグライン:2つの短い文。 1つ目は運用上のアクション、2つ目は関係性の約束です。接続詞は使わず、並置が意味を生み出します。合計4~8単語。(「バンを予約。静けさを保つ。」)

  6. トーン:正確に4つの原則。 それぞれは対比ペア「Xであって、Yではない」で構成され、1つの例文と、それが置き換える汎用的なバージョンを含みます。例文は、プロダクトがv1で実際に行うことだけを説明してください。ビルダーや後続のスキルがコピーとして再利用するからです。性格を表す形容詞(「フレンドリー、プロフェッショナル」)は原則ではありません。なぜなら、すべてのブランドがそれを主張するからです。

  7. ビルドルールを書く。 決定事項をビルダーが従える指示に変換します:どの色がどのテーマトークンに入るか、フォントの読み込み、ボタンと見出しのルール、そして短い「禁止リスト」。このセクションが、ドキュメントを単に美しいだけでなくLovableにとって有用なものにします。

  8. 保存する。 [references/brand-system-template.md](references/brand-system-template.md) をテンプレートとして使用し、brand-system.md を書き出します。1ページに収めてください。

出力

  • brand-system.md:プロダクト文、オーディエンス、名前の根拠、タグライン、使用ルール付きパレットテーブル、フォントペア、4つのトーン原則、Lovable用ビルドルールをカバーする1ページ。
  • 使用方法の簡単なメモ:ファイル全体をLovableプロジェクトのナレッジ(プロジェクト設定)に貼り付け、最初のビルドプロンプトを「プロジェクトナレッジのブランドシステムに従ってください。」で開始します。
  • オプション:ユーザーが要求した場合、カラースウォッチとフォント見本を含む単一ページのHTMLプレビュー。

ガードレール

  • 決定せよ、調査するな。 1つのパレットと1つのフォントペアを推奨し、その理由を説明してください。代替案を提供するのは名前の場合のみです。
  • AIによる色名は禁止。 「セージ」、「スレート」、「ウォームトープ」は色の見た目を伝えるだけで、その意味を伝えていません。
  • タグラインを装ったミッションステートメントは禁止。 「より良いコミュニティを共に築く」は、諦めたミッションです。
  • v1のみ。 ロゴデザイン、イラストスタイル、写真の方向性は後回しにできます。ユーザーがそこに脱線した場合はそう伝え、ドキュメントの「後で」セクションにメモしてください。
  • コントラストは必須。 ペアがAAに不合格の場合、保存する前に変更してください。

関連

次のスキルは brand-system.md を読み込みます:pitch-narrative-architect はトーン原則を使用し、founder-site-copywriter はすべてを使用します。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル