jpskill.com
💬 コミュニケーション コミュニティ 🟡 少し慣れが必要 👤 デザイナー・Web制作者

💬 Ckm:design

ckm:design

ブランドロゴからSNS画像、企業向けプレゼン資料まで、多様なデザインをAIと連携して一貫性のある形で制作するSkill。

⚡ ⏱ お礼メール定型化 5分/通 → 30秒/通

📺 まず動画で見る(YouTube)

▶ 【最新版】Claude(クロード)完全解説!20以上の便利機能をこの動画1本で全て解説 ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ブランドロゴからSNS画像、企業向けプレゼン資料まで、多様なデザインをAIと連携して一貫性のある形で制作するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ckm-design.zip https://jpskill.com/download/1259.zip && unzip -o ckm-design.zip && rm ckm-design.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/1259.zip -OutFile "$d\ckm-design.zip"; Expand-Archive "$d\ckm-design.zip" -DestinationPath $d -Force; ri "$d\ckm-design.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ckm-design.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ckm-design フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
27

💬 こう話しかけるだけ — サンプルプロンプト

  • › Ckm:design を使って、ブランドカラーに沿ったデザイン案を3つ
  • › Ckm:design で、既存のデザインをモダンにリフレッシュ
  • › Ckm:design を使って、レイアウトを整えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[スキル名] ckm:design

デザイン

統一されたデザインスキル：ブランド、トークン、UI、ロゴ、CIP、スライド、バナー、ソーシャル写真、アイコン。

使用する場面

  • ブランドアイデンティティ、ボイス、アセット
  • デザインシステムトークンと仕様
  • shadcn/ui + Tailwind を使用したUIスタイリング
  • ロゴデザインとAI生成
  • コーポレートアイデンティティプログラム（CIP）の成果物
  • プレゼンテーションとピッチデッキ
  • ソーシャルメディア、広告、ウェブ、印刷物用のバナーデザイン
  • Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 用のソーシャル写真

サブスキルのルーティング

タスク サブスキル 詳細
ブランドアイデンティティ、ボイス、アセット brand 外部スキル
トークン、仕様、CSS vars design-system 外部スキル
shadcn/ui、Tailwind、コード ui-styling 外部スキル
ロゴ作成、AI生成 Logo (組み込み) references/logo-design.md
CIPモックアップ、成果物 CIP (組み込み) references/cip-design.md
プレゼンテーション、ピッチデッキ Slides (組み込み) references/slides.md
バナー、カバー、ヘッダー Banner (組み込み) references/banner-sizes-and-styles.md
ソーシャルメディア画像/写真 Social Photos (組み込み) references/social-photos-design.md
SVGアイコン、アイコンセット Icon (組み込み) references/icon-design.md

ロゴデザイン（組み込み）

55以上のスタイル、30のカラーパレット、25の業界ガイド。Gemini Nano Banana モデルを使用しています。

ロゴ：デザインブリーフの生成

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

ロゴ：スタイル/色/業界の検索

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

ロゴ：AIによる生成

出力されるロゴ画像は常に白い背景で生成してください。

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

重要： スクリプトが失敗した場合は、直接修正を試みてください。

生成後、常に AskUserQuestion を介してHTMLプレビューについてユーザーに尋ねてください。はいの場合、ギャラリーのために /ui-ux-pro-max を呼び出してください。

CIPデザイン（組み込み）

50以上の成果物、20のスタイル、20の業界。Gemini Nano Banana (Flash/Pro) を使用しています。

CIP：ブリーフの生成

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

CIP：ドメインの検索

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP：モックアップの生成

# ロゴあり (推奨)
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

# Proモデル (4Kテキスト)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# ロゴなし
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

モデル：flash (デフォルト, gemini-2.5-flash-image)、pro (gemini-3-pro-image-preview)

CIP：HTMLプレゼンテーションのレンダリング

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

ヒント： ロゴが存在しない場合は、まず上記のロゴデザインセクションを使用してください。

スライド（組み込み）

Chart.js、デザイントークン、コピーライティングの公式を使用した戦略的なHTMLプレゼンテーションです。

作成ワークフローについては references/slides-create.md を読み込んでください。

スライド：ナレッジベース

トピック ファイル
作成ガイド references/slides-create.md
レイアウトパターン references/slides-layout-patterns.md
HTMLテンプレート references/slides-html-template.md
コピーライティング references/slides-copywriting-formulas.md
戦略 references/slides-strategies.md

バナーデザイン（組み込み）

ソーシャル、広告、ウェブ、印刷物全体で22のアートディレクションスタイル。frontend-design、ai-artist、ai-multimodal、chrome-devtools スキルを使用します。

完全なサイズとスタイルの参照については references/banner-sizes-and-styles.md を読み込んでください。

バナー：ワークフロー

  1. AskUserQuestion を介して要件を収集します — 目的、プラットフォーム、コンテンツ、ブランド、スタイル、数量
  2. 調査 — ui-ux-pro-max をアクティブにし、Pinterest で参照を閲覧します
  3. デザイン — frontend-design でHTML/CSSバナーを作成し、ai-artist/ai-multimodal でビジュアルを生成します
  4. エクスポート — chrome-devtools を介して正確な寸法でPNGにスクリーンショットを撮ります
  5. 提示 — すべてのオプションを並べて表示し、フィードバックに基づいて反復します

バナー：クイックサイズ参照

プラットフォーム タイプ サイズ (px)
Facebook カバー 820 x 312
Twitter/X ヘッダー 1500 x 500
LinkedIn 個人 1584 x 396
YouTube チャンネルアート 2560 x 1440
Instagram ストーリー 1080 x 1920
Instagram 投稿 1080 x 1080
Google Ads ミディアムレクタングル 300 x 250
ウェブサイト ヒーロー 1920 x 600-1080

バナー：トップアートスタイル

スタイル 最適な用途
ミニマリスト SaaS、テクノロジー
太字のタイポグラフィ お知らせ
グラデーション モダンブランド
写真ベース ライフスタイル、Eコマース
幾何学的 テクノロジー、フィンテック
グラスモーフィズム SaaS、アプリ
ネオン/サイバーパンク ゲーム、イベント

バナー：デザインルール

  • セーフゾーン：重要なコンテンツは中央の70-80%に配置します
  • バナーごとに1つのCTA、右下に配置します
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Design

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.

When to Use

  • Brand identity, voice, assets
  • Design system tokens and specs
  • UI styling with shadcn/ui + Tailwind
  • Logo design and AI generation
  • Corporate identity program (CIP) deliverables
  • Presentations and pitch decks
  • Banner design for social media, ads, web, print
  • Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-skill Routing

Task Sub-skill Details
Brand identity, voice, assets brand External skill
Tokens, specs, CSS vars design-system External skill
shadcn/ui, Tailwind, code ui-styling External skill
Logo creation, AI generation Logo (built-in) references/logo-design.md
CIP mockups, deliverables CIP (built-in) references/cip-design.md
Presentations, pitch decks Slides (built-in) references/slides.md
Banners, covers, headers Banner (built-in) references/banner-sizes-and-styles.md
Social media images/photos Social Photos (built-in) references/social-photos-design.md
SVG icons, icon sets Icon (built-in) references/icon-design.md

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.

Logo: Generate Design Brief

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).

CIP: Generate Brief

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

CIP: Search Domains

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: Render HTML Presentation

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Tip: If no logo exists, use Logo Design section above first.

Slides (Built-in)

Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.

Load references/slides-create.md for the creation workflow.

Slides: Knowledge Base

Topic File
Creation Guide references/slides-create.md
Layout Patterns references/slides-layout-patterns.md
HTML Template references/slides-html-template.md
Copywriting references/slides-copywriting-formulas.md
Strategies references/slides-strategies.md

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.

Load references/banner-sizes-and-styles.md for complete sizes and styles reference.

Banner: Workflow

  1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity
  2. Research — Activate ui-ux-pro-max, browse Pinterest for references
  3. Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal
  4. Export — Screenshot to PNG at exact dimensions via chrome-devtools
  5. Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

Platform Type Size (px)
Facebook Cover 820 x 312
Twitter/X Header 1500 x 500
LinkedIn Personal 1584 x 396
YouTube Channel art 2560 x 1440
Instagram Story 1080 x 1920
Instagram Post 1080 x 1080
Google Ads Med Rectangle 300 x 250
Website Hero 1920 x 600-1080

Banner: Top Art Styles

Style Best For
Minimalist SaaS, tech
Bold Typography Announcements
Gradient Modern brands
Photo-Based Lifestyle, e-com
Geometric Tech, fintech
Glassmorphism SaaS, apps
Neon/Cyberpunk Gaming, events

Banner: Design Rules

  • Safe zones: critical content in central 70-80%
  • One CTA per banner, bottom-right, min 44px height
  • Max 2 fonts, min 16px body, ≥32px headline
  • Text under 20% for ads (Meta penalizes)
  • Print: 300 DPI, CMYK, 3-5mm bleed

Icon Design (Built-in)

15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.

Icon: Generate Single Icon

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

Icon: Generate Batch Variations

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

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

Icon: Top Styles

Style Best For
outlined UI interfaces, web apps
filled Mobile apps, nav bars
duotone Marketing, landing pages
rounded Friendly apps, health
sharp Tech, fintech, enterprise
flat Material design, Google-style
gradient Modern brands, SaaS

Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.

Load references/social-photos-design.md for sizes, templates, best practices.

Social Photos: Workflow

  1. Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work
  2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements
  3. Ideate — 3-5 concepts, present via AskUserQuestion
  4. Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
  5. Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
  6. Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
  7. Report — Summary to plans/reports/ with design decisions
  8. Organize — Invoke assets-organizing skill to sort output files and reports

Social Photos: Key Sizes

Platform Size (px) Platform Size (px)
IG Post 1080×1080 FB Post 1200×630
IG Story 1080×1920 X Post 1200×675
IG Carousel 1080×1350 LinkedIn 1200×627
YT Thumb 1280×720 Pinterest 1000×1500

Workflows

Complete Brand Package

  1. Logo → scripts/logo/generate.py → Generate logo variants
  2. CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups
  3. Presentation → Load references/slides-create.md → Build pitch deck

New Design System

  1. Brand (brand skill) → Define colors, typography, voice
  2. Tokens (design-system skill) → Create semantic token layers
  3. Implement (ui-styling skill) → Configure Tailwind, shadcn/ui

References

Topic File
Design Routing references/design-routing.md
Logo Design Guide references/logo-design.md
Logo Styles references/logo-style-guide.md
Logo Colors references/logo-color-psychology.md
Logo Prompts references/logo-prompt-engineering.md
CIP Design Guide references/cip-design.md
CIP Deliverables references/cip-deliverable-guide.md
CIP Styles references/cip-style-guide.md
CIP Prompts references/cip-prompt-engineering.md
Slides Create references/slides-create.md
Slides Layouts references/slides-layout-patterns.md
Slides Template references/slides-html-template.md
Slides Copy references/slides-copywriting-formulas.md
Slides Strategy references/slides-strategies.md
Banner Sizes & Styles references/banner-sizes-and-styles.md
Social Photos Guide references/social-photos-design.md
Icon Design Guide references/icon-design.md

Scripts

Script Purpose
scripts/logo/search.py Search logo styles, colors, industries
scripts/logo/generate.py Generate logos with Gemini AI
scripts/logo/core.py BM25 search engine for logo data
scripts/cip/search.py Search CIP deliverables, styles, industries
scripts/cip/generate.py Generate CIP mockups with Gemini
scripts/cip/render-html.py Render HTML presentation from CIP mockups
scripts/cip/core.py BM25 search engine for CIP data
scripts/icon/generate.py Generate SVG icons with Gemini 3.1 Pro

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Integration

External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。