できること

  • オープン形式の DESIGN.md。トークンは前付けに、ガイダンスは本文に記述
  • ライトとダークのテーマを含む tokens.json(W3C デザイントークン)と tokens.css
  • アウトライン化された SVG のワードマーク、シンボル、ロックアップ、反転版、単色版
  • 4〜6 個のモックアップを載せた、オフラインの HTML と PDF の 1 ページのブランドボード
  • 選べる 3 方向のムードボードのページ

向いている用途

  • 新しい製品、店舗、個人プロジェクトに、1 回のセッションでアイデンティティを与える
  • コーディングエージェントが汎用的な UI を作らないように、DESIGN.md を書く
  • 既存のテーマファイルを、文書化されコントラスト検証済みのシステムにする
  • 提案や初回のクライアント打ち合わせで使う、信頼感のあるブランドボード

向いていない用途

  • 商標調査:似た意匠は避けますが、登録簿の検索はしません
  • マスコットや本格的なイラストのシステム
  • 厳格な既存のブランドブックに一行ずつ合わせること

使い方

Claude・ChatGPT で

PopNow のスキル「ブランドキット& DESIGN.md 生成」(brand-kit-design-md)を使って、次のことをしてください:Lumen Notes のブランドキット。夜遅くまで働く研究者のための、落ち着いたメモアプリです。温かく、少し賢く、紫の AI アプリにはしないで。ロゴはまだありません。

コーディングエージェントで

/popnow-brand-kit-design-md Lumen Notes のブランドキット。夜遅くまで働く研究者のための、落ち着いたメモアプリです。温かく、少し賢く、紫の AI アプリにはしないで。ロゴはまだありません。

次はこれ

方向性 A で進めて、タグの緑だけ B から借りて。

今は軽量版だけ。配色、フォント、トーンのみで、画像のクレジットは不要。

用意しておくもの

  • 製品、読者、個性について数行
  • 似せてはいけない競合と、わかっていればその主な色
  • 残したいロゴ、色、フォント
  • Python 3 と Chrome。アウトライン化したワードマーク用に fonttools

似ているスキル

すべて見る →

よくある質問

DESIGN.md とは何ですか?誰が読むのですか?

プレーンテキストのデザインシステムです。冒頭に YAML のトークン、その下に書かれたガイダンスがあります。コーディングやデザインのエージェントがそれを読み、色、書体、余白を一貫させます。このスキルは、他のツールが検証し書き出せるオープンな形式で書き、ロゴファイル、フォントのライセンス、コントラストの組み合わせ、トーンの例を、ひとつの追加のキーにまとめます。

色は本当にアクセシブルですか?

使う予定のテキストと背景のペアはすべて宣言され、スクリプトがダークモードを含めて WCAG 2.2 に照らして確認します。不合格のペアには、同じ色相の最も近い合格色を当て、比率は切り捨てるので、合格は本当の合格です。

ロゴは AI で生成した画像ですか?

いいえ。ワードマークはオープンライセンスのフォントからアウトライン化し、シンボルはいくつかのすっきりした SVG の図形で描きます。PopNow のスケッチがシンボルの着想源になることはありますが、ラスター画像をロゴとして出荷することはなく、リンターはそれを拒否します。

競合に似てしまうのをどう防ぎますか?

避けるべきブランドを、その色と、マークの説明とともに挙げてもらいます。配色の組み合わせが重なるパレットには警告が出て、プロンプトには名前を入れず、シンボルは描く前に相手のマークと比べます。法的な商標調査ではありません。