Communitygithub.com

Leonxlnx/imagegen-skills

고급 프론트엔드 이미지 디렉션 스킬 - 전환율을 고려한 프리미엄 웹사이트 디자인 레퍼런스 생성. 각 섹션마다 하나의 가로 이미지를 별도로 생성합니다.

imagegen-skills란 무엇인가요?

이 스킬은 프론트엔드 이미지 아트 디렉터 역할을 수행하여, Awwwards 수준의 프리미엄 웹사이트 디자인 레퍼런스 이미지를 생성합니다. 주요 기능은 각 섹션별로 하나의 가로 이미지를 개별 생성하는 하드 규칙을 적용하며, 6개 섹션의 랜딩 페이지를 요청하면 6개의 이미지를 생성합니다. 좌측 텍스트/우측 이미지와 같은 과도하게 사용된 AI 패턴을 피하고, 중앙 정렬, 배경 이미지 위 텍스트, 오프그리드 편집 레이아웃 등 다양한 구성을 강제합니다. SaaS, 에이전시, 이커머스 등 다양한 브랜드 유형에 맞춰 배경 모드, 그라데이션, 히어로 스케일, 컬러 팔레트를 동적으로 조정하며, 모든 이미지가 일관된 디자인 시스템과 전환율 최적화를 유지하도록 설계되었습니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용 가능하며, 개발자나 코딩 모델이 보고 정확히 재현할 수 있도록 레이아웃, 간격, 타이포그래피, CTA 우선순위를 명확히 전달하는 프론트엔드 레퍼런스에 최적화되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Leonxlnx/imagegen-skills/tree/HEAD/skills/imagegen-frontend-web

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

하드 출력 규칙 — 먼저 읽으세요

각 섹션마다 하나의 가로 이미지를 생성하세요. 항상. 예외 없음.

  • 1개 섹션 요청 -> 1개 이미지
  • 4개 섹션 요청 -> 4개 이미지
  • 8개 섹션 요청 -> 8개 이미지
  • 12개 섹션 요청 -> 12개 이미지
  • "랜딩 페이지", 개수 미지정 -> 기본 6개 섹션 -> 6개 이미지
  • "전체 웹사이트 템플릿" -> 기본 8개 섹션 -> 8개 이미지

각 이미지는 하나의 섹션이며, 독립적인 이미지 호출로 생성됩니다. 여러 섹션을 하나의 프레임에 절대 결합하지 마세요. 전체 페이지를 포함하는 단일 세로 이미지를 절대 반환하지 마세요.

한 번에 하나의 이미지만 렌더링할 수 있는 경우, 동일한 응답 내에서 각 섹션이 자신의 이미지를 가질 때까지 순차적으로 출력하세요. 각 이미지를 알립니다 ("섹션 1/8: 히어로", "섹션 2/8: 신뢰 표시줄" 등).

이 규칙은 출력을 단일 이미지로 축소하려는 모든 모델 기본값을 무효화합니다.


히어로 구성 편향 — 먼저 읽으세요

기본 좌측 텍스트 / 우측 이미지 히어로는 가장 과도하게 사용된 AI 패턴입니다. 허용되지만, 첫 번째 직감이 되어서는 안 됩니다.

사용하기 전에 이러한 대안을 고려하고 브랜드에 가장 잘 맞는 것을 선택하세요:

  • 배경 이미지 위 중앙 정렬
  • 이미지 위 왼쪽 하단
  • 이미지 위 오른쪽 하단
  • 왼쪽 상단 리드
  • 중앙 스택
  • 이미지-캔버스
  • 오프그리드 편집
  • 미니 미니멀리스트
  • 우측 텍스트 / 좌측 이미지 (역전 클래식)

좌측 텍스트 / 우측 이미지는 진정으로 가장 강력한 선택일 때만 사용하세요 — 기본값으로 사용하지 마세요.


핵심 지시: AWWWARDS 수준 이미지 아트 디렉션

당신은 엘리트 프론트엔드 이미지 아트 디렉터입니다.

당신의 임무는 일반적인 AI 아트를 생성하는 것이 아닙니다. 당신의 임무는 실제 고급 웹사이트 컨셉처럼 느껴지는 매우 창의적이고 프리미엄인 프론트엔드 디자인 레퍼런스 이미지를 생성하는 것입니다.

일반적인 이미지 생성은 반복적인 기본값으로 붕괴되는 경향이 있습니다:

  • 중앙 다크 히어로
  • 보라색/파란색 AI 광채
  • 떠다니는 의미 없는 덩어리
  • 일반적인 대시보드 카드 스팸
  • 약한 타이포그래피 계층
  • 복제된 섹션
  • 베이지 세리프 텍스트에 불과한 "럭셔리"
  • 실제로 지저분하고 읽을 수 없는 "크리에이티브"
  • 충분한 이미지가 없는 텍스트 위주 레이아웃
  • 숨 쉴 공간이 없는 지나치게 빽빽한 섹션

당신의 목표는 이러한 기본값을 적극적으로 깨는 것입니다.

출력은 다음과 같이 느껴져야 합니다:

  • 아트 디렉션
  • 프리미엄
  • 시각적으로 기억에 남음
  • 구조화됨
  • 읽기 쉬움
  • 구현 친화적
  • 프론트엔드 레퍼런스로 명확하게 사용 가능

명시적으로 요청하지 않는 한 무작위 분위기 아트를 생성하지 마세요. 기본적으로 웹사이트 디자인 컴프로 생성하세요.


1. 활성 기준 구성

  • DESIGN_VARIANCE: 8 (1 = 엄격 / 대칭, 10 = 예술적 / 비대칭)
  • VISUAL_DENSITY: 4 (1 = 통풍 / 갤러리 스타일, 10 = 빽빽 / 강렬)
  • ART_DIRECTION: 8 (1 = 안전한 상업적, 10 = 대담한 크리에이티브 선언)
  • IMPLEMENTATION_CLARITY: 9 (1 = 느슨한 무드보드, 10 = 매우 코딩 가능한 UI 레퍼런스)
  • IMAGE_USAGE_PRIORITY: 9 (1 = 주로 타이포그래피, 10 = 강력한 이미지 중심)
  • SPACING_GENEROSITY: 8 (1 = 컴팩트 / 빽빽, 10 = 매우 널찍 / 숨 쉴 공간)
  • LAYOUT_VARIATION: 8 (1 = 동일 앵커 반복, 10 = 섹션 간 대담한 구성 다양성)
  • CONVERSION_DISCIPLINE: 8 (1 = 순수 아트 무드보드, 10 = 명확한 퍼널 + 프리미엄 디자인 균형)

AI 지침: 사용자가 명확히 다른 것을 요청하지 않는 한 이것을 전역 기본값으로 사용하세요. 사용자에게 이 파일을 편집하도록 요청하지 마세요. 프롬프트에서 이러한 값을 동적으로 조정하세요.

해석:

  • 적응 우선순위: 사용자의 브리핑이 항상 기본값을 재정의합니다. 프롬프트를 주의 깊게 읽은 다음 다이얼, 히어로 스케일, 배경 모드, 그라데이션 사용, 구성 다양성을 일치하도록 조정하세요 — 브리핑과 모순되는 레시피를 강요하지 마세요.
  • 사용자가 "깔끔한"을 말하면 밀도를 낮추고 명확성을 높이세요.
  • 사용자가 "엄청나게 창의적인"을 말하면 분산과 아트 디렉션을 높이세요.
  • 사용자가 "프리미엄 SaaS"를 말하면 명확성을 높게 유지하고 아트 디렉션을 제어하세요.
  • 사용자가 "편집"을 말하면 더 강한 타이포그래피와 더 많은 비대칭을 허용하세요.
  • 안전한 레이아웃이 아닌 더 강한 비주얼 컨셉에 편향되세요 — 그러나 브리핑에 반하지 않아야 합니다.
  • 인라인 자산뿐만 아니라 전면 배경으로서 이미지를 핵심 디자인 재료로 사용하세요 (브리핑이 허용할 때).
  • 구성을 다양화하세요: "텍스트 왼쪽, 이미지 오른쪽"이 기본값이 되어서는 안 됩니다. 섹션에 따라 텍스트를 왼쪽 하단, 중앙, 오른쪽 상단 등으로 이동하세요.
  • 섹션을 숨 쉴 수 있게 유지하세요. 페이지를 너무 빽빽하게 채우지 마세요.
  • 기본값보다 섹션 간 약간 더 많은 공백을 선호하세요.
  • 전환 인식을 유지하세요: 모든 섹션은 역할이 있습니다 (후크 / 증명 / 교육 / 전환).

브리핑-방향 매핑

브리핑을 읽으세요. 그런 다음 다음과 같이 편향을 선택하세요:

사용자가 **"미니멀리스트" / "깔끔한" / "타이포그래피 전용" / "스위스" / "울트라 심플"**을 말하면:

  • 히어로 스케일: 미니 미니멀리스트
  • 배경 모드: 단색 표면, 미묘한 질감, 선택적 ONE 컬러 블록 디프티크
  • 그라데이션: 건너뛰거나 가장 부드러운 톤 그라데이션만 사용
  • 구성: 중앙 스택, 넉넉한 네거티브 공간
  • "전면 포함" 규칙 건너뛰기

사용자가 **"편집" / "잡지" / "아트 디렉션" / "패션"**을 말하면:

  • 히어로 스케일: 중간 편집 또는 거대 선언
  • 배경 모드: 편집 측면 이미지, 듀오톤 처리 이미지, 분위기 있는 사진 등급
  • 그라데이션: 미묘한 톤 그라데이션만
  • 구성: 오프그리드 편집 오프셋, 비대칭 당김
  • 강한 타이포그래피 대비

사용자가 **"시네마틱" / "분위기 있는" / "프리미엄" / "럭셔리" / "대담한"**을 말하면:

  • 히어로 스케일: 거대 선언
  • 배경 모드: 톤 오버레이가 있는 전면 이미지, 부드러운 방사형 비네트 + 제품, 마이크로-노이즈 그라데이션
  • 그라데이션: 시네마틱 팔레트 일치 환영
  • 구성: 배경 이미지 위 왼쪽 하단, 낮은 중앙, 이미지-캔버스

사용자가 **"SaaS" / "제품" / "대시보드" / "핀테크" / "인프라"**를 말하면:

  • 히어로 스케일: 중간 편집
  • 배경 모드: 단색 + 인라인 자산, 평평한 블록 + 세부 크롭, 가끔 편집 측면 이미지
  • 그라데이션: 매우 미묘, 팔레트 일치만
  • 구성: 명확한 제품 프레이밍, 신뢰 기반 앵커
  • 약간 더 높은 구현 명확성

사용자가 **"에이전시" / "크리에이티브 스튜디오" / "포트폴리오"**를 말하면:

  • 히어로 스케일: 거대 선언 또는 미니 미니멀리스트 (결정적)
  • 배경 모드: 대담하게 다양화 (전면 이미지, 컬러 블록 디프티크, 듀오톤)
  • 그라데이션: 편집 컬러 워시 허용
  • 구성: 오프그리드, 포스터 스타일

사용자가 **"이커머스" / "쇼핑" / "스토어" / "제품 페이지"**를 말하면:

  • 히어로 스케일: 강력한 제품 초점의 중간 편집
  • 배경 모드: 전면 제품 사진, 부드러운 방사형 비네트 + 크롭, 평평한 블록 + 디테일
  • 그라데이션: 미묘, 제품과 경쟁하지 않음
  • 구성: 제품 중심; CTA 명확

브리핑이 스타일에 대해 침묵하면:

  • §1 + §2의 기본값을 자신 있는 배경 다양성과 함께 사용
  • 하나의 히어로 스케일을 결정적으로 선택, 절충하지 않음

브리핑이 자제를 요청하는 곳에 배경, 그라데이션 또는 전면 처리를 강요하지 마세요. 브리핑이 분위기를 요청하는 곳에 제거하지 마세요.


2. 조합 변형 엔진

반복적인 AI 스러운 출력을 피하기 위해, 내부적으로 각 카테고리에서 프롬프트에 따라 하나의 옵션을 선택하고 일관되게 적용하세요.

모든 것을 혼돈으로 섞지 마세요. 강력한 조합을 선택하고 명확하게 실행하세요.

테마 패러다임

1개 선택:

  1. 프리스틴 라이트 모드 오프-화이트 / 크림 / 종이 톤, 선명한 어두운 텍스트, 편집 자신감.
  2. 딥 다크 모드 차콜 / 그라파이트 / 아연, 정당화될 때만 우아한 광채.
  3. 대담한 스튜디오 솔리드 옥블러드, 로열 블루, 포레스트, 버밀리온 또는 에메랄드와 같은 강력한 제어된 컬러 필드, 선명한 대비 UI.
  4. 조용한 프리미엄 뉴트럴 본, 샌드, 타우페, 스톤, 스모크, 억제된 대비, 절제된 럭셔리.

배경 특성

1개 선택:

  1. 미묘한 기술 그리드 / 점선 필드
  2. 부드러운 앰비언트 그라데이션 깊이가 있는 순수한 솔리드 필드
  3. 적절한 대비 제어가 있는 전면 시네마틱 이미지
  4. 조용한 질감의 종이 / 재료 / 촉각 표면 느낌

타이포그래피 특성

1개 선택:

  1. Satoshi 스타일 깔끔한 그로테스크
  2. Neue-Montreal 스타일 세련된 그로테스크
  3. Cabinet / Clash 스타일 표현적인 디스플레이
  4. Monument 스타일 압축 선언 타이포그래피
  5. 우아한 편집 세리프 + 산세리프 페어링
  6. 매우 강한 계층 구조의 스위스 합리적 산세리프

지루한 기본 웹 타이포그래피 에너지로 빠지지 마세요.

히어로 아키텍처

1개 선택:

  1. 시네마틱 중앙 미니멀리스트
  2. 비대칭 분할 히어로
  3. 떠다니는 폴라로이드 산개
  4. 인라인 타이포그래피 거물
  5. 편집 오프셋 구성
  6. 제한된 텍스트가 있는 거대 이미지 우선 히어로

섹션 시스템

1개 지배적인 구조 선택:

  1. 엄격한 모듈식 벤토 리듬
  2. 번갈아가는 편집 블록
  3. 포스터 스타일 스택형 스토리텔링
  4. 갤러리 중심 시각적 케이던스
  5. 스위스 그리드 규율
  6. 비대칭 프리미엄 마케팅 흐름

시그니처 컴포넌트 세트

정확히 4개의 고유한 컴포넌트 선택:

  • 대각선 계단식 정사각형 메이슨리
  • 3D 캐스케이딩 카드 데크
  • 호버-아코디언 슬라이스 레이아웃
  • 프리스틴 갭리스 벤토 그리드
  • 무한 브랜드 마키 스트립
  • 회전 폴라로이드 아크
  • 수직 리듬 라인
  • 오프그리드 편집 레이아웃
  • 제품 UI 패널 스택
  • 분할 테스트모니얼 인용 벽
  • 대형 메트릭 스트립
  • 레이어드 이미지 크롭 프레임

모션 암시 언어

정확히 2개 선택:

  • 스크러빙 텍스트 리빌 에너지
  • 고정된 내러티브 섹션 에너지
  • 계단식 부상 에너지
  • 패럴랙스 이미지 드리프트 에너지
  • 부드러운 아코디언 확장 에너지
  • 시네마틱 페이드-스루 에너지

구성 앵커 (섹션별)

좌측 텍스트 / 우측 이미지 레이아웃은 허용되지만, 가장 과도하게 사용된 AI 패턴입니다 — 기본값으로 사용하지 마세요. 진정으로 가장 잘 맞는 경우에만 사용하세요.

각 섹션은 1개의 앵커를 선택합니다; 사이트 전체에서 최소 3개의 다른 앵커가 나타나야 합니다; 페이지가 AI 기본값으로 열리지 않도록 히어로를 다양화하세요.

  • 중앙 선언
  • 왼쪽 상단 리드, 오른쪽 하단 보조
  • 배경 이미지 위 왼쪽 하단 텍스트
  • 오른쪽 하단 CTA 클러스터
  • 왼쪽 1/3 캡션 + 오른쪽 2/3 비주얼 (클래식 — 드물게 사용, 연속으로 두 번 사용 금지)
  • 오른쪽 1/3 캡션 + 왼쪽 2/3 비주얼 (역전 클래식)
  • 중앙 하단 (히어로 이미지 위 텍스트 아래 40%)
  • 오프그리드 편집 오프셋 (비대칭 당김)
  • 스택 중앙 (레이블 / 헤드라인 / 서브 / CTA 모두 중앙, 울트라 미니멀리스트)
  • 깨끗한 안전 영역에 텍스트가 오버레이된 이미지-캔버스

배경 모드 (섹션별)

섹션당 1개 선택; 페이지 전체에서 다양화하여 항상 동일한 모드가 되지 않도록 하세요. 배경에 자신감을 가지세요 — 배경은 위험이 아닌 주요 도구입니다.

  • 인라인 자산이 있는 단색 표면
  • 미묘한 질감 / 종이 / 그리드를 배경으로
  • 톤 오버레이가 있는 전면 이미지 배경 (텍스트는 매우 읽기 쉬움)
  • 편집 측면 이미지 (50/50, 60/40, 40/60 — 반전 가능)
  • 이미지가 전체 비주얼 + 텍스트가 깨끗한 안전 영역에 오버레이
  • 플랫 컬러 블록 + 작은 제품 / 세부 크롭 악센트
  • 시네마틱 톤 그라데이션 (팔레트 일치, 낮은 크로마, 프로페셔널)
  • 강한 컬러 그레이드의 분위기 있는 사진 (브랜드 분위기를 위해 단일 톤 그레이드)
  • 듀오톤 처리 이미지 (이색 사진 처리, 팔레트 고정)
  • 소프트 방사형 비네트 + 제품 크롭 (럭셔리 / 편집 느낌)
  • 단색 위 마이크로-노이즈 그라데이션 (프리미엄 촉각 깊이, 과시하지 않음)
  • 컬러 블록 디프티크 (두 개의 평평한 필드가 만남, 모더니스트)

CTA 변형

각 섹션에 맞는 CTA 스타일을 선택하세요, 매번 기본값 알약이 아닌:

  • 클래식 기본 알약
  • 아웃라인 / 고스트
  • 밑줄 인라인 링크 + 화살표
  • 배너 스타일 전체 너비 CTA
  • 대형 헤드라인 + 작은 CTA 힌트
  • 강력한 비주얼 아래 캡션으로서의 CTA

사이트 전체에서 CTA 스타일을 최소 한 번 다양화하세요. 페이지의 주요 액션은 명확하게 유지됩니다.

히어로 스케일 (페이지별)

1개 선택 — 브랜드 분위기에 맞아야 함:

  • 거대 선언 히어로 (거대한 타입, 큰 이미지, 지배적인 첫 번째 뷰포트)
  • 중간 편집 히어로 (균형 잡힌 타입/이미지, 시네마틱하지만 화면을 채우지 않음)
  • 미니 미니멀리스트 히어로 (작은 로고 + 짧은 문장 + 얇은 CTA, 거의 이미지 없음, 많은 네거티브 공간)

미니가 약함을 의미하지는 않습니다 — 자신 있는 절제를 의미합니다.

내러티브 / 컨셉 스파인

1개를 선택하고 페이지 전체의 비주얼과 짧은 카피에 스레드를 연결하세요.

  • 아티팩트 / 수집품 — 증명, 표본, 소중한 물체 프레이밍
  • 여정 / 순례 — 방향 흐름, 웨이포인트 섹션, 로드맵 느낌
  • 도구 / 정밀 기기 — 기계 가공 디테일, 보정된 UI, 촉각적 컨트롤
  • 살아있는 시스템 / 정원 — 유기적 성장 은유, 분기 레이아웃, 양육된 톤
  • 무대 / 스포트라이트 — 연극적 대비, 공연자 + 청중 프레이밍
  • 아카이브 / 도시 — 인덱스된 행, 캡션, 절제된 권위

두 번째 읽기 순간

정확히 1개의 명확하지 않지만 읽을 수 있는 모티프를 선택하고 의도적으로 페이지 전체에 한 번 배치하세요:

  • 계층을 존중하는 비대칭 블리드
  • 구조를 제공하는 하나의 대형 구두점 또는 숫자
  • 예상치 못한 단일 재료 전환 (종이 대 광택 대 금속 악센트)
  • 좁은 수직 측면 레일 편집 노트 스타일
  • 브랜드 컬러를 자연스럽게 전달하는 매크로 크롭

단순한 장식은 피하세요: 그 순간은 스캔 순서 또는 브랜드 리콜을 도와야 합니다.

중요: 이것들은 코딩 지침이 아닙니다. 생성된 디자인이 암시해야 하는 비주얼 방향 신호입니다.


3. 프론트엔드 레퍼런스 규칙

생성된 모든 이미지는 다음을 명확하게 전달해야 합니다:

  • 레이아웃
  • 섹션 계층
  • 간격
  • 타이포그래피 스케일
  • 시각적 리듬
  • CTA 우선순위
  • 컴포넌트 스타일링
  • 이미지 처리
  • 전체 디자인 시스템

개발자나 코딩 모델이 이미지를 보고 어떻게 구축할지 이해할 수 있어야 합니다.

요청이 프론트엔드인 경우 모호한 추상 아트워크를 생성하지 마세요.


4. 히어로 미니멀리즘 규칙

히어로는 시네마틱하고, 명확하며, 의도적으로 느껴져야 합니다.

히어로 구성 편향

좌측 텍스트 / 우측 이미지 히어로는 가장 과도하게 사용된 AI 히어로 패턴입니다. 허용되지만, 기본 시작점이 되어서는 안 됩니다.

좌측 텍스트 / 우측 이미지가 진정으로 가장 강력한 적합이 아닌 경우 다음 중 하나를 선호하세요:

  • 전면 이미지 위 중앙 선언 (텍스트 아래 40%)
  • 배경 이미지 위 왼쪽 하단 텍스트
  • 배경 이미지 위 오른쪽 하단 텍스트
  • 왼쪽 상단 리드, 오른쪽 하단 보조
  • 스택 중앙 (레이블 / 헤드라인 / 서브 / CTA 모두 중앙, 울트라 미니멀리스트)
  • 이미지-캔버스 (깨끗한 오버레이 영역이 있는 전체 화면 이미지)
  • 오프그리드 편집 오프셋 (비대칭 텍스트 배치)
  • 오른쪽 1/3 캡션 + 왼쪽 2/3 비주얼 (역전 클래식)
  • 중앙 하단 (히어로 이미지 아래 40%에 텍스트)

선택한 후 일관되게 실행하세요.


5. 배경 자신감

배경은 채우기가 아닙니다. 배경은 디자인 도구입니다. 이 규칙은 당신이 그것을 그렇게 사용하도록 권한을 부여합니다.

섹션당 배경 모드를 선택할 때:

  • 단색 표면은 옵션이며, 항상 가장 강력한 선택은 아님
  • 전면 이미지, 컬러 블록 디프티크, 듀오톤 처리, 편집 측면 이미지 및 시네마틱 그라데이션을 사용하는 것이 자신 있고 의도적임
  • 브리핑이 "미니멀리스트" 또는 "깔끔한"을 말하지 않는 한 기본값보다 배경 다양성에 편향

6. CTA 및 전환 규율

생성된 모든 섹션은 명확한 1차 액션을 가져야 합니다. CTA를 숨기거나 모호하게 하지 마세요. 클릭 유도 문구를 장식으로 취급하지 마세요.

사이트 전체에서 매번 동일한 기본 알약 CTA를 사용하지 마세요. 선택:

  • 기본 알약
  • 아웃라인 / 고스트
  • 밑줄 인라인 링크
  • 배너 스타일 전체 너비
  • 대형 헤드라인 + 작은 CTA
  • 비주얼 아래 캡션

히어로의 주요 CTA는 페이지에서 가장 명확한 액션이어야 합니다. 내부 섹션 CTA는 더 조용할 수 있지만 여전히 존재해야 합니다.


7. 팔레트 규율

한 페이지, 하나의 팔레트.

생성된 모든 이미지는 하나의 일관된 컬러 시스템을 공유해야 합니다:

  • 1개의 브랜드 컬러 (우세)
  • 1개의 보조 컬러 (지원)
  • 1개의 악센트 컬러 (CTAs / 하이라이트)
  • 2개의 중립 (배경용 밝음, 텍스트용 어두움)
  • 1개의 추가 표면 톤 (선택 사항, 카드 / 대비)

페이지 전체의 각 이미지가 다른 이미지와 일치해야 함을 의미합니다. 다른 히어로 스타일을 선택하더라도 블루스 + 회색 + 하나의 강조 색상에 고정되어야 합니다.

일반적인 AI 이미지 생성은 각 호출에서 "창의적"이 되기 위해 팔레트를 무작위화합니다. 그렇게 하지 마세요. 시스템이 일관되게 유지되도록 하세요.

이미지 간 변형은 팔레트가 아닌 레이아웃, 배경 모드, 구성에서 나와야 합니다.

팔레트가 명시적으로 요청된 경우에만 변경하세요 — 스타일이나 분위기에 따라 추측하지 마세요.


8. 구체적인 생성 지침

히어로 이미지

히어로가 포함된 첫 번째 섹션:

  • 브랜드 분위기에 맞는 히어로 스케일 선택 (거대 선언, 중간 편집, 미니 미니멀리스트)
  • 과도한 기본값 없이 적절한 텍스트 계층 적용
  • 배경 이미지 위 텍스트인 경우 대비 유지

내부 섹션

첫 번째 히어로 이후의 모든 섹션:

  • 구성 다양화
  • 변형 엔진에서 서로 다른 앵커와 배경 모드를 사용
  • 내러티브 / 컨셉 스파인 유지
  • 시그니처 컴포넌트를 표시할 기회를 찾되, 강요하지는 마세요

CTA 섹션

전환을 목표로 하는 섹션 (일반적으로 마지막 섹션):

  • 프리미엄 마감, 강력한 프레이밍
  • 명확한 작업
  • 페이지의 나머지와 연결

9. 요약 — 21포인트 체크리스트

시스템은 항상 다음을 준수해야 합니다:

강제 규칙

  1. 각 이미지는 하나의 섹션입니다 — 더블-업 또는 병합 금지
  2. 히어로는 좌측 텍스트 / 우측 이미지 기본값을 피합니다
  3. 각 이미지는 분리되어 출력되거나 순차적으로 발표됩니다
  4. 모든 이미지는 하나의 일관된 팔레트를 공유합니다
  5. 페이지 전체에서 최소 3개의 다른 구성 앵커가 사용됩니다
  6. 페이지 전체에서 CTA 스타일이 최소 한 번 다양화됩니다

디자인 품질 7. [ ] 히어로 스케일은 브랜드 분위기에 맞습니다 (거대 / 중간 / 미니) 8. [ ] 배경 모드는 섹션별로 다양하며 알려져 있습니다 9. [ ] 이미지는 실제 프론트엔드 레퍼런스처럼 보입니다 10. [ ] 이미지는 과도한 AI 기본값(덩어리, 광채, 대시보드 스팸)을 피합니다 11. [ ] 섹션은 숨 쉴 수 있습니다 (빽빽하게 채우지 않음) 12. [ ] 섹션 계층이 명확합니다 13. [ ] 타이포그래피 계층이 강합니다 14. [ ] 텍스트는 배경에 대해 읽을 수 있습니다

전환 15. [ ] 각 섹션에는 명확한 역할이 있습니다 (후크 / 증명 / 교육 / 전환) 16. [ ] 1차 CTA는 항상 모호하지 않습니다 17. [ ] 1차 CTA 스타일은 전환 섹션에서 명확합니다

편차 방지 18. [ ] 구성은 "텍스트 왼쪽, 이미지 오른쪽"이 기본값이 아닙니다 19. [ ] 배경 모드는 선택의 폭이 넓으며 "솔리드"가 기본값이 아닙니다 20. [ ] 출력은 일반 AI 분위기 아트가 아닌 프론트엔드 레퍼런스에 최적화되어 있습니다 21. [ ] 내러티브 / 컨셉 스파인이 유지됩니다


고급 지침 (선택 사항 — 참조용)

이 시스템은 원하는 대로 이미지 데이터를 생성하는 모든 것과 함께 사용할 수 있습니다. 기본적으로 규칙과 변형 엔진을 적용하고 각 섹션에 대한 이미지 호출을 만듭니다.

이미지 데이터 생성 확장은 최고 품질의 이미지를 위해 설계되었으며, 모든 최신 이미지 도구와 호환됩니다. 옵션에 관계없이, 좋은 출력은 항상 강력한 지시에서 비롯됩니다. 이 스킬은 다음을 보장합니다.

위 규칙을 준수하는 사용자 프롬프트의 예:

  • "6개 섹션, SaaS 스타일, 중간 편집 히어로, 거대 메트릭 스트립 및 분할 테스트모니얼 벽이 있는 이커머스 랜딩 페이지 생성"
  • "10개 이미지 전체 웹사이트 템플릿, 어두운 테마, 거대 선언 히어로, 여정 / 순례 내러티브"
  • "2개 섹션 랜딩 섹션: 히어로 및 CTA, 클린 라이트 모드, 미니 미니멀리스트"
  • "4개 섹션 마케팅 페이지, 에이전시 스타일, 오프그리드 레이아웃 및 강한 타이포그래피 대비"

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Leonxlnx/imagegen-skills

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

Leonxlnx/imagegen-skills

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

Leonxlnx/imagegen-skills

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

관련 스킬