saas-illustration 가이드

한 줄 결과물: 순백 배경, 검은 벡터 선화, 단일 브랜드 강조색, 실제 제품 UI 카드가 들어간 SaaS 히어로 일러스트 한 장과 그 영어 프롬프트.

스킬 본문: ../../saas-illustration/SKILL.md (업스트림 원문인 중국어/영어 그대로. 한국어화는 후속 작업) · 샘플 원본: ../../saas-illustration/examples/ (README.md)

언제 쓰나

• 랜딩 페이지 첫 화면, Feature 섹션, 블로그 헤더, 발표 표지, 제품 출시 메일 상단에 쓸 일러스트가 필요할 때
• "실제 제품 UI 카드 하나 + 선화 장면 + 브랜드색 장식 몇 개"로 제품이 하는 일을 한눈에 보여 주고 싶을 때
• 쓰지 않을 때: 개념 삽화(→ dreamer-star-ip), 사진, 3D, 손그림 스케치

샘플

이 저장소에 이미 들어 있는 3장이다. 이미지는 복사하지 않고 원본 폴더를 그대로 링크한다.

01 단일 인물 + UI 카드	02 노트북 + UI 카드	03 노트북 + UI 카드

02와 03은 같은 제품(Meetly)의 다른 순간이다. 같은 캐릭터 DNA, 같은 강조색, 같은 장식 어휘에 UI 카드만 바꾸면 사이트 전체의 정체성을 하나로 이어 갈 수 있다. 각 .md에 이미지를 만든 영어 프롬프트 전문이 있다.

따라하기

1. 질문 3개에 한 번에 답한다. 스킬은 아래 세 가지만 묻는다. 한국어로 답해도 된다. UI 카드 문구는 실제 문구와 숫자, 필드 이름이 구체적일수록 좋다.

   saas-illustration 스킬로 히어로 일러스트를 만들어 줘.
   Q1 제품: AI 회의록 도구. 결정 사항과 액션 아이템을 자동으로 잡아 준다.
   Q2 강조색: #5B47F5
   Q3 UI 카드: "Q3 launch retro" 회의록. 제목 + 결정 3건(담당자 표시) + 블로커 2건 + 아래쪽 Post 버튼.

2. 나머지는 스킬이 정한다(다시 묻지 않는다). 제품 종류에서 구도(A: 노트북과 화상 회의, B: 휴대폰, C: 한 사람, D: 두 사람, E: 사람 없는 추상 작업 공간)와 비율(기본 3:2 가로), AI 알약 문구, 장식 3~5개를 고른다.
3. 영어 프롬프트 한 덩어리를 받는다. UI 카드 안 글자는 Q3 원문 그대로, 강조색은 Q2의 HEX 하나만 쓴다. 템플릿은 prompt-template.md.
4. 이미지 모델에 넣는다. GPT-image, Nano Banana, Midjourney, Flux 어느 쪽이든 된다. 이 환경에서는 zenmux-image-generation이나 Codex 이미지 생성을 쓴다.
5. QA 후 부분 수정한다. qa-checklist.md로 점검하고, 어긋난 곳은 프롬프트 템플릿의 "local edit" 문구로 그 부분만 고친다.

가장 빠른 길은 샘플 중 장면이 맞는 것의 .md를 열어 프롬프트 블록을 복사하고, 강조색, UI 카드 내용, AI 알약 문구만 바꾸는 것이다.

흔한 실패

• UI 카드가 너무 추상적이어서 실제 제품 같지 않다. Q3에 실제 문구와 숫자를 넣는다.
• 강조색이 여러 개로 번진다. 전체 그림에서 HEX 하나만 쓴다.
• 손그림 느낌이나 그림자, 그라데이션이 생긴다. 이 스타일은 깨끗한 벡터 선화다.
• 캐릭터 DNA가 장마다 달라진다. 같은 제품의 시리즈는 같은 프롬프트 뼈대를 쓰고 UI 카드만 바꾼다.

다음 스킬

• 개념 삽화는 dreamer-star-ip
• 이미지 생성은 zenmux-image-generation, 완성 이미지 검수는 design-critique