ckm:design

개요

ckm:design이란?

ckm:design은 브랜드 전반의 경험을 관통하는 시각 자산을 기획·제작할 수 있도록 돕는 통합 디자인 퍼스트 스킬입니다. 단순 코드 덤프가 아닌 UI/UX와 브랜드 워크플로에 초점을 맞추고, 구조화된 레퍼런스와 선택적인 로컬 스크립트를 결합해 다음 작업을 지원합니다.

• 브랜드 아이덴티티 및 비주얼 방향성
• 디자인 토큰 및 디자인 시스템 스펙
• shadcn/ui, Tailwind를 위한 UI 스타일링 가이드
• 로고 디자인 및 AI 로고 생성 (55가지 스타일)
• CIP(Corporate Identity Program) 산출물 및 목업
• HTML 기반 프레젠테이션 및 피치 덱(Chart.js 포함)
• 소셜/광고/웹/인쇄용 배너 디자인 (22가지 스타일, 전체 사이즈 매트릭스)
• AI 기반 SVG 아이콘 디자인 (15가지 스타일)
• 주요 플랫폼용 소셜 사진 및 마케팅 이미지

이 스킬은 풍부한 레퍼런스 자료와 데이터 테이블을 함께 제공하여, 에이전트가 사이즈 표나 브랜드 가이드를 일일이 찾아보지 않아도 곧바로 구현 가능한 수준의 구체적인 제안을 할 수 있도록 돕습니다.

ckm:design은 누구를 위한 스킬인가?

ckm:design은 다음과 같은 분들에게 특히 잘 맞습니다.

• 플로우, 컴포넌트, 토큰, 아트 디렉션 관점으로 대화하는 UI/UX 디자이너
• 코드와 디자인을 나란히 맞추면서 배너 사이즈, 아이콘 스펙, 슬라이드 HTML 구조를 정확히 알고 싶은 프론트엔드 개발자
• 로고, CIP 롤아웃, 소셜 캠페인, 피치용 슬라이드 덱을 기획하는 브랜드/마케팅 리드
• 전담 디자인 팀 없이도 엔드투엔드 브랜드 및 UI 가이던스가 필요한 창업자 혹은 소규모 팀

단순히 디자인 근거 없이 코드만 대량 생성하고 싶다면, 더 가벼운 엔지니어링 전용 스킬이 나을 수 있습니다. ckm:design은 시각적 완성도, 일관성, 브랜드 적합성이 중요한 상황을 위해 설계되었습니다.

ckm:design은 어떤 문제를 해결하나요?

포함된 레퍼런스와 데이터를 활용해 ckm:design은 에이전트가 다음을 수행하도록 돕습니다.

• 브랜드 산출물의 표준화 – 로고, 배너, 소셜 이미지, CIP 자산을 하나의 일관된 비주얼 시스템 아래에서 정렬합니다.
• 사이즈와 포맷을 처음부터 정확히 적용 – 소셜 미디어, Google Display Network, 웹 히어로, 인쇄물 등 플랫폼별 테이블을 기반으로 합니다.
• 대규모 CIP를 확장 가능하게 설계 – 업종, 스타일, 산출물을 구조적으로 매핑해 대규모 CIP 세트를 구성합니다.
• 디자인과 구현 사이의 간극 해소 – 브랜드 결정 사항을 디자인 토큰, CSS 변수, shadcn/ui, Tailwind 활용으로 자연스럽게 연결합니다.
• 빠른 프로토타이핑 – 본격적인 디자인 시스템 구축 전에도 검토 가능한 HTML 슬라이드 템플릿과 CIP 목업을 생성합니다.

---

사용 방법

1. ckm:design 스킬 설치하기

Claude 호환 스킬 환경에 상위 저장소에서 ckm:design을 설치합니다.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

이 명령은 nextlevelbuilder/ui-ux-pro-max-skill 저장소의 design 스킬을 로컬 ~/.claude/skills/design 디렉터리(또는 환경에 맞는 위치)로 가져옵니다.

설치 후 다음 파일/폴더를 확인할 수 있습니다.

• SKILL.md – 상위 수준 설명 및 라우팅 가이드
• data/ – CIP, 로고, 아이콘 스타일 관련 CSV 데이터셋
• references/ – 디자인 작업용 주요 지식 베이스
• scripts/ – CIP 및 아이콘 생성을 위한 선택적 Python 유틸리티

2. 디자인 라우팅 모델 이해하기

ckm:design은 디자인 작업의 진입점 역할을 하며, references/design-routing.md와 SKILL.md에 설명된 대로 특화 서브 스킬로 작업을 라우팅합니다.

핵심 디자인 도메인은 다음과 같습니다.

• Brand identity → 별도의 brand 스킬이 담당하는 경우가 많습니다.
• Design systems and tokens → design-system 스킬을 통해 처리합니다.
• UI implementation (shadcn/ui, Tailwind) → ui-styling 스킬로 라우팅합니다.
• Logo creation → 내장 로고 디자인 레퍼런스를 활용합니다.
• CIP design → 기업 아이덴티티 산출물 및 목업.
• Slides → Chart.js를 사용하는 HTML 프레젠테이션.
• Banner design → 소셜, 광고, 웹, 인쇄용 배너.
• Icon design → 스크립트를 활용한 SVG 아이콘 생성.

프롬프트에서 스킬의 argument-hint 패턴을 사용해 작업 유형을 힌트로 줄 수 있습니다.

ckm:design [design-type] [context]

예시:

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. UI/UX 및 브랜드 의사결정을 위해 레퍼런스 활용하기

ckm:design의 강점은 구조화된 레퍼런스 파일에 있습니다. 에이전트에게 스펙을 요청할 때 이 파일들을 기준 소스로 활용하세요.

UI/UX 및 디자인 시스템 기획

실제 구현은 design-system 또는 ui-styling으로 넘어갈 수 있지만, ckm:design을 사용해 다음과 같은 작업을 진행할 수 있습니다.

• 색상, 타이포그래피, 간격, 상태 등 토큰과 스펙을 디자인 레벨에서 논의
• 브랜드 컬러와 서체를 CSS variables 및 Tailwind config로 매핑
• 구현 전에 컴포넌트의 동작과 상태를 설계

에이전트는 ckm:design에서 얻은 상위 수준 디자인 의도를 코드 중심 스킬과 결합해 구현까지 이어갈 수 있습니다.

배너 및 캠페인 크리에이티브

캠페인 및 UI 배너 작업에는 references/banner-sizes-and-styles.md를 참고합니다.

• Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, 웹사이트, 이메일, 인쇄 포맷 등 플랫폼별 올바른 사이즈 선택
• 22가지 아트 디렉션 스타일 중 선택 (예: Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic)
• 다음과 같은 개별 배치 위치에 메시지와 레이아웃을 매핑하도록 에이전트에 요청
  • Facebook cover vs event cover
  • LinkedIn company cover vs personal banner
  • GDN billboard vs medium rectangle
  • Website hero vs blog header

캠페인 기획 프롬프트 예시:

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

CIP(Corporate Identity Program) 롤아웃

CIP 관련 지원은 다음 파일에서 다룹니다.

• references/cip-deliverable-guide.md – 완성도 높은 아이덴티티 시스템에 포함해야 할 항목
• references/cip-design.md – 50+ 산출물, 20 스타일, 20 업종을 데이터와 스크립트로 지원하는 방법
• references/cip-style-guide.md – 주요 스타일 아키타입 (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic 등)
• references/cip-prompt-engineering.md – 목업 생성용 프롬프트 구조

이를 활용해 다음을 수행할 수 있습니다.

• 명함, 사인물, 차량, 유니폼, 디지털 자산, 이벤트 등 리브랜딩의 범위 정의
• 각 산출물을 업종에 적합한 스타일 가이드에 정렬
• Gemini 또는 기타 이미지 엔진이 일관되게 해석할 수 있는 구조화된 목업 프롬프트 생성

고레벨 프롬프트 예시:

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. 스크립트로 CIP 브리프 및 목업 생성하기 (선택 사항)

개념 설계를 넘어, 포함된 Python 스크립트를 활용해 실제 CIP 목업 이미지를 만들고 싶다면 references/cip-design.md를 따라 진행하십시오.

Python 3가 설치되어 있고, 본인 툴체인에서 설명하는 대로 호환되는 Gemini 모델에 접근할 수 있어야 합니다.

4.1. CIP 데이터 검색 및 브리프 생성

BM25 기반 검색 스크립트를 사용해 산출물, 스타일, 업종을 탐색하고 초안 브리프를 생성합니다.

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

특정 도메인만 검색할 수도 있습니다.

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

data/cip/ 폴더의 CSV 파일에는 이 검색 유틸리티가 사용하는 산출물, 업종, 스타일, 목업 컨텍스트 데이터가 저장되어 있습니다.

4.2. CIP 목업 이미지 생성

references/cip-design.md에는 Gemini 기반 목업 생성을 위해 scripts/cip/generate.py를 사용하는 명령 예시가 포함되어 있습니다.

# Single deliverable mockup with logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set with logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

모델 키와 환경 설정은 각자 사용하는 인프라에 맞게 구성해야 합니다. ckm:design은 데이터 구조, 프롬프트 스캐폴딩, 스크립트 진입점만 제공하며, 모델 자체는 포함하지 않습니다.

4.3. CIP 결과를 HTML 프레젠테이션으로 렌더링

목업 데이터를 얻은 후에는 다음 명령으로 HTML 프레젠테이션을 생성할 수 있습니다.

python3 ~/.claude/skills/design/scripts/cip/render-html.py

이렇게 생성된 HTML 개요 페이지는 이해관계자에게 아이덴티티 시스템을 시각적으로 요약해 전달하는 데 활용할 수 있습니다.

5. AI를 활용해 로고 및 아이콘 디자인하기

ckm:design에는 로고와 아이콘 작업을 위한 특화 가이드와 스크립트도 포함되어 있습니다.

5.1. 로고 기획 및 프롬프트 엔지니어링

다음 파일을 참고하십시오.

• references/logo-design.md – 로고 구성의 기본 원칙
• references/logo-color-psychology.md – 브랜드 성격과 업종별 컬러 선택 가이드
• references/logo-style-guide.md – 55가지 로고 스타일 중 선택하는 방법
• references/logo-prompt-engineering.md – Gemini 기반 로고 생성용 추천 프롬프트 구조

이 레퍼런스를 바탕으로 에이전트에 다음을 요청할 수 있습니다.

• 기본형, 세로형, 아이콘 전용, 단색 버전 등 로고 시스템 정의
• 브랜드 전략에 맞는 컬러와 타이포그래피 선택
• 활용 가능한 로고 후보를 얻을 수 있을 만큼 구체적인 AI 프롬프트 초안 작성

내장 로고 기능은 CIP 및 배너 도구와 함께 사용하도록 설계되어, 브랜드 마크가 모든 접점에서 일관되게 유지되도록 돕습니다.

5.2. SVG 출력 기반 아이콘 디자인

references/icon-design.md에서는 scripts/icon/generate.py와 Gemini 3.1 Pro Preview를 활용해 AI 기반 SVG 아이콘을 생성하는 방법을 설명합니다.

명령 예시:

# Simple icons
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"

# Named icon in a category
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# Batch generation
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# Multiple sizes
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# Discover available styles and categories
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

이는 로고 및 CIP 자산과 동일한 비주얼 언어를 공유하는 일관된 아이콘 세트가 필요한 UI/UX 팀에 특히 유용합니다.

6. 마케팅용 HTML 슬라이드 덱 및 비주얼 제작

ckm:design에는 제품 데모, 세일즈 덱, 내부 발표 등에 적합한 슬라이드 디자인 레퍼런스 세트가 포함되어 있습니다.

• references/slides.md – 전체 슬라이드 시스템 개요
• references/slides-create.md – 아웃라인에서 덱으로 전개하는 방법
• references/slides-layout-patterns.md – 자주 쓰이는 페이지 레이아웃 패턴
• references/slides-copywriting-formulas.md – 명료하고 설득력 있는 메시지 프레임워크
• references/slides-strategies.md – 내러티브 구조 전략
• references/slides-html-template.md – Chart.js 연동 HTML 슬라이드 기본 템플릿

이를 통해 다음과 같은 작업을 진행할 수 있습니다.

• 에이전트에게 슬라이드 아웃라인 작성을 맡기고 각 섹션을 레이아웃 패턴에 매핑
• 브랜드 토큰과 컬러에 맞춘 HTML 슬라이드 덱 생성
• 지표 및 대시보드 페이지에 적합한 Chart.js 시각화 추가

프롬프트 예시:

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. 소셜 이미지 및 멀티 플랫폼 캠페인

references/social-photos-design.md는 소셜 이미지 및 멀티 플랫폼 자산 디자인에 대한 가이드를 제공합니다.

이 디자인 스킬을 통해 다음을 수행할 수 있습니다.

• Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads 등에서 프로필 사진, 커버 이미지, 게시물 템플릿을 일관되게 구성
• HTML-to-screenshot 워크플로를 사용해 타이포그래피와 레이아웃을 유지한 채 소셜 비주얼을 빠르게 반복 제작
• 모든 소셜 자산을 기본 브랜드 시스템과 CIP 체계에 자연스럽게 연결

---

FAQ

ckm:design이 잘 맞는 경우는 언제인가요?

ckm:design은 다음과 같은 상황에 특히 유용합니다.

• UI/UX, 브랜딩, CIP, 마케팅까지 이어지는 엔드투엔드 비주얼 방향성이 필요할 때
• 에이전트가 단순 CSS 스니펫이 아니라 디자인 토큰, 아트 디렉션, 브랜드 시스템 언어로 이야기하길 원할 때
• 리브랜딩, 신규 제품 출시, 디자인 시스템 롤아웃 등을 진행하면서 일관되고 레퍼런스 기반의 접근이 필요할 때
• 로고, 아이콘, CIP 목업, 소셜 이미지를 포함한 AI 이미지 생성과 인간 디자이너의 검토를 함께 활용하고자 할 때

ckm:design이 적합하지 않은 경우는 언제인가요?

다음과 같은 경우에는 최적의 선택이 아닐 수 있습니다.

• 디자인 요소 없이 백엔드나 알고리즘 문제 해결만 필요한 경우
• 브랜드 시스템 전체를 고려하지 않고, 원클릭 로고 생성기 같은 단일 단계 도구만 원할 때
• 선택적 Python 도구를 실행할 환경이나 의지가 전혀 없을 때 (스크립트 없이도 가이드로는 충분히 쓸 수 있지만, 이미지 생성 파이프라인은 직접 준비해야 합니다.)

ckm:design을 사용하려면 Figma 같은 특정 디자인 앱이 필수인가요?

필수는 아닙니다. ckm:design은 특정 도구에 종속되지 않는(tool-agnostic) 스킬입니다. 다음과 같은 환경 어디에나 적용할 수 있는 구조와 가이드를 제공합니다.

• UI/UX 레이아웃과 프로토타이핑을 위한 Figma 등 디자인 툴
• shadcn/ui, Tailwind를 사용하는 프론트엔드 코드베이스
• 프레젠테이션 툴 또는 HTML 기반 슬라이드
• 생성된 프롬프트와 스펙을 받아들일 수 있는 이미지 편집기나 AI 이미지 생성 파이프라인

기존 디자인 스택은 그대로 유지하면서, 그 위에 의사결정 및 스펙 정의 레이어로 ckm:design을 올려두는 방식으로 활용하면 됩니다.

Python 스크립트를 사용하지 않고도 ckm:design을 쓸 수 있나요?

가능합니다. ckm:design의 핵심 가치는 구조화된 레퍼런스와 데이터 파일에 있습니다.

• 에이전트를 통해 references/*.md, data/*.csv만으로도 충분히 기획과 스펙 정의를 진행할 수 있습니다.
• scripts/cip/, scripts/icon/의 스크립트는 목업과 SVG 생성을 자동화하고 싶은 팀을 위한 선택적 가속기입니다.

스크립트를 실행하지 않아도 다음을 얻을 수 있습니다.

• 정확한 사이즈, 스타일, 산출물 목록
• 자체 AI 이미지 도구에서 바로 사용할 수 있는 프롬프트 프레임워크
• 브랜드, UI, 마케팅 정렬을 위한 일관된 가이드

ckm:design은 다른 디자인 스킬들과 어떻게 연동되나요?

해당 저장소는 협업하는 여러 디자인 스킬로 구성되어 있습니다. ckm:design은 이들 사이에서 다음 역할을 수행합니다.

• 시각 작업 전반에 대한 라우팅 및 오케스트레이션 레이어 역할
• 심층 브랜드 아이덴티티 작업은 brand 스킬에 위임
• 토큰 아키텍처와 컴포넌트 스펙은 design-system에 위임
• shadcn/ui, Tailwind 클래스 등 구현 디테일은 ui-styling에 위임

실제 사용 흐름은 다음과 같습니다.

1. ckm:design에서 먼저 시각적 문제를 정의하고 적절한 서브 스킬을 선택합니다.
2. 세부 실행은 해당 특화 스킬에서 진행합니다.
3. 최종 산출물이 전체 브랜드 및 CIP 계획과 일관되는지 검토할 때 다시 ckm:design으로 돌아옵니다.

ckm:design을 설치한 후, 가장 먼저 무엇을 보면 좋을까요?

빠르면서도 전체를 파악하고 싶다면 다음 순서로 살펴보는 것을 추천합니다.

1. SKILL.md를 열어 스킬의 범위와 주요 워크플로를 파악합니다.
2. references/design-routing.md를 검토해 작업이 각 디자인 스킬 패밀리로 어떻게 매핑되는지 확인합니다.
3. 당장 필요한 작업에 따라 아래 핵심 레퍼런스를 훑어봅니다.
   • 캠페인 및 배너 작업: references/banner-sizes-and-styles.md
   • CIP/기업 아이덴티티 시스템: references/cip-deliverable-guide.md, references/cip-style-guide.md
   • 로고 프로젝트: references/logo-design.md, references/logo-color-psychology.md
   • 슬라이드/프레젠테이션: references/slides.md, references/slides-html-template.md
   • 소셜 캠페인: references/social-photos-design.md

이 정도만 익혀도 UI/UX, 브랜딩, 마케팅 워크플로에 ckm:design을 어떻게 적용할지 감을 잡을 수 있으며, 이후 필요에 따라 선택적인 스크립트로 확장할 수 있습니다.