| 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단계 — 디자인 시스템 읽기
생성 프롬프트를 쓰기 전에 프로젝트의 진실원을 찾아 읽는다. 우선순위:
- 디자인 시스템 핸드오프 디렉터리(토큰 CSS·화면 설계 원본·브랜드 규칙 문서)
DESIGN.md 또는 그에 준하는 디자인 결정 문서- 토큰 파일(DTCG / CSS 변수 / shadcn 설정)
- 브랜드 아이덴티티 문서(보이스·금지 사항·마스코트 사용 규칙)
없으면 없는 대로 진행하되, 토큰 근거 없이 색을 지어내지 않는다. 근거가 없다는 사실을 결과에 명시한다.
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 슬롭 점검 |
출처
