Design Brand Visual

---
name: design-brand-visual
description: |
  디자인 시스템에 맞는 브랜드 비주얼을 생성합니다. 프로젝트의 토큰(색·타이포·반경·여백)과 브랜드 보이스를
  먼저 읽어 생성 프롬프트에 반영하므로, 만들어진 이미지가 디자인 시스템과 어긋나지 않습니다.
  다음과 같은 요청 시 사용하세요:
  - "히어로 이미지 만들어 줘", "랜딩 상단 비주얼"
  - "브랜드 톤에 맞는 일러스트"
  - "OG 이미지 만들어 줘", "소셜 공유 이미지"
  - "제품 목업 이미지"
  - "우리 마스코트 다른 포즈로"
  - "빈 상태(empty state) 일러스트"
  이미지 생성 실행·모델 선택·비용 고지는 moai-media:media-higgsfield-core 계약에 위임하고, 이 스킬은
  "무엇을 만들지"(브랜드 정합·구도·용도 규격)까지만 정합니다.
version: "1.1.1"
---

# design-brand-visual — 브랜드 정합 비주얼 생성

> `moai-designer` | 디자인 시스템 → 생성 프롬프트 (생성 실행: `moai-media`)

## 개요

디자인 시스템을 갖춘 프로젝트에서 AI 이미지가 실패하는 지점은 품질이 아니라 **정합**이다. 잘 만들어진 히어로 이미지도 브랜드 팔레트를 벗어나면 쓸 수 없다.

이 스킬은 생성 전에 **프로젝트의 디자인 토큰과 브랜드 규칙을 먼저 읽고**, 그 값을 프롬프트 제약으로 바꾼 뒤 생성으로 넘긴다.

## 하지 않는 것

- **이미지 생성 실행·모델 선택·크레딧 고지 안 함** — `moai-media:media-higgsfield-core` 계약에 위임한다(§4 생성 실행).
- **디자인 토큰 정의 안 함** — 토큰의 진실원은 프로젝트의 디자인 시스템이다. 이 스킬은 읽어서 쓸 뿐 새로 만들지 않는다.
- **사용자에게 직접 질문 안 함** — 슬롯이 비면 blocker를 반환하고 오케스트레이터가 확인한다.

## 트리거 키워드

히어로 이미지, 랜딩 비주얼, 키 비주얼, 브랜드 이미지, OG 이미지, 소셜 공유 이미지, 목업, 마스코트, 일러스트, 빈 상태, 엠티 스테이트, 배너 이미지, 브랜드 톤 이미지

## 워크플로우

### 1단계 — 디자인 시스템 읽기

생성 프롬프트를 쓰기 **전에** 프로젝트의 진실원을 찾아 읽는다. 우선순위:

1. 디자인 시스템 핸드오프 디렉터리(토큰 CSS·화면 설계 원본·브랜드 규칙 문서)
2. `DESIGN.md` 또는 그에 준하는 디자인 결정 문서
3. 토큰 파일(DTCG / CSS 변수 / shadcn 설정)
4. 브랜드 아이덴티티 문서(보이스·금지 사항·마스코트 사용 규칙)

없으면 없는 대로 진행하되, **토큰 근거 없이 색을 지어내지 않는다.** 근거가 없다는 사실을 결과에 명시한다.

### 2단계 — 제약으로 변환

읽은 값을 프롬프트 제약으로 바꾼다. 이 변환이 이 스킬의 핵심 산출이다.

| 디자인 시스템 항목 | 프롬프트 제약 |
|---|---|
| 팔레트 | 정확한 색을 명시(가능하면 hex), 그 밖의 색조 금지 |
| 타이포 | 이미지 안 문자를 넣을지 여부. 넣는다면 폰트 성격 |
| 반경·여백 | 형태 언어(각진/둥근), 여백 밀도 |
| 브랜드 보이스 | 무드 어휘(차분한/대담한/따뜻한) |
| 금지 규칙 | 부정이 아니라 **긍정 서술**로 변환(→ 코어 R1) |
| 마스코트 규칙 | 사용 가부, 포즈·표정 허용 범위 |

**금지 규칙 변환 주의:** "주황색 쓰지 마"를 그대로 넣으면 모델이 주황에 주목한다. "그린과 무채색만으로 구성"처럼 원하는 것을 서술한다.

### 3단계 — 용도 규격 확정

| 용도 | 비율 | 유의점 |
|---|---|---|
| 히어로 / 랜딩 상단 | `16:9` 또는 더 넓게 | 텍스트가 얹힐 자리를 비워 둔다 |
| OG / 소셜 공유 | `16:9` 근사 | 작게 축소돼도 읽히는 형태 |
| 카드 썸네일 | `1:1` 또는 `4:3` | 중앙 집중 구도 |
| 목업 | 제품 형태에 맞춤 | 실제 UI와 모순되지 않게 |
| 빈 상태 일러스트 | `1:1` | 단순·저채도, 본문을 방해하지 않게 |
| 마스코트 | 투명 배경 필요 시 후처리 | 기존 마스코트와 동일 디자인 |

### 4단계 — 생성 위임

조립한 프롬프트와 제약을 `moai-media:media-higgsfield-core` 계약에 넘긴다. 모델 선택·라이브 파라미터 조회·비용 프리플라이트·폴링은 전부 그쪽이 한다.

마스코트나 특정 인물이 **여러 컷에 일관되게** 나와야 하면 먼저 `moai-media:media-higgsfield-identity`로 참조를 만든다(Soul / Element 판정 포함).

> moai-media 미설치 시: 완성된 프롬프트와 제약을 텍스트로 출력하고 Higgsfield 웹(https://higgsfield.ai)에서 직접 생성하도록 안내한다.

### 5단계 — 정합 검증

받은 이미지를 디자인 시스템 기준으로 점검한다.

- 팔레트를 벗어난 색이 눈에 띄는가
- 형태 언어(각/둥근)가 시스템과 맞는가
- 텍스트가 들어갔다면 오탈자·깨진 글자가 없는가
- 히어로라면 카피가 얹힐 여백이 실제로 있는가

어긋나면 제약을 강화해 재생성한다. **어긋난 이미지를 "대체로 맞다"고 넘기지 않는다** — 디자인 시스템은 근사치를 허용하지 않는 종류의 기준이다.

## 출력 형식

```
## 브랜드 비주얼 결과
- 용도: [히어로 | OG | 목업 | ...] · 비율: [aspect]
- 참조한 디자인 시스템: [읽은 파일 경로] (없으면 "근거 없음" 명시)
- 적용 제약: [팔레트 / 형태 언어 / 무드 / 마스코트 규칙]
- 생성 위임: moai-media:media-higgsfield-core
- 결과 URL: [생성 결과]
- 정합 점검: [통과 | 어긋난 항목과 조치]
```

## 주의사항

- 토큰 근거 없이 색·폰트를 지어내지 않는다. 근거가 없으면 없다고 적는다.
- 금지 사항은 긍정 서술로 바꿔 넣는다.
- 이미지 안에 본문 텍스트를 굽지 않는다 — 다국어·수정·접근성 모두 막힌다. 텍스트는 마크업으로 얹는다.
- 마스코트는 프로젝트의 마스코트 사용 규칙을 따른다. 규칙이 있으면 임의 변형하지 않는다.
- 생성 비용·모델은 이 스킬이 정하지 않는다 — 위임처의 사전 고지 절차를 그대로 따른다.
- 접근성: 최종 화면에서 텍스트 대비가 확보되는지는 이미지가 아니라 조합에서 결정된다. 배경으로 쓸 이미지는 대비 여지를 남긴다.

## 관련 스킬

| 스킬 | 시점 |
|---|---|
| `moai-media:media-higgsfield-core` | 위임: 생성 실행·비용·모델 |
| `moai-media:media-higgsfield-identity` | 선행: 마스코트·모델 일관성 참조 |
| `moai-media:media-higgsfield-product` | 인접: 제품 중심 비주얼 10모드 |
| `moai-designer:design-brand-system` | 선행: 브랜드 디자인 시스템 정의 |
| `moai-designer:design-tokens-transformer` | 선행: 토큰 파이프라인 |
| `moai-designer:design-slop-check` | 후속: AI 슬롭 점검 |

## 출처

- [Higgsfield MCP](https://higgsfield.ai/mcp) — 생성 실행 경로.
- [Higgsfield Skills (공식 agent 문서)](https://github.com/higgsfield-ai/skills) (MIT) — 브랜드 비주얼 용도 구분 참고.
- 생성 계약·비용·모델 선택: `moai-media:media-higgsfield-core` 라이브 계약.
- 디자인 토큰의 진실원은 프로젝트의 디자인 시스템이며, 이 스킬은 그것을 소비만 한다.