Community이미지github.com

ElKrapulito/calucha-landing

포괄적인 디자인 스킬: 브랜드 아이덴티티, 디자인 토큰, UI 스타일링, 로고 생성(55가지 스타일, Gemini AI), 기업 아이덴티티 프로그램(CIP, 50개 산출물, CIP 목업), HTML 프레젠테이션(Chart.js), 배너 디자인(22가지 스타일, 소셜/광고/웹/인쇄), 아이콘 디자인(15가지 스타일, SVG, Gemini 3.1 Pro), 소셜 포토(HTML→스크린샷, 멀티 플랫폼) 등을 제공합니다.

calucha-landing란 무엇인가요?

이 스킬은 AI 에이전트가 브랜드 아이덴티티 구축부터 디자인 시스템 구현, 로고 생성, 기업 아이덴티티 프로그램(CIP) 산출물 제작, HTML 프레젠테이션, 배너, 아이콘, 소셜 미디어 이미지까지 모든 디자인 작업을 수행할 수 있도록 지원하는 통합 디자인 스킬입니다. Claude Code, Cursor, Codex 등 다양한 AI 코딩 도구에서 사용할 수 있으며, Python 스크립트 기반으로 Gemini AI 모델을 활용해 로고, 아이콘 등을 생성합니다. 55개 이상의 로고 스타일, 22개 배너 스타일, 15개 아이콘 스타일 등 방대한 레퍼런스를 제공하며, 각 작업은 서브 스킬로 라우팅되어 전문성을 높입니다. 브랜드, 디자인 시스템, UI 스타일링 등 외부 스킬과 연동하여 완전한 브랜드 패키지를 제작할 수 있으며, 모든 디자인 산출물은 스크린샯이나 HTML 형태로 제공됩니다.

지원 대상✓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) 산출물
  • 프레젠테이션 및 피치 데크
  • 소셜 미디어, 광고, 웹, 인쇄용 배너 디자인
  • 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

배너 디자인 (내장)

소셜, 광고, 웹, 인쇄 전반에 걸친 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기술, 핀테크, 엔터프라이즈
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