Community图像github.com

ElKrapulito/calucha-landing

全面的设计技能：品牌标识、设计令牌、UI 样式、标志生成（55 种风格，Gemini AI）、企业形象计划（50 个交付件，CIP 样机）、HTML 演示文稿（Chart.js）、横幅设计（22 种风格，社交媒体/广告/网页/印刷）、图标设计（15 种风格，SVG，Gemini 3.1 Pro）、社交媒体照片（HTML→截图，多平台）。

calucha-landing 是什么？

该技能是一个统一的设计工具集，专为需要从品牌标识到社交媒体照片全流程设计的开发者或 AI 代理用户打造。它支持多种平台（Facebook、Twitter、LinkedIn、YouTube、Instagram 等），涵盖了标志生成（55 种风格，利用 Gemini AI）、企业形象计划（CIP，50 个交付件）、HTML 演示文稿（集成 Chart.js）、横幅设计（22 种艺术方向）、图标设计（15 种风格，SVG 输出）以及社交媒体图片创建。技能通过内置的 Python 脚本（如 `logo/generate.py`、`cip/generate.py`）与外部子技能（如 `brand`、`design-system`、`ui-styling`）结合工作，并提供详细的子技能路由表，确保用户能根据任务快速选择合适的工具。最终设计通过 HTML/CSS 创建，并利用 `chrome-devtools` 截图导出为精确尺寸的 PNG，支持高分辨率输出。

兼容平台✓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、标志、CIP、幻灯片、横幅、社交媒体照片、图标。

何时使用

  • 品牌标识、语调、资产
  • 设计系统令牌与规格
  • 使用 shadcn/ui + Tailwind 进行 UI 样式设计
  • 标志设计与 AI 生成
  • 企业形象计划 (CIP) 交付件
  • 演示文稿与推介资料
  • 社交媒体、广告、网页、印刷品的横幅设计
  • Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 的社交媒体照片

子技能路由

任务子技能详情
品牌标识、语调、资产brand外部技能
令牌、规格、CSS 变量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

# 专业模型（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

提示： 如果没有标志，请首先使用上方的“标志设计”部分。

幻灯片（内置）

战略性 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

图标：热门风格

风格最佳用途
outlinedUI 界面、网页应用
filled移动应用、导航栏
duotone营销、着陆页
rounded友好型应用、健康
sharp科技、金融科技、企业
flatMaterial Design、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 按精确像素截图（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.py使用 Gemini AI 生成标志
scripts/logo/core.py标志数据的 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