여러 AI 기반 아트 디렉션 옵션을 통해 소셜 미디어, 광고, 웹용 다양한 형식의 배너를 생성합니다.
npx clawhub@latest install banner-design요구 사항
배너 디자인은 구조화된 창의적 스킬로, Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, 웹사이트 히어로 이미지, 인쇄물 등 모든 주요 플랫폼에 걸쳐 즉시 제작 가능한 배너를 만들어냅니다. 각 요청에 대해 HTML/CSS로 구성된 AI 생성 비주얼을 활용하여 다양한 아트 디렉션 옵션을 생성하고, 정확한 플랫폼 치수에 맞는 픽셀 퍼펙트 PNG를 내보냅니다. 안전 영역, 명도 대비 비율, 텍스트 제한, 타이포그래피 제약 등 실제 디자인 규칙을 적용하여 단순한 컨셉 목업이 아닌 캠페인에 바로 사용 가능한 결과물을 제공합니다.
각 디자인 요청은 2~3가지의 독특한 아트 디렉션 변형(기본값: 3가지)을 생성하며, 미니멀리스트, 굵은 타이포그래피, 그라디언트, 글래스모피즘, 네온, 기하학적, 레트로 등 다양한 스타일을 포함합니다. 이를 통해 하나의 방향을 확정하기 전에 여러 방향을 비교할 수 있습니다.
배경 패턴, 그라디언트, 빠른 반복 작업에는 2K 해상도의 빠른 Standard(Flash) 모델이 사용됩니다. 히어로 일러스트레이션, 포토리얼리스틱 장면, 복잡한 제품 촬영에는 4K 해상도의 Pro 모델이 사용됩니다. Ckmbanner Design 스킬은 복잡도에 따라 각 요소를 적절한 모델로 자동 라우팅합니다.
내장된 크기 참조는 Facebook 커버, Twitter/X 헤더, LinkedIn, YouTube 채널 아트, Instagram 스토리 및 게시물, Google Ads 리더보드 및 미디엄 렉탱글, 웹사이트 히어로를 포함합니다. HTML/CSS 배너는 정확한 픽셀 크기로 렌더링되고 스크린샷이 캡처됩니다.
모든 배너는 안전 영역 규칙(중앙 70–80% 영역에 핵심 콘텐츠 배치), 단일 CTA, 최대 두 가지 서체, 4.5:1 명암 대비율, 그리고 Meta의 텍스트 영역 20% 미만 가이드라인을 준수합니다. 인쇄 출력물은 300 DPI, CMYK 색상, 3–5mm 블리드 설정으로 생성됩니다.
HTML/CSS 구성이 완료되면 각 배너는 Chrome DevTools를 사용하여 지정된 이름의 PNG 파일로 자동 스크린샷됩니다. 5MB를 초과하는 파일은 Sharp를 통해 압축됩니다. 출력 파일명은 케밥 케이스(kebab-case) 형식인 {style}-{width}x{height}.png 규칙을 따르며, 캠페인 폴더별로 그룹화됩니다.
docs/brand-guidelines.md에 저장된 브랜드 가이드라인은 inject-brand-context.cjs를 통해 모든 배너에 자동으로 주입되며, 수동으로 다시 입력하지 않아도 모든 변형에서 색상, 폰트, 로고 배치가 일관되게 유지됩니다.
캠페인 헤드라인, CTA, 그리고 목표 플랫폼(예: Facebook 커버 + Instagram 게시물 + Twitter/X 헤더)을 Ckmbanner Design 스킬에 전달하세요. 스킬이 디자인 레퍼런스를 조사하고, 각 사이즈별로 세 가지 아트 디렉션 옵션을 생성한 후, 바로 업로드할 수 있는 이름이 지정된 PNG 파일을 제공합니다.
광고 문구와 브랜드 에셋을 제공하세요. Ckmbanner Design 스킬이 리더보드(728×90)와 미디엄 레크탱글(300×250) 한 쌍을 제작하며, Meta 및 Google 정책을 준수하기 위해 텍스트 영역을 20% 미만으로 유지한 후, 광고 플랫폼에 바로 업로드할 수 있도록 압축된 PNG 파일로 내보냅니다.
제품 또는 메시지와 선호하는 비주얼 분위기를 설명해 주세요. Ckmbanner Design 스킬이 타이포그래피가 오버레이된 1920×600~1080 풀 블리드 히어로 이미지를 생성하며, 반응형 크롭에 최적화된 안전 영역이 적용되고, 프론트엔드에 바로 사용할 수 있는 고해상도 PNG로 내보냅니다.
실제 치수를 지정하면 Ckmbanner Design 스킬이 3~5mm 블리드가 포함된 300 DPI CMYK 파일을 출력합니다 — 인쇄 업체에 바로 전달하기에 적합합니다. 스타일 옵션은 이벤트 유형에 따라 강렬한 에디토리얼 레이아웃부터 레트로/빈티지 스타일까지 다양하게 제공됩니다.
ai-multimodal 스킬을 통해 AI 이미지 생성을 지원합니다 (2K 출력에는 Gemini 2.5 Flash Image, 4K 출력에는 Gemini 3 Pro Image Preview 사용).ui-ux-pro-max 스킬 — 아트 디렉션 결정을 위한 디자인 인텔리전스를 제공합니다.frontend-design 스킬 — HTML/CSS 배너 레이아웃을 렌더링합니다.ai-artist 스킬 — 이미지 생성을 위한 6,000개 이상의 프롬프트 참고 예시를 제공합니다.chrome-devtools 스킬 — HTML 배너를 정확한 플랫폼 크기로 PNG 스크린샷으로 캡처합니다.ai-multimodal 스킬 — 이미지 생성 및 내보낸 미리보기 표시를 처리합니다.npx clawhub@latest install banner-designnpx clawhub@latest install banner-design요구 사항
리뷰를 작성하려면 로그인
아직 리뷰가 없습니다. 첫 번째로 경험을 공유해 보세요!