스킬 자체의 표현으로
브랜드 아이덴티티, 디자인 토큰, shadcn/ui 및 Tailwind를 활용한 UI 스타일링, 로고 생성(Gemini, Atlas Cloud, 또는 MuAPI를 통한 55가지 스타일), 50가지 산출물로 구성된 기업 아이덴티티 프로그램(CIP), Chart.js를 사용한 HTML 프레젠테이션, 배너 디자인(소셜, 광고, 웹, 인쇄용 22가지 아트 디렉션 스타일), 아이콘 디자인(15가지 스타일, Gemini 3.1 Pro를 통한 SVG 출력), 그리고 Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads 전반의 소셜 미디어 포토 디자인을 포괄하는 통합 디자인 스킬입니다. brand, design-system, ui-styling을 위한 외부 하위 스킬로 라우팅하는 동시에, Python 스크립트, AI 생성, HTML-to-screenshot 내보내기를 통해 로고, CIP, 슬라이드, 배너, 아이콘, 소셜 포토를 위한 내장 워크플로를 제공합니다.
산출물
- chrome-devtools를 통해 내보낸, 정확한 플랫폼 크기의 배너 PNG 스크린샷
- 선택적 멀티사이즈 내보내기와 배치 변형이 가능한 15가지 스타일의 SVG 아이콘 파일
- 정리된 에셋 디렉터리에 저장된, 플랫폼별 크기의 소셜 미디어 이미지
작동 방식
- 01작업 유형별 라우팅
이 스킬은 브랜드 아이덴티티와 보이스는 brand 서브 스킬로, 토큰과 스펙은 design-system으로, shadcn/ui와 Tailwind 코드는 ui-styling으로 전달하며, 로고, CIP, 슬라이드, 배너, 아이콘, 소셜 포토는 내장 워크플로로 직접 처리합니다.
- 02AI 제공자를 이용한 로고 생성
Python 스크립트를 실행하여 55가지 스타일, 30가지 색상 팔레트, 25가지 업종 가이드를 검색한 다음, Gemini Nano Banana, Atlas Cloud, 또는 MuAPI를 통해 흰색 배경의 로고를 생성합니다.
- 03목업을 포함한 CIP 산출물 제작
Gemini Flash 또는 Pro 모델을 사용하여 50가지 산출물에 대한 기업 아이덴티티 프로그램 목업을 생성하고, 필요에 따라 로고를 오버레이한 뒤 결과물의 HTML 프레젠테이션을 렌더링합니다.
- 04전략적 HTML 프레젠테이션 제작
슬라이드 생성 워크플로 레퍼런스를 로드하여 Chart.js 통합, 디자인 토큰, 카피라이팅 공식을 활용한 프레젠테이션을 제작합니다.
- 05HTML/CSS로 배너 디자인하기
요구 사항을 수집하고 ui-ux-pro-max를 통해 Pinterest에서 리서치한 후, frontend-design과 ai-artist/ai-multimodal로 시각 요소를 활용한 HTML/CSS 배너를 디자인하고, chrome-devtools를 통해 정확한 크기로 내보냅니다.
- 06스크린샷 내보내기 및 검증
chrome-devtools 또는 Playwright를 사용하여 2배 디바이스 스케일 팩터로 정확한 픽셀 크기의 디자인을 스크린샷으로 캡처한 후, 최종 내보내기 전에 시각적으로 검토하여 레이아웃 문제를 수정합니다.