Community影像github.com

ElKrapulito/calucha-landing

全方位的設計技能：品牌識別、設計符號、UI 樣式、Logo 生成（55 種風格、Gemini AI）、企業識別系統（50 項交付物、CIP 模型）、HTML 簡報（Chart.js）、橫幅設計（22 種風格，適用社群/廣告/網頁/印刷）、圖示設計（15 種風格、SVG、Gemini 3.1 Pro）、社群照片（HTML→截圖，多平台）。適用於 Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

calucha-landing 是什麼？

這是一個統一的設計技能，將品牌、UI 和視覺生成的眾多面向整合為一個可操作的 AI 代理工具，主要針對 Claude Code 和 Cursor 等平台。此技能透過內建的 Python 腳本支援完整的設計工作流程：使用 Gemini AI 生成 55 種風格的 Logo、為 20 種風格與 20 個行業產出含 50 項交付物的企業識別系統 (CIP) 模型、使用 Chart.js 建立可自訂的 HTML 簡報、設計橫跨社群媒體、廣告、網頁和印刷的橫幅、利用 Gemini 3.1 Pro 產生 15 種風格的 SVG 圖示，以及為多個社群平台建立照片。其核心的 SKILL.md 文件作為一個路由器，串聯外部技能（品牌、設計系統、UI 樣式）和內建子技能（Logo、CIP、簡報、橫幅、圖示、社群照片），並提供工作流程、腳本參考和設定指南，讓開發者可以部署一個強大的、整合 AI 的設計系統。

相容平台✓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 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

設計

統一的設計技能：品牌、符號、UI、Logo、CIP、簡報、橫幅、社群照片、圖示。

使用時機

  • 品牌識別、調性、資產
  • 設計系統符號與規格
  • 使用 shadcn/ui + Tailwind 進行 UI 樣式設計
  • Logo 設計與 AI 生成
  • 企業識別系統 (CIP) 交付物
  • 簡報與提案簡報
  • 社群媒體、廣告、網頁、印刷用的橫幅設計
  • Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 的社群照片

子技能路由

任務子技能詳細資訊
品牌識別、調性、資產brand外部技能
符號、規格、CSS 變數design-system外部技能
shadcn/ui、Tailwind、程式碼ui-styling外部技能
Logo 建立、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

Logo 設計（內建）

擁有超過 55 種風格、30 種色彩調色盤與 25 種行業指南。使用 Gemini Nano Banana 模型。

Logo：生成設計簡報

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

Logo：搜尋風格/色彩/行業

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：使用 AI 生成

務必以白色背景產出 Logo 圖片。

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：生成模型

# 使用 Logo（推薦）
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

# 不使用 Logo
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

**提示：**如果尚無 Logo，請先使用上方的 Logo 設計章節。

簡報（內建）

策略性 HTML 簡報，整合 Chart.js、設計符號與文案撰寫公式。

請載入 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、科技
粗體字型公告
漸層現代品牌
照片基底生活風格、電商
幾何科技、金融科技
玻璃擬態SaaS、應用程式
霓虹/賽博龐克遊戲、活動

橫幅：設計規則

  • 安全區域：關鍵內容放在中央 70-80% 範圍內
  • 每個橫幅一個 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

圖示：熱門風格

風格最佳用途
outlined（輪廓）UI 介面、網頁應用程式
filled（實心）行動應用程式、導覽列
duotone（雙色調）行銷、登陸頁面
rounded（圓角）友善應用程式、健康
sharp（尖銳）科技、金融科技、企業
flat（扁平）Material Design、Google-style
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 技能建立待辦事項；平行子代理處理獨立工作
  2. 分析 — 解析提示：主題、平台、風格、品牌背景、內容元素
  3. 發想 — 提出 3-5 個概念，透過 AskUserQuestion 呈現
  4. 設計 — /ckm:brand → /ckm:design-system → 隨機呼叫 /ck:ui-ux-pro-max 或 /ck:frontend-design；每個概念 × 每個尺寸產出 HTML
  5. 匯出 — 使用 chrome-devtools 或 Playwright 以精確像素尺寸（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. Logo → scripts/logo/generate.py → 生成 Logo 變體
  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
Logo 設計指南references/logo-design.md
Logo 風格references/logo-style-guide.md
Logo 色彩references/logo-color-psychology.md
Logo 提示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搜尋 Logo 風格、色彩、行業
scripts/logo/generate.py使用 Gemini AI 生成 Logo
scripts/logo/core.pyLogo 資料的 BM25 搜尋引擎
scripts/cip/search.py搜尋 CIP 交付物、風格、行業
scripts/cip/generate.py使用 Gemini 生成 CIP 模型
scripts/cip/render-html.py從 CIP 模型渲染 HTML 簡報
scripts/cip/core.pyCIP 資料的 BM25 搜尋引擎
scripts/icon/generate.py使用 Gemini 3.1 Pro 生成 SVG 圖示

先決條件

**Python：**此技能使用 Python 腳本。在 Windows 上，請使用 python 代替 python3（例如，使用 python scripts/logo/search.py 而非 python3 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 使用者注意：**在需要的地方使用 python 代替 pip（例如，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