What is it?
로고 이미지, 텍스트 슬로건 또는 이모지 등 단일 소스에서 전문 웹 에셋을 생성하는 종합 도구입니다. 완전한 파비콘 세트, PWA 앱 아이콘 및 주요 플랫폼(Facebook, Twitter, LinkedIn)의 소셜 미디어 Open Graph 이미지를 생성합니다. 단일 입력을 웹사이트에 필요한 모든 아이콘 및 이미지로 변환하며, 내장된 검증, 접근성 확인 및 프레임워크별 통합 코드를 제공합니다.
How to use it?
스킬은 간소화된 워크플로우를 위해 Claude의 대화형 비주얼 UI를 사용합니다:
-
에셋 유형 선택 - 필요한 것에 대한 비주얼 선택기: 파비콘만, 앱 아이콘만, 소셜 이미지만 또는 모든 것
-
소스 제공 - 입력 방법 선택:
- 기존 로고/이미지 업로드
- 맞춤 색상으로 텍스트/슬로건에서 생성
- 큐레이션된 이모지 제안 사용(산업별로 구성된 60개 이상)
-
생성 및 검증 - 스킬이 자동으로:
- 필요한 모든 크기 생성(16×16부터 512×512까지)
- 파일 크기 및 치수 검증
- 접근성을 위한 WCAG 대비 준수 확인
- 적절한 구성으로 PWA manifest.json 생성
-
프레임워크 통합 - 프레임워크(Next.js, Astro 등)를 자동으로 감지하고 코드에 HTML 태그를 추가할 것을 제안
-
테스트 - 최종 확인을 위한 검증기 링크(realfavicongenerator.net 등) 제공
수동 이미지 편집 불필요 - 단일 입력부터 검증 및 통합 코드가 포함된 완전한 에셋 세트까지.
Key Features
- 완전한 에셋 생성 - 파비콘(16×16부터 96×96), 앱 아이콘(180×180부터 512×512), 소셜 이미지(1200×630, 1200×675)
- 다양한 입력 방법 - 이미지(로고), 텍스트(맞춤 배경), 이모지(60개 이상의 큐레이션된 제안)
- 대화형 비주얼 UI - 명확하고 빠른 선택을 위해 Claude의 AskUserQuestion을 사용한 질문 기반 워크플로우
- 포괄적인 검증 - 파일 크기, 치수, 형식, 접근성을 위한 WCAG 대비 준수
- PWA manifest 생성 - 아이콘, 색상 및 앱 설정으로 manifest.json 자동 생성
- 프레임워크 자동 감지 - Next.js, Astro 등을 감지하고 프레임워크별 통합 코드 제공
- 이모지 라이브러리 - 산업별로 구성된 60개 이상의 큐레이션된 이모지(기술, 식품, 상거래, 창의적, 데이터)
- 테스팅 검증기 링크 - 실제 시나리오에서 생성된 에셋을 테스트할 수 있는 URL 제공
Related Skills
More from DesignFrontend Design
The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns
Architecture Diagram Creator
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture
Flowchart Creator
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types