claude-designlisted
Install: claude install-skill Yoodaddy0311/artibot
# Claude Design 연동
## When This Skill Applies
- 마케팅 랜딩페이지 프로토타입 제작
- 이메일 캠페인 템플릿 디자인
- 소셜 미디어 카드 / 배너 에셋 생성
- 프레젠테이션 슬라이드 시각화
- 브랜드 디자인 시스템에서 컴포넌트 추출
- 디자인 결과물을 Claude Code로 핸드오프
## 연관 스킬
- [`presentation-design`](../presentation-design/SKILL.md) — 슬라이드 덱 / 피치덱 내러티브 설계
- [`brand-guidelines`](../brand-guidelines/SKILL.md) — 브랜드 컬러, 폰트, 비주얼 아이덴티티
- [`image-generation`](../image-generation/SKILL.md) — AI 이미지 소스 생성 (디자인 원소 입력용)
---
## Core Guidance
### Claude Design 워크플로우 개요
```
Brand Input → Design Brief → claude.ai/design → Asset Export → Handoff Bundle
| |
Brand Guidelines Claude Code / Dev
```
### 1. 디자인 브리프 작성
Claude Design에 전달할 브리프는 다음 요소를 포함해야 합니다:
| 요소 | 내용 | 예시 |
|------|------|------|
| **에셋 타입** | 만들 에셋 종류 | 랜딩페이지 히어로 섹션 |
| **브랜드 컨텍스트** | 컬러, 폰트, 톤 | 메인 컬러 #2D5BFF, Pretendard |
| **목표 메시지** | 핵심 카피 | "전환율 30% 향상" |
| **레이아웃 힌트** | 구조 지시 | 2-column, CTA 우측 배치 |
| **참조 URL** | 벤치마크 레퍼런스 | 유사 브랜드 URL |
**브리프 템플릿:**
```
Design Asset Brief
==================
Type: [landing-page | email-template | social-card | presentation]
Format: [1200×630px | 600px-wide | 1920×1080px | 16:9]
Brand: [primary color, font, logo reference]
Message: [main headline, subheadline, CTA text]
Tone: [professional | playful | urgent | minimal]
Reference: [URL or description of visual direction]
Constraints: [any technical or brand constraints]
```
###