ckm:design

概要

ckm:design とは？

ckm:design は、ブランド全体の体験に関わるビジュアルアセットの企画・制作をエージェントに手伝わせるための、デザイン特化型の統合スキルです。単にコードを吐き出すためではなく、UI/UX とブランドのワークフロー向けに設計されており、構造化されたリファレンスと必要に応じてローカルスクリプトを組み合わせて、次のような作業をサポートします。

• ブランドアイデンティティとビジュアルディレクション
• デザイントークンおよびデザインシステム仕様
• shadcn/ui と Tailwind の UI スタイリングガイド
• ロゴデザインと AI によるロゴ生成（55 スタイル）
• Corporate Identity Program（CIP）の成果物とモックアップ
• HTML ベースのプレゼン資料・ピッチデッキ（Chart.js 対応）
• ソーシャル・広告・Web・印刷向けバナーデザイン（22 スタイル・サイズマトリクス完備）
• AI 生成 SVG によるアイコンデザイン（15 スタイル）
• 主要プラットフォーム向けソーシャル写真・マーケティング画像

サイズ表やブランド標準を毎回調べなくても済むように、豊富なリファレンス資料とデータテーブルが同梱されており、エージェントは具体的で実装しやすい提案ができるようになります。

ckm:design は誰に向いている？

ckm:design は次のような方に適しています。

• フロー・コンポーネント・トークン・アートディレクションの観点で会話できるアシスタントを求める UI/UX デザイナー。
• コードとデザインの整合性を保ちながら、正確なバナーサイズやアイコン仕様、スライドの HTML 構造が必要な フロントエンドエンジニア。
• ロゴ、CIP 展開、ソーシャルキャンペーン、ピッチ用スライドを計画する ブランド／マーケティング責任者。
• 専任のデザイン部門まではないが、ブランドと UI を端から端までガイドしてほしい ファウンダーや少人数チーム。

単にデザインの背景説明不要でコードだけ生成してほしい場合は、より軽量なエンジニアリング専用スキルの方が向いているかもしれません。ckm:design は、ビジュアルのクオリティ・一貫性・ブランド適合性が重要なシーンを想定しています。

ckm:design はどんな課題を解決する？

同梱されているリファレンスとデータを活用し、ckm:design はエージェントに次のようなことをさせられます。

• ブランドアウトプットの標準化 – ロゴ・バナー・ソーシャル写真・CIP アセットを一つの整合したビジュアルシステムに揃える。
• サイズとフォーマットを一度で正しく – ソーシャル各種、Google Display Network、Web ヒーロー、印刷物向けのプラットフォーム別テーブルを参照する。
• CIP をスケールさせる – 業種・スタイル・成果物のマッピングにより、大規模な CIP セットを体系的に設計する。
• デザインと実装の橋渡し – ブランドの決定をデザイントークンや CSS variables、shadcn/ui、Tailwind の使い方に結びつける。
• 高速にプロトタイプ – デザインシステムが整う前でも、HTML スライドテンプレートや CIP モックアップで早期レビューを可能にする。

---

使い方

1. ckm:design スキルをインストールする

Claude 互換の skills 環境に、上流リポジトリから ckm:design をインストールします。

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

このコマンドで、nextlevelbuilder/ui-ux-pro-max-skill リポジトリ内の design スキルがローカルの ~/.claude/skills/design ディレクトリ（環境に応じた相当パス）に取り込まれます。

インストール後、次のような構成が確認できます。

• SKILL.md – スキル全体の説明とルーティングガイド。
• data/ – CIP・ロゴ・アイコンスタイル用の CSV データ。
• references/ – デザインタスクのメイン知識ベース。
• scripts/ – CIP とアイコン生成用の任意 Python ユーティリティ。

2. デザインのルーティングモデルを理解する

ckm:design はデザイン系タスクのエントリーポイントとして機能し、references/design-routing.md と SKILL.md で説明されている通り、特化サブスキルへタスクを振り分けます。

主なデザイン領域は次の通りです。

• ブランドアイデンティティ → 通常は別スキル brand が担当。
• デザインシステムとトークン → design-system スキル経由。
• UI 実装（shadcn/ui, Tailwind） → ui-styling スキル経由。
• ロゴ制作 → 組み込みのロゴデザインリファレンス。
• CIP デザイン → コーポレートアイデンティティの成果物とモックアップ。
• スライド → Chart.js 対応 HTML プレゼン。
• バナーデザイン → ソーシャル・広告・Web・印刷用バナー。
• アイコンデザイン → スクリプトによる SVG アイコン生成。

プロンプトでは、スキルの argument-hint パターンを使ってデザイン種別を示唆できます。

ckm:design [design-type] [context]

例：

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. UI/UX とブランド判断にリファレンスを使う

ckm:design の強みは、構造化されたリファレンスファイル群にあります。エージェントに仕様を尋ねる際は、これらを正典（canonical）ソースとして扱ってください。

UI/UX とデザインシステムの設計

実際の実装は design-system や ui-styling に振り分けられますが、ckm:design 経由で次のようなことができます。

• 色・タイポグラフィ・余白・状態など、トークンや仕様をデザインレベルで議論する。
• ブランドカラーと書体を CSS variables や Tailwind config にマッピングする。
• 実装前にコンポーネントの挙動や状態を計画する。

エージェントは、ckm:design で定義された上流のデザイン意図と、コード中心のスキルを組み合わせて実装までつなげられます。

バナー・キャンペーンのクリエイティブ

キャンペーンや UI バナーの設計には、references/banner-sizes-and-styles.md を活用します。

• Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, Web サイト, メール, 印刷物など、プラットフォーム別の正しいサイズを選ぶ。
• 22 種類のアートディレクションスタイル（Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic など）から選択する。
• 次のような配置に対して、メッセージとレイアウトをマッピングするようエージェントに依頼する。
  • Facebook cover と event cover
  • LinkedIn company cover と personal banner
  • GDN billboard と medium rectangle
  • Website hero と blog header

キャンペーン設計用のプロンプト例：

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Corporate Identity Program（CIP）の展開

CIP のサポートは次のファイルでカバーされています。

• references/cip-deliverable-guide.md – 完整合なアイデンティティシステムに含めるべき項目。
• references/cip-design.md – 50 以上の成果物・20 スタイル・20 業種をデータとスクリプトでどう扱うか。
• references/cip-style-guide.md – Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic など詳細なスタイルアーキタイプ。
• references/cip-prompt-engineering.md – モックアップ生成用のプロンプト構造。

これらを使って次のことができます。

• 名刺・サイン・車両・アパレル・デジタルアセット・イベントなど、リブランディングのスコープを定義する。
• 各成果物を業種に適したスタイルガイドに揃える。
• Gemini などの画像モデルが一貫して解釈しやすい、構造化されたモックアップ用プロンプトを生成する。

ハイレベルなプロンプト例：

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. スクリプトで CIP ブリーフとモックアップを生成する（任意）

概念設計だけでなく、同梱の Python スクリプトを使って実際に CIP モックアップを生成したい場合は、references/cip-design.md に従ってください。

Python 3 がインストールされていることと、自身のツールチェーンで説明されている互換 Gemini モデルにアクセスできることを確認します。

4.1. CIP データ検索とブリーフ作成

BM25 ベースの検索スクリプトを使って成果物・スタイル・業種を探索し、初期ブリーフを生成します。

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

特定のドメインに絞って検索することもできます。

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

data/cip/ 配下の CSV ファイルに、この検索ユーティリティが使う成果物・業種・スタイル・モックアップコンテキストのデータが保存されています。

4.2. CIP モックアップ画像を生成する

references/cip-design.md には、Gemini ベースでモックアップ生成を行う scripts/cip/generate.py の利用コマンドも記載されています。

# ロゴ入り単一成果物のモックアップ
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# ロゴ入りフル CIP セット
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

モデルキーや環境設定は自分の環境に合わせて設定してください。ckm:design が提供するのは、データ構造・プロンプトのひな型・スクリプトのエントリーポイントであり、モデルそのものではありません。

4.3. CIP 結果の HTML プレゼンをレンダリングする

モックアップデータが用意できたら、次のコマンドで HTML プレゼンを生成できます。

python3 ~/.claude/skills/design/scripts/cip/render-html.py

これにより、アイデンティティシステム全体をビジュアルで俯瞰できる HTML の概要資料が生成され、ステークホルダーへの共有に利用できます。

5. AI を活用してロゴとアイコンをデザインする

ckm:design には、ロゴとアイコンに特化したガイドとスクリプトも含まれています。

5.1. ロゴ設計とプロンプト設計

次のファイルを参考にします。

• references/logo-design.md – ロゴ構成の基本。
• references/logo-color-psychology.md – ブランド性格や業種に応じた色選び。
• references/logo-style-guide.md – 55 種類のロゴスタイルからの選び方。
• references/logo-prompt-engineering.md – Gemini ベースのロゴ生成に適したプロンプト構造。

これらのリファレンスを使ってエージェントに次のような指示ができます。

• プライマリ／スタック／アイコンのみ／モノクロ版などの ロゴシステム を定義する。
• ブランド戦略 に沿ったカラーとタイポグラフィを選定する。
• 実務で使えるロゴ案が出やすいよう、十分に具体的な AI プロンプト を設計する。

ロゴ機能は、CIP やバナーツールと連動して、ブランドマークをあらゆるタッチポイントで一貫させることを想定しています。

5.2. SVG 出力によるアイコンデザイン

references/icon-design.md では、scripts/icon/generate.py と Gemini 3.1 Pro Preview を使って AI 生成 SVG アイコンを作る方法を説明しています。

コマンド例：

# シンプルなアイコン
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

# カテゴリ付きの名前付きアイコン
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# バッチ生成
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# 複数サイズ
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# 利用可能なスタイルとカテゴリ一覧
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

UI/UX チームにとって、ロゴや CIP と同じビジュアル言語に揃った一貫性のあるアイコンセットを作る際に特に有用です。

6. HTML スライドとマーケ向けビジュアルを構築する

ckm:design には、プロダクトデモ・営業用デッキ・社内プレゼンに適したスライドデザイン用リファレンスも一式含まれています。

• references/slides.md – スライドシステムの概要。
• references/slides-create.md – アウトラインからデッキを作る手順。
• references/slides-layout-patterns.md – ページレベルの代表的なレイアウトパターン。
• references/slides-copywriting-formulas.md – 分かりやすく説得力のあるメッセージングのフレームワーク。
• references/slides-strategies.md – ストーリーテリング戦略。
• references/slides-html-template.md – Chart.js 統合済みのスライド用 HTML テンプレート。

これらを使って次のことができます。

• エージェントに スライドアウトライン を作らせ、各セクションをレイアウトパターンにマッピングするよう依頼する。
• ブランドのトークンやカラーに合わせた HTML スライドデッキ を生成する。
• 指標やダッシュボード向けに Chart.js の可視化 を組み込む。

プロンプト例：

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. ソーシャル写真とマルチプラットフォームキャンペーン

references/social-photos-design.md には、ソーシャル写真およびマルチプラットフォーム用アセットの設計ガイドがまとまっています。

このデザインスキルを使うことで、次のようなことができます。

• Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads など複数プラットフォームにまたがって、プロフィール写真・カバー画像・投稿テンプレートを統一する。
• HTML からのスクリーンショットワークフローを用い、書体やレイアウトを揃えたソーシャルビジュアルを素早く反復生成する。
• すべてのソーシャルアセットを、コアブランドと CIP システムに結びつけて管理する。

---

FAQ

どんなときに ckm:design を使うべきですか？

ckm:design が特に力を発揮するのは、次のようなケースです。

• UI/UX・ブランディング・CIP・マーケティングまでを含む、エンドツーエンドのビジュアルディレクション が必要なとき。
• エージェントに、単なる CSS スニペットではなく、デザイントークン・アートディレクション・ブランドシステム の観点で話してほしいとき。
• リブランディング・新製品ローンチ・デザインシステムの導入 を計画しており、一貫性のあるリファレンスベースのアプローチが必要なとき。
• ロゴ・アイコン・CIP モックアップ・ソーシャル写真などの AI 画像生成 と、人間によるデザイン監修を組み合わせたいとき。

どんな場合に ckm:design は向いていませんか？

次のような場合には最適とはいえないかもしれません。

• デザイン要素を伴わない、純粋なバックエンドやアルゴリズムのサポートだけが欲しいとき。
• 広いブランドシステムを考慮せず、ワンステップでロゴだけ生成できればよいとき。
• 任意の Python ツールを実行する環境や意欲がないとき（スクリプトなしでもガイドとしては有用ですが、画像生成部分は自前のスタックに頼ることになります）。

ckm:design の利用に Figma など特定のデザインツールは必須ですか？

いいえ。ckm:design は特定ツールに依存しません。次のような環境に適用できる構造とガイドを提供します。

• UI/UX のレイアウトやプロトタイピングに使う Figma などのデザインツール。
• shadcn/ui や Tailwind を利用するフロントエンドコードベース。
• スライド用のプレゼンツールや、生の HTML。
• 生成されたプロンプトや仕様を取り込める任意の画像編集ツールや AI 画像生成パイプライン。

既存のデザインスタックはそのまま維持でき、ckm:design はその上に載る意思決定・仕様定義レイヤーとして機能します。

Python スクリプトを使わずに ckm:design を利用できますか？

はい。ckm:design の中核的な価値は、構造化されたリファレンスとデータファイルにあります。

• エージェント経由で references/*.md や data/*.csv だけを使い、企画や仕様策定を行うことができます。
• scripts/cip/ や scripts/icon/ のスクリプトは、モックアップや SVG 生成を自動化したいチーム向けの任意の追加機能です。

スクリプトを動かさない場合でも、次のようなメリットが得られます。

• 正しいサイズ・スタイル・成果物リスト。
• 自前の AI 画像ツール で使えるプロンプトフレームワーク。
• ブランド・UI・マーケティングを横断した一貫したガイドライン。

ckm:design は他のデザインスキルとどう連携しますか？

リポジトリは複数の協調するデザインスキル群として構成されています。ckm:design は次の役割を担います。

• ビジュアルタスクに対するルーティング兼オーケストレーションレイヤーとして機能する。
• ブランドアイデンティティの深掘りは brand スキルに委譲する。
• トークン設計やコンポーネント仕様は design-system に委譲する。
• 実装詳細（shadcn/ui, Tailwind classes）は ui-styling に委譲する。

実務的には、次のような流れになります。

1. まず ckm:design でビジュアル課題を整理し、適切なサブスキルを選ぶ。
2. 詳細な実装は、選んだ専門スキルで掘り下げる。
3. 再び ckm:design に戻り、すべてのアウトプットがブランド全体や CIP 計画と整合しているかを確認する。

ckm:design をインストールしたら、最初にどこを見ればよいですか？

短時間で全体像を掴むには、次のステップがおすすめです。

1. SKILL.md を開き、スコープと主要ワークフローを確認する。
2. references/design-routing.md を読み、タスクが各デザインスキルにどう振り分けられるかを把握する。
3. 直近のニーズに合わせて、以下の主要リファレンスに目を通す。
   • references/banner-sizes-and-styles.md – キャンペーンやバナー用。
   • references/cip-deliverable-guide.md と references/cip-style-guide.md – コーポレートアイデンティティシステム用。
   • references/logo-design.md と references/logo-color-psychology.md – ロゴプロジェクト用。
   • references/slides.md と references/slides-html-template.md – デッキやプレゼン用。
   • references/social-photos-design.md – ソーシャルキャンペーン用。

これらを一通り押さえることで、任意のスクリプトを使うかどうかを決める前に、ckm:design を UI/UX・ブランディング・マーケティングのワークフローにどう組み込むかをイメージしやすくなります。