できること
- オープン形式の 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
似ているスキル
すべて見る →白黒スタジオのポートレート
+3日常の写真を、本人らしさを残したまま、落ち着いた白黒のスタジオ風ポートレートに変えます。
ブログ記事のイラスト一式
+31 本の記事に合わせた 3 枚のイラスト。それぞれが、その段落で実際に言っていることを描きます。
自動車の断面図ポスター
+3一般的な車の側面からの断面図。系統ごとに色分けし、番号付きのマーカーと丸い拡大窓を付けます。
黒板風インフォグラフィック作成
+3正確で短いコピー、チョークの絵、ひとつの明確な読み順を持つ、16:9 の黒板風インフォグラフィック。
シネマティックな絵コンテフレーム
+3ひとつのシーンを撮る 3 つの方法を、それぞれ別の絵コンテのコンタクトシートにまとめ、つながりを保ちます。
一貫したコンセプトアートのセット
+3同じ架空の世界に属することが明らかなキャラクター、小道具、背景。
かわいいクレヨンの落書きアート
+3白い紙の上の、愛嬌のある不器用なクレヨンのキャラクター。ぐらつく線、塗りの殴り書き、くっきりしたファイル、シールの切り抜き。
雑誌風の線画イラスト
+3ブログのヘッダー、ニュースレター、SNS カード向けの、アクセント色ひとつの、すっきりした黒インクのイラスト。
エングレービング風の記事カバー
+3エッセイごとにひとつの、シュールな黒インクのエングレービング。クロスハッチングで端から端まで、大きなアイデアがひとつの場面で示されます。
EV プラットフォームの分解図
+3電気自動車を層ごとに持ち上げて分解。バッテリー、モーター、客室、車体を色分けし、注記を付けます。
製品の分解図ポスター
+3製品の、すっきりとした分解図のヒーロー画像。部品の名前は、あなたの仕様表から正確に入ります。
ファンタジー地図ジェネレーター
+3羊皮紙、アトラス風、黒線の、自分の世界の地図。すべての名前は正しく書かれ、グリッドはきちんと揃います。
地域別の食の風味マップ
+3落ち着いた手描きの地図に、地域ごとの小さな味のグラフを共通の目盛りで置き、誠実な凡例を添えます。
イラスト入りの街の地図メーカー
+3近所や町の、手描き風の地図。大事なところは正確で、ラベルも正確に入ります。
インクスケッチの絵コンテ
+3短い話から作る、ラフな黒インクの絵コンテのページ。開いた線、白い余白、コマごとにひとつのビート。
線画の OG 画像メーカー
+3落ち着いたリンクのプレビュー画像。オフホワイトのカード、短い黒い見出し、手描きのインクのキャラクター。
海洋生物学の研究ポスター
+3描かれた生息地の断面図を囲む横長の研究ポスター。番号付きの種と、調査結果のグラフ。
スマホモックアップの生成
+3柔らかい背景の上で、3D の折りたたみスマホが開く製品画面。くっきりした PNG の静止画か、折りたたみの動画で。
写真の構図スタディ
+3ひとつの被写体を、それぞれ別の構図の原理で撮った 3 つの写真風のスタディ。
スケッチノートの画像ジェネレーター
+3記事やメモを、正確で確認済みのラベルを持つ、手描きの 4:3 のスケッチノート 1 枚にします。
SNS カバーとサムネイルのジェネレーター
+3ひとつのメッセージから、OG 画像、投稿のカバー、動画のサムネイルを、確認済みのセットで。どのサイズも正確です。
よくある質問
DESIGN.md とは何ですか?誰が読むのですか?
プレーンテキストのデザインシステムです。冒頭に YAML のトークン、その下に書かれたガイダンスがあります。コーディングやデザインのエージェントがそれを読み、色、書体、余白を一貫させます。このスキルは、他のツールが検証し書き出せるオープンな形式で書き、ロゴファイル、フォントのライセンス、コントラストの組み合わせ、トーンの例を、ひとつの追加のキーにまとめます。
色は本当にアクセシブルですか?
使う予定のテキストと背景のペアはすべて宣言され、スクリプトがダークモードを含めて WCAG 2.2 に照らして確認します。不合格のペアには、同じ色相の最も近い合格色を当て、比率は切り捨てるので、合格は本当の合格です。
ロゴは AI で生成した画像ですか?
いいえ。ワードマークはオープンライセンスのフォントからアウトライン化し、シンボルはいくつかのすっきりした SVG の図形で描きます。PopNow のスケッチがシンボルの着想源になることはありますが、ラスター画像をロゴとして出荷することはなく、リンターはそれを拒否します。
競合に似てしまうのをどう防ぎますか?
避けるべきブランドを、その色と、マークの説明とともに挙げてもらいます。配色の組み合わせが重なるパレットには警告が出て、プロンプトには名前を入れず、シンボルは描く前に相手のマークと比べます。法的な商標調査ではありません。

