오리지널 디자인 (Original Design)

인터랙티브하고 질문 주도적인 세션을 통해 제품이나 주제를 완전한 디자인 언어로 변환하세요. 이는 모든 화면, 프레임, 아이콘, 일러스트레이션, 애니메이션이 하나의 '유물'로써 그려지는 일관된 시각적 세계를 만드는 것입니다. 완성된 결과물은 디자인 언어 브리프(Design Language Brief) 형태로 제공됩니다. 이 스킬은 인포그래픽, 비디오 스토리보드, 웹사이트, 모바일 앱 UI/UX 등 모든 시각적 결과물에 적용할 수 있습니다.

지배 원칙: 독창성은 '독특함'이 아니라 '하나의 핵심 아이디어를 중심으로 내부적으로 일관성'을 갖추는 것입니다. "이게 어떻게 독특해 보이게 하지?"라고 묻지 말고, "핵심 아이디어의 시각적 표현은 무엇인가?"라고 물으세요. 이 스킬이 강제하는 가장 큰 사고 전환: 화면을 디자인하지 마세요. 세계를 디자인하세요. 그 외 모든 것은 그 세계의 요소일 뿐입니다.

사용 시기 / 사용하지 말아야 할 시기

사용자는 독창적인 시각적 아이덴티티 또는 아트 디렉션이 필요하거나, 기존 디자인이 평범하거나 AI 기본값처럼 보여 하나의 통일된 아이디어가 필요할 때 사용하세요.
실용적인 브랜드 스타일 가이드(팔레트, 폰트, 에셋 생성을 위한 분위기)가 필요하고 독창적인 세계가 필요하지 않은 경우 → skills/creative/creative-strategist; 이 스킬의 브리프가 그 스킬의 입력이 될 수 있습니다.
디자인 언어가 이미 존재하고 사용자가 에셋만 필요로 하는 경우 → 해당 미디어의 제작 스킬로 바로 이동하세요(9단계 참조).
문제가 시각적 아이덴티티보다 UI 구조나 사용성에 있는 경우 → skills/frontend-design/frontend-orchestrator.

이 스킬 실행 방법 (먼저 읽으세요)

이것은 양식 제출이 아닌, 진행자가 이끄는 대화입니다. 다음 규칙을 따르세요:

한 번에 한 단계씩. 현재 단계에 집중된 질문(들)을 하고, 답변을 기다린 후, 한두 문장으로 요약하여 반영한 다음 다음 단계로 넘어가세요. 일곱 단계를 한꺼번에 붙여넣지 마세요.
항상 추천을 제시하세요. 모든 질문에 대해 2~4개의 구체적인 옵션을 제안하고(첫 번째는 "(추천)" 표시) 사용자가 처음부터 창작해야 하는 부담을 덜어주세요. 사용자는 자유롭게 답변할 수 있습니다.
호스트가 지원하는 경우 구조화된 질문을 사용하세요. Claude Code에서는 옵션 기반 단계에 AskUserQuestion 도구를 사용하는 것이 좋습니다. 다른 에이전트에서는 간단한 레이블이 지정된 옵션 목록과 함께 일반 텍스트로 질문하세요.
1.5단계와 6단계에서 웹에서 실시간 시각적 영감을 수집하세요. (references/inspiration-browsing.md 참조). 호스트 에이전트에 맞는 브라우징 방법을 선택하세요.
진행하면서 결정 사항을 실행 중인 디자인 언어 브리지에 기록하세요. (assets/design-language-brief-template.md 참조).
최종 출력물을 생성하기 전에 원본성 테스트를 통과했는지 확인하세요. 건너뛰지 마세요.
선택된 미디어에 대한 제작 스킬로 핸드오프하세요. (references/medium-playbooks.md 참조).

이 체크리스트를 작업 노트에 복사하고 항목을 체크하세요:

디자인 언어 진행 상황:
- [ ] 0단계: 세계 구성하기 (미디어, 주제, 대상)
- [ ] 1단계: 핵심 은유 (한 문장)
- [ ] 1.5단계: 영감 수집 (웹)
- [ ] 2단계: 시각적 우주 (어휘)
- [ ] 3단계: 디자인 DNA (모양 / 색상 / 움직임 / 질감)
- [ ] 4단계: 마스코트 시스템 (해당되는 경우)
- [ ] 5단계: 시그니처 제약 조건
- [ ] 6단계: 교차 도메인 영감 (웹)
- [ ] 7단계: 많은 콘셉트 생성 → 세계 선택
- [ ] 8단계: 원본성 테스트 (5가지 질문) — 게이트
- [ ] 9단계: 브리프 작성 + 미디어 핸드오프

0단계 — 세계 구성하기

시각적인 것보다 먼저 실제로 무엇을 만들지 설정합니다. 다음을 물어보세요:

무엇을 만들고 있나요? → 인포그래픽 · 비디오 스토리보드 · 웹사이트 · 모바일 앱 UI/UX · 기타
제품/주제를 한 줄로 설명하면 무엇인가요?
누구를 위한 것이며, 사용자가 무엇을 느끼길 원하나요?

그런 다음 사용자에게 사고 전환을 명확히 말해주세요: "우리는 화면을 디자인하지 않을 거예요. 우리는 세계를 디자인할 거예요. 그리고 당신의 "+ 미디어 +"는 그 세계에서 만들어진 유물들로 구성될 거예요."

지체하지 마세요: 요청이 이미 이러한 질문에 답변한 경우(예: "아이들을 위한 수학 앱의 독창적인 디자인"), 한 줄로 가정을 반영하여 답변하고 바로 1단계로 이동하세요. 인터랙티브 규칙은 디자인 질문에 적용되며, 사용자가 이미 말한 내용을 다시 묻는 데 적용되지 않습니다.

1단계 — 핵심 은유 정의하기

모든 것은 핵심 은유에서 흘러나옵니다.

핵심 질문을 던지세요: "이 제품이 물리적인 사물이나 장소라면 무엇일까요?"

도메인에 기반한 시드를 제안하세요 (출처 방법에서 가져옴):

제품 유형	가능한 은유
수학/학습 앱	장난감 블록
AI 튜터/어시스턴트	현명한 멘토
금융/트레이딩 앱	지휘 센터
여행 앱	탐험가의 일기
지식/문서 앱	살아있는 도서관

하나의 은유를 선정하도록 하세요. 세 개가 아닙니다. 그런 다음 한 문장 디자인 언어를 작성하세요: "이것은 [은유]입니다. 그래서 [느낌/세계]처럼 보입니다."

한 문장으로 말할 수 없다면 은유가 충분히 명확하지 않은 것입니다. 계속 다듬으세요.

1.5단계 — 영감 수집 (웹)

어휘를 정의하기 전에 선택한 은유와 분위기에 대한 실제 참고 자료를 수집하세요. references/inspiration-browsing.md를 따르세요: cosmos.so, Pinterest, Savee, Dribbble, Behance, Are.na에서 은유 + 분위기를 검색하고, 8~15개의 참고 자료를 수집한 후, 반복되는 패턴(조명, 색온도, 구성, 질감, 모양)을 기록하세요. 계속하기 전에 패턴을 사용자에게 요약하여 알려주세요.

2단계 — 시각적 우주 구축하기

그 세계에 존재하는 모든 것을 나열하세요. 그것들이 여러분의 시각적 어휘가 됩니다.

은유가 정해졌으면 사용자와 함께 그 세계에 존재하는 모든 사물, 표면, 캐릭터 및 질감을 브레인스토밍하세요. 살아있는 도서관 예시: 책, 선반, 메모, 잉크, 스탬프, 책갈피, 종이 질감.

그런 다음 어휘를 디자인 레이어에 명시적으로 매핑하세요:

세계의 사물	~이(가) 된다
(예: 책, 스탬프)	아이콘
(예: 여백 스케치)	일러스트레이션
(예: 페이지 넘김, 잉크 번짐)	애니메이션 / 움직임
(예: 선반, 카드)	UI 요소 / 레이아웃
(예: 잉크, 종이, 가죽)	색상
(예: 손글씨 헤더)	타이포그래피

6~10개의 구체적인 요소로 구성된 어휘를 목표로 하세요. 이 목록은 이후 모든 것의 진실 공급원입니다.

3단계 — 디자인 DNA 생성하기

모든 것이 따라야 할 시스템 규칙을 정의하세요.

네 가지 차원을 고정하세요. 각각을 빡빡하게 유지하세요. 여기서의 제약 조건이 디자인된 느낌을 만듭니다:

모양 — 2~3개의 모양 패밀리 (예: 둥근 사각형, 원, 큐브)
색상 — 세계와 연결된 이름을 가진 3~5개의 핵심 색상 (예: 딥 네이비, 일렉트릭 블루, 웜 옐로우, 소프트 그레이)
움직임 — 구문으로 표현된 하나의 철학 (예: "목적이 있는 탄력적이고 장난기 있는")
질감 — 하나의 언어 (예: "종이, 손으로 그린, 스케치 같은")

색상의 정확한 16진수 값과 움직임에 대한 구체적인 이징 및 타이밍 의도를 기록하여 브리프가 제작 준비가 되도록 하세요.

4단계 — 마스코트 시스템 디자인하기 (적합한 경우)

마스코트는 제품에 얼굴과 성격을 부여하고 세계의 중심이 됩니다.

마스코트가 이 프로젝트에 도움이 되는지 물어보세요. 학습, 소비자, 어린이 및 브랜드 중심 제품에 강력하게 작용하며, 엔터프라이즈/금융 또는 미니멀 도구에는 종종 생략됩니다. 그렇다면 다음을 정의하세요:

그것이 누구/무엇인지 (예: 호기심 많은 로봇, 현명한 여우, 꼬마 과학자, 살아있는 별자리)
성격을 형용사 3개로
미디어 전반에 어떻게 나타나는지 (빈 상태, 로딩, 온보딩, 비디오 내레이터, 인포그래픽 가이드)

중요한 이유: 감정적 연결, 기억에 남음, 그리고 전체 경험을 통합합니다.

5단계 — 시그니처 제약 조건 만들기

제약 조건은 창의성을 제한하지 않습니다. 정체성을 만듭니다.

디자인이 절대 깨지지 않을 하나의 규칙을 정의하세요. 이 하나의 결정은 종종 언어를 인식 가능하게 만듭니다:

제약 조건	결과 스타일
사진 사용 금지	깔끔한 일러스트레이션 (Zenn 스타일)
모든 것은 기하학적 블록	구조화된 (수학 앱 스타일)
검정, 흰색 + 포인트 색상 하나만	선명하고 선형적인 (Linear 스타일)
모든 일러스트레이션은 손으로 그린 것처럼	따뜻하고 인간적인 (Excalidraw 스타일)

제약 조건을 실행 가능한 문장으로 작성하세요: "이 세계에서 우리는 절대 ___ 하지 않습니다 / 항상 ___ 합니다."

6단계 — 관련 없는 도메인에서 영감 얻기 (웹)

경쟁사를 따라하지 마세요. 다른 세계에서 빌려오세요.

신선함을 유지하기 위해 제품 카테고리 외부 도메인에서 영감을 얻으세요: 건축, 자연, 장난감, 고대 사본, 과학 다이어그램, 우주 임무, 산업 기계. references/inspiration-browsing.md를 사용하여 23개의 관련 없는 도메인을 탐색하고 전송 가능한 아이디어(건축의 그리드 시스템, 자연의 색상 스토리, 과학 다이어그램의 라벨링 스타일)를 추출하세요. 35개의 구체적인 "도용"을 가져오세요.

7단계 — 많은 콘셉트 생성, 그리고 세계 선택

하나의 핵심 아이디어. 많은 세계. 양질 전환의 기회를 만듭니다.

대량의 짧은 콘셉트 방향을 생성하세요 — 각각은 동일한 핵심 아이디어를 표현하는 다른 '세계'입니다 (예: 박물관, 우주선, 마법 아카데미, 탐정 보드, 살아있는 두뇌… 20~50개의 한 줄 콘셉트 목표). 대부분은 평범할 것입니다. 당신은 탁월한 하나를 찾고 있는 것입니다.

그룹화하여 제시하고, 사용자가 반응하도록 한 다음, 1개의 기본 방향으로 좁히세요 (선택적으로 1~2개의 백업). 대량 배치의 경우 서브 에이전트나 워크플로를 파견하여 콘셉트를 확장할 수 있지만, 사용자는 선택 루프에 계속 참여시켜야 합니다.

8단계 — 원본성 테스트 (게이트)

무엇이든 생성하기 전에 다섯 가지 질문을 모두 실행하세요. 모든 답변은 '예'여야 합니다. '아니오'가 하나라도 있으면 관련 단계로 돌아가세요.

시각적 언어를 한 문장으로 설명할 수 있나요? (→ 1단계)
모든 요소가 동일한 은유에서 비롯되었나요? (→ 2단계)
로고를 제거해도 제품을 식별할 수 있나요? (→ 3단계/5단계)
어린이가 동일한 디자인 언어를 그릴 수 있나요? (간단하고 명확한가? → 3단계)
UI라기보다 세계처럼 보이나요? (→ 전체)

각 질문과 그 판정을 사용자에게 명시적으로 알려주세요.

9단계 — 브리프 작성 및 핸드오프

assets/design-language-brief-template.md에 확정된 모든 결정 사항을 채워서 사용자의 프로젝트에 저장하고(파일명 design-language.md 제안) 선택한 미디어로 언어를 변환합니다(references/medium-playbooks.md 참조 — 이 단계에서 미디어별 변환 표를 읽으세요). 그런 다음 일치하는 제작 스킬 호출을 제안하세요:

인포그래픽 / 소셜 그래픽 → skills/creative/social-graphics, skills/creative/image-generation, 또는 skills/creative/brand-asset
비디오 스토리보드 → skills/creative/remotion-script-writer, skills/creative/product-video, 또는 skills/creative/creative-strategist
웹사이트 → skills/frontend-design/frontend-orchestrator, skills/frontend-design/design-foundation, skills/frontend-design/color-system, skills/frontend-design/typography-system
모바일 앱 UI/UX → skills/frontend-design/frontend-orchestrator, skills/frontend-design/component-architecture, skills/frontend-design/layout-system

브리프는 계약입니다: 모든 다운스트림 에셋은 그것이 설명하는 세계의 유물이어야 합니다.

필수 출력 형식

결과물은 완성된 브리프입니다. 항상 assets/design-language-brief-template.md의 정확한 구조를 따르고, 모든 섹션을 채우고, 건너뛰는 섹션이 없어야 합니다:

# 디자인 언어 브리프 — [제품 / 주제]
## 1. 핵심 은유            (한 문장 디자인 언어)
## 2. 시각적 우주          (아이콘/일러스트레이션/움직임/UI/색상/타입에 매핑된 6~10개 어휘 요소)
## 3. 디자인 DNA           (모양 · 16진수 색상 · 하나의 움직임 철학 · 하나의 질감 언어)
## 4. 마스코트 시스템      (누구/성격/어디에 나타나는지 — 또는 이유와 함께 "없음")
## 5. 시그니처 제약 조건   ("이 세계에서 우리는 절대 ___ 하지 않습니다 / 항상 ___ 합니다")
## 6. 교차 도메인 영감     (출처와 함께 3~5개의 구체적인 도용)
## 7. 선택된 방향          (승리한 세계 + 1~2개 백업)
## 8. 원본성 테스트        (명시적인 YES 판정과 함께 다섯 가지 질문 모두)
## 9. 제작 노트            (미디어 핸드오프: 어떤 스킬, 무엇을 따라야 하는지)

동일한 제품에 대해 두 번 실행하면 이 순서로 동일한 아홉 섹션이 있는 브리프가 생성되어야 합니다. 창의적인 내용만 다릅니다.

일반적인 실수

실수	수정
7단계 전체를 하나의 설문지로 덤프	한 번에 한 단계씩; 각 답변을 반영하세요
"안전하게" 3개의 은유 선택	정확히 하나를 강제하세요 — 혼합된 은유는 일관성을 망칩니다
웹 영감 수집 건너뛰기	실제 참고 자료가 일반적이고 AI 기본값 출력을 방지합니다
시그니처 제약 조건 없음	제약 조건 없이는 정체성이 없습니다(5단계는 선택 사항이 아닙니다)
세계보다 먼저 화면/프레임 디자인	세계를 먼저 정의하세요; 유물은 나중에 옵니다
원본성 테스트 없이 배송	5가지 질문 게이트는 필수입니다

통합

skills/creative/creative-strategist → 소비: 브리프의 디자인 DNA(색상, 질감, 움직임)를 실용적인 에셋 생성 스타일 가이드의 원자재로 사용.
skills/creative/social-graphics, skills/creative/image-generation, skills/creative/brand-asset → 소비: 브리프; 생성된 모든 에셋은 세계의 유물이어야 함 (리포지토리 이미지 파이프라인: docs/creative_cli.py, 모델 fal-ai/nano-banana-pro).
skills/creative/product-video, skills/creative/talking-head, skills/creative/remotion-script-writer → 소비: 비트, 설정 및 장면이 그려지는 시각적 세계로서의 브리프.
skills/frontend-design/frontend-orchestrator → 소비: 디자인 시스템 스킬(design-foundation, color-system, typography-system, layout-system, component-architecture) 위의 아이덴티티 레이어로서의 브리프.

결론

세계를 디자인하세요. 그 외 모든 것은 그 세계의 요소일 뿐입니다. 모든 화면, 썸네일, 이미지, 아이콘 및 애니메이션은 동일한 우주에서 나온 유물처럼 느껴져야 합니다.

오리지널 디자인