Community画像github.com

ElKrapulito/calucha-landing

包括的なデザインスキル：ブランドアイデンティティ、デザイントークン、UIスタイリング、ロゴ生成（55スタイル、Gemini AI）、コーポレートアイデンティティプログラム（50成果物、CIPモックアップ）、HTMLプレゼンテーション（Chart.js）、バナーデザイン（22スタイル、ソーシャル/広告/Web/印刷対応）、アイコンデザイン（15スタイル、SVG、Gemini 3.1 Pro）、ソーシャル写真（HTML→スクリーンショット、マルチプラットフォーム）。アクション：ロゴデザイン、CIP作成、モックアップ生成、スライド作成、バナー作成、アイコン生成、ソーシャル写真作成、ソーシャルメディアイメージ、ブランドアイデンティティ、デザインシステム。対応プラットフォーム：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

calucha-landing とは？

このスキルは、AIエージェント（Claude Code、Cursor、Codexなど）向けに設計された統一デザインスキルです。ブランドアイデンティティの策定から、デザイントークンやCSS変数を用いたデザインシステム構築、shadcn/ui + TailwindによるUIスタイリングまで、デザインプロセス全体をカバーします。特に、Gemini AI（Flash/Proモデル）を活用したロゴ生成（55スタイル）、コーポレートアイデンティティプログラム（CIP）の50種類以上の成果物モックアップ、Chart.jsを用いたHTMLプレゼンテーション作成、22のアートディレクションスタイルに対応したバナーデザイン、15スタイルのSVGアイコン生成、そしてHTML/CSSをスクリーンショットに変換するマルチプラットフォーム向けソーシャル写真作成が内蔵されています。各サブスキルはルーティングテーブルで整理されており、外部スキル（brand、design-system、ui-styling）とも連携します。このスキルは、PythonスクリプトとGemini APIを使用し、Windows環境でも動作するよう設計されています。

対応✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/ElKrapulito/calucha-landing/tree/HEAD/.claude/skills/design

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

デザイン

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

使用タイミング

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

サブスキルルーティング

タスクサブスキル詳細
ブランドアイデンティティ、ボイス、アセットbrand外部スキル
トークン、仕様、CSS変数design-system外部スキル
shadcn/ui、Tailwind、コードui-styling外部スキル
ロゴ作成、AI生成ロゴ（内蔵）references/logo-design.md
CIPモックアップ、成果物CIP（内蔵）references/cip-design.md
プレゼンテーション、ピッチデッキスライド（内蔵）references/slides.md
バナー、カバー、ヘッダーバナー（内蔵）references/banner-sizes-and-styles.md
ソーシャルメディア画像/写真ソーシャル写真（内蔵）references/social-photos-design.md
SVGアイコン、アイコンセットアイコン（内蔵）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

バナーデザイン（内蔵）

ソーシャル、広告、Web、印刷に対応した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つにつき1つのCTA、右下、最小高さ44px
  • フォントは最大2種類、ボディ最小16px、見出し32px以上
  • 広告の場合、テキストは20%未満（Metaはペナルティを課す）
  • 印刷：300 DPI、CMYK、3～5mmの塗り足し

アイコンデザイン（内蔵）

15スタイル、12カテゴリ。Gemini 3.1 Pro Previewが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

アイコン：トップスタイル

スタイル最適な用途
outlinedUIインターフェース、Webアプリ
filledモバイルアプリ、ナビゲーションバー
duotoneマーケティング、ランディングページ
rounded親しみやすいアプリ、ヘルスケア
sharpテクノロジー、フィンテック、エンタープライズ
flatマテリアルデザイン、Googleスタイル
gradientモダンブランド、SaaS

モデル: gemini-3.1-pro-preview — テキストのみの出力（SVGはXMLテキスト）。画像生成APIは不要。

ソーシャル写真（内蔵）

マルチプラットフォーム対応のソーシャル画像デザイン：HTML/CSS → スクリーンショット書き出し。ui-ux-pro-max、brand、design-system、chrome-devtools スキルを使用。

サイズ、テンプレート、ベストプラクティスについては references/social-photos-design.md を読み込むこと。

ソーシャル写真：ワークフロー

  1. 調整 — project-management スキルでTODOタスクを作成；独立した作業は並列サブエージェントに任せる
  2. 分析 — プロンプトを解析：対象、プラットフォーム、スタイル、ブランドコンテキスト、コンテンツ要素
  3. 発案 — 3～5のコンセプトを作成し、AskUserQuestion で提示
  4. デザイン — /ckm:brand → /ckm:design-system → ランダムに /ck:ui-ux-pro-max または /ck:frontend-design を呼び出す；アイデア×サイズごとにHTMLを作成
  5. 書き出し — chrome-devtools またはPlaywrightで正確なpx（2x deviceScaleFactor）でスクリーンショット
  6. 検証 — Chrome MCPまたは chrome-devtools スキルを使用して、書き出したデザインを視覚的に確認；レイアウト/スタイリングの問題を修正して再書き出し
  7. 報告 — デザイン決定事項を含むサマリーを plans/reports/ に出力
  8. 整理 — assets-organizing スキルを呼び出して、出力ファイルとレポートを整理

ソーシャル写真：主要サイズ

プラットフォームサイズ（px）プラットフォームサイズ（px）
IG投稿1080×1080FB投稿1200×630
IGストーリー1080×1920X投稿1200×675
IGカルーセル1080×1350LinkedIn1200×627
YTサムネイル1280×720Pinterest1000×1500

ワークフロー

完全ブランドパッケージ

  1. ロゴ → scripts/logo/generate.py → ロゴバリエーションを生成
  2. CIP → scripts/cip/generate.py --logo ... → 成果物モックアップを作成
  3. プレゼンテーション → references/slides-create.md を読み込み → ピッチデッキを構築

新しいデザインシステム

  1. ブランド（brandスキル） → カラー、タイポグラフィ、ボイスを定義
  2. トークン（design-systemスキル） → セマンティックトークンレイヤーを作成
  3. 実装（ui-stylingスキル） → Tailwind、shadcn/uiを設定

リファレンス

トピックファイル
デザインルーティングreferences/design-routing.md
ロゴデザインガイドreferences/logo-design.md
ロゴスタイルreferences/logo-style-guide.md
ロゴカラーreferences/logo-color-psychology.md
ロゴプロンプトreferences/logo-prompt-engineering.md
CIPデザインガイドreferences/cip-design.md
CIP成果物references/cip-deliverable-guide.md
CIPスタイルreferences/cip-style-guide.md
CIPプロンプトreferences/cip-prompt-engineering.md
スライド作成references/slides-create.md
スライドレイアウトreferences/slides-layout-patterns.md
スライドテンプレートreferences/slides-html-template.md
スライドコピーreferences/slides-copywriting-formulas.md
スライド戦略references/slides-strategies.md
バナーサイズとスタイルreferences/banner-sizes-and-styles.md
ソーシャル写真ガイドreferences/social-photos-design.md
アイコンデザインガイドreferences/icon-design.md

スクリプト

スクリプト目的
scripts/logo/search.pyロゴスタイル、カラー、業種を検索
scripts/logo/generate.pyGemini AIでロゴを生成
scripts/logo/core.pyロゴデータ用BM25検索エンジン
scripts/cip/search.pyCIP成果物、スタイル、業種を検索
scripts/cip/generate.pyGeminiでCIPモックアップを生成
scripts/cip/render-html.pyCIPモックアップからHTMLプレゼンテーションをレンダリング
scripts/cip/core.pyCIPデータ用BM25検索エンジン
scripts/icon/generate.pyGemini 3.1 ProでSVGアイコンを生成

前提条件

Python: このスキルはPythonスクリプトを使用します。Windowsでは、python3 の代わりに python を使用してください（例：python3 scripts/logo/search.py の代わりに python scripts/logo/search.py）。

Pythonがインストールされているか確認：

python3 --version || python --version

セットアップ

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

Windowsの注意: 必要に応じて pip の代わりに python を使用してください（例：python -m pip install ...）。

統合

外部サブスキル: brand、design-system、ui-styling 関連スキル: frontend-design、ui-ux-pro-max、ai-multimodal、chrome-devtools

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

ElKrapulito/calucha-landing

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

ElKrapulito/calucha-landing

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

ElKrapulito/calucha-landing

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

ElKrapulito/calucha-landing

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

ElKrapulito/calucha-landing

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

ElKrapulito/calucha-landing

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills