notesgpt/design

디자인

통합 디자인 스킬: 브랜드, 토큰, 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

아이콘: 주요 스타일

스타일	최적 사용처
outlined	UI 인터페이스, 웹 앱
filled	모바일 앱, 네비게이션 바
duotone	마케팅, 랜딩 페이지
rounded	친근한 앱, 헬스케어
sharp	테크, 핀테크, 엔터프라이즈
flat	Material 디자인, 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×1080	FB 포스트	1200×630
IG 스토리	1080×1920	X 포스트	1200×675
IG 캐러셀	1080×1350	LinkedIn	1200×627
YT 썸네일	1280×720	Pinterest	1000×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.py	CIP 데이터용 BM25 검색 엔진
scripts/icon/generate.py	Gemini 3.1 Pro로 SVG 아이콘 생성

전제 조건

Python: 이 스킬은 Python 스크립트를 사용합니다. Windows에서는 python3 대신 python을 사용하세요 (예: 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