Communitygithub.com

랜딩페이지 비주얼 팩토리

보존 등급(정확한 제품, 브랜드 환경, 개념 지원)에 따라 비주얼을 계획하고 생성합니다. 전략 기반 샷 선택과 시각적 QA를 사용하며, 일반적인 분위기 프롬프트와는 차별화됩니다.

랜딩페이지 비주얼 팩토리란 무엇인가요?

이 스킬은 제품, 패키징, UI 등이 포함된 페이지의 비주얼을 전략적으로 계획하고 생성합니다. 단순히 예쁜 이미지를 만드는 것이 아니라, 판매되는 제품을 시각적으로 속이지 않으면서 전환율을 높이는 것이 목표입니다. Bloom 및 Nano Banana와 같은 이미지 제공자를 지원하며, 각 비주얼은 '정확한 제품 보존', '브랜드 환경 보존', '개념 지원' 세 가지 등급 중 하나로 분류되어 프롬프팅됩니다. 또한 샷 우선순위 계층, 상세한 프롬프팅 규칙, 엄격한 시각적 QA 루브릭을 제공하여 생성된 모든 이미지가 전략 및 브랜드 가이드라인에 부합하도록 보장합니다. 이 스킬은 Cowork, Claude Code 등 사용자가 정의한 폴더 기반 스킬을 지원하는 AI 에이전트 플랫폼에서 사용하도록 설계되었습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/TheMattBerman/landing-page-factory/tree/HEAD/skills/page-visuals

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

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

문서

페이지 비주얼

목표는 '예쁜 이미지 만들기'가 아닙니다. 목표는 판매되는 제품을 시각적으로 속이지 않으면서 전환율을 높이는 것입니다.

제품, 패키징, UI 또는 자재가 정밀함을 요구한다면 그에 맞게 경로를 조정하십시오.

필수 입력

  1. workspace/pages/[page-name]/strategy.json
  2. workspace/brand/profile.md
  3. workspace/brand/palette.json
  4. workspace/pages/[page-name]/copy.md
  5. 운영자가 제공한 제품 참조, 패키징 참조, 스크린샷 또는 이미지 에셋

제공자 정책

Page Factory 브랜드 아티팩트를 진실의 원천으로 사용하십시오.

  • workspace/brand/extract.md 및 workspace/brand/profile.md는 정식 브랜드 이해를 정의합니다.
  • 제공자 측 브랜드 온보딩은 이미지 생성을 위한 지원 컨텍스트이며, 추출 또는 프로파일링을 대체하지 않습니다.
  • 선호 제공자 순서: Bloom 우선, Nano Banana 차선, 운영자 에셋(신뢰도가 중요한 경우)

제공자 선택은 필수입니다.

Bloom이 실행에 구성되거나 예상되는 경우, 먼저 Bloom을 확인해야 합니다. Bloom이 의도된 제공자임에도 Cowork-네이티브 이미지 생성, 일반 내장 이미지 도구 또는 임시 이미지 프롬프트를 조용히 대체하지 마십시오.

Bloom이 구성되지 않았거나, 차단되었거나, 연결할 수 없는 경우:

  1. 명시적으로 그 사실을 말하십시오.
  2. 운영자에게 다음 옵션을 문의하십시오.
    • Bloom 제공/구성
    • Nano Banana 차선책 사용
    • 수동/운영자 에셋 제공
  3. 신뢰도가 중요한 실행에서 약한 제공자로 조용히 계속 진행하지 마십시오.

Nano Banana가 차선책 경로인 경우, 운영자가 필요한 어댑터/명령 또는 API 기반 워크플로우를 제공했는지 확인하십시오. 문서에 이름이 나와 있다고 해서 Nano Banana가 존재한다고 가정하지 마십시오.

Bloom 관련 지침

Bloom을 사용할 수 있는 경우:

  • 브랜드가 Bloom에 이미 존재하는지 확인하십시오.
  • 그렇지 않은 경우, 소스 URL에서 브랜드를 온보딩하십시오.
  • Bloom 브랜드 컨텍스트가 약하거나 불완전한 경우, 저장소의 추출된 브랜드 사실, 프로필 및 팔레트를 사용하여 채우십시오.
  • 정확한 제품 샷을 생성하기 전에 제품, 패키징 또는 UI 참조를 업로드하십시오.
  • 기본 구성이 좋고 변경 요청이 좁은 경우, 전체 재생성 대신 Bloom 편집/크기 조정을 사용하십시오.

다음과 같은 경우 Nano Banana로 차선책을 사용하십시오:

  • Bloom을 사용할 수 없거나 구성되지 않은 경우
  • Bloom 온보딩이 반복적으로 실패하는 경우
  • Bloom에 크레딧이 부족한 경우
  • 필요한 이미지가 합리적인 재시도 후에도 시각적 QA 루브릭을 통과하지 못하는 경우

Nano Banana로 전환하기 전에 Bloom이 사용되지 않은 이유를 명시적으로 기록하십시오:

  • 사용 불가
  • 구성되지 않음
  • 런타임에 의해 차단됨
  • 재시도 후 QA 실패
  • 크레딧 부족

제공자 도우미

제공자 차선책과 함께 실제 이미지 생성을 실행하려면 스킬-로컬 이미지 제공자 진입점을 사용하십시오:

bash skills/page-visuals/scripts/image-provider.sh \
  --page-name [page-name] \
  --shot-id [shot-id] \
  --prompt "[prompt]" \
  --preservation-class [exact_product|branded_environment|concept_support]

skills/page-visuals/scripts/를 Cowork 또는 스킬 폴더만 업로드하는 모든 런타임의 기본 인터페이스로 사용하십시오. 저장소 루트의 /scripts 복사본은 로컬 개발 편의를 위한 것이며 패키징 요구 사항이 아닙니다.

보존 등급

계획된 모든 비주얼은 프롬프팅 전에 분류되어야 합니다.

1. 정확한 제품 보존

제품의 모양, 재료, 패키징, UI 또는 산업 디자인이 신뢰나 이해에 중요한 경우 사용하십시오.

요구 사항:

  • 실루엣 보존
  • 비율 보존
  • 재료 외관 보존
  • 관련된 패키징 보존
  • 관련된 UI/화면 콘텐츠 보존
  • 가능할 때마다 참조 사용

2. 브랜드 환경 보존

제품이 브랜드별 컨텍스트에 놓일 수 있지만 완벽한 객체 정확도가 필요하지 않은 경우 사용하십시오.

요구 사항:

  • 팔레트와 대상 세계 일치
  • 브랜드 분위기와 카테고리 현실성 유지
  • 스톡 포토 연출 피하기

3. 개념 지원 비주얼

이미지가 설명적이거나, 분위기 조성용이거나, 신뢰도가 중요한 제품 증명이 아닌 배경 지원인 경우 사용하십시오.

요구 사항:

  • 메커니즘 또는 섹션 작업 지원
  • 카피에 종속되도록 유지
  • 가짜 제품 세부 사항 도입 금지

샷 우선순위 계층

다음 순서로 생성하십시오:

  1. 증명 / 메커니즘 비주얼
  2. 제품 명확성 비주얼
  3. 라이프스타일 열망 비주얼
  4. 장식용 지원 비주얼

시간이나 예산이 제한된 경우, 4번을 먼저 제거하십시오.

필수 샷 계획 출력

workspace/pages/[page-name]/visuals/index.md를 다음 형식으로 작성하십시오:

# 비주얼 계획: [page-name]
생성일:

| 샷 | 섹션 | 보존 등급 | 목적 | 필수 참조 | 상태 |
|---|---|---|---|---|---|
| hero-1 | hero | 정확한 제품 / 브랜드 환경 / 개념 지원 | | | 계획됨 |

비주얼이 실제로 생성되면, 가능한 경우 제공자 메타데이터를 사용하여 계획을 확장하십시오:

## 제공자 실행

| 샷 | 제공자 | 브랜드 컨텍스트 출처 | 소스 이미지 ID / 참조 | 결과 |
|---|---|---|---|---|
| hero-1 | bloom | 저장소 프로필 + Bloom 온보딩 | bloom:img_123, 로컬 제품 참조 | 승인 |

또한 workspace/pages/[page-name]/visuals/manifest.json을 기계가 읽을 수 있는 필드로 작성하십시오:

  • 사용된 제공자
  • 해당되는 경우 차선책 제공자 및 차선책 이유
  • 해당되는 경우 Bloom 브랜드 ID 및 이미지 ID
  • 샷에 사용된 소스 참조
  • 로컬 출력 경로
  • 상태 및 메모

프롬프팅 규칙

항상 다음을 포함하십시오:

  • 의도된 섹션 및 작업
  • 보존 등급
  • 구성 요구 사항
  • 팔레트 방향
  • 분위기 / 조명
  • 충실도 제약 조건
  • 명시적 제외 사항

정확한 제품 보존의 경우

프롬프트는 다음을 명시해야 합니다:

  • 객체 실루엣과 비율 보존
  • 재료 마감 보존
  • 참조에서만 패키징/UI 보존
  • 발명된 텍스트 또는 변경된 브랜드 마크 없음
  • 제공자가 지원하는 경우 생성 전에 참조 첨부 또는 업로드

브랜드 환경의 경우

프롬프트는 다음을 명시해야 합니다:

  • 대상자 컨텍스트
  • 진정한 사용 순간
  • 환경, 소품, 의상 또는 조명을 통한 팔레트 통합
  • 준비된 스톡 포토 포즈 없음

개념 지원의 경우

프롬프트는 다음을 명시해야 합니다:

  • 섹션 작업
  • 미니멀리즘 / 추상화 수준
  • 가짜 주장을 담은 세부 사항 없음

스크린샷 / UI 처리

전략에서 스크린샷 처리가 필수라고 명시된 경우:

  • 스크린샷 또는 UI 참조 보존
  • 가짜 UI 정밀도를 즉석에서 만들지 마십시오.
  • 실제 UI 에셋이 없는 경우, 플래그를 올리고 샷 계획을 하향 조정하십시오.

시각적 QA 루브릭

생성된 모든 이미지는 점수를 매겨야 합니다:

차원점수 /10통과 임계값
섹션 적합성8
팔레트 충실도8
실루엣 / 기하학 충실도해당 시 8
재료 충실도해당 시 8
패키징 / UI 충실도해당 시 8
구성 명확성8
아티팩트 부재9
텍스트 아티팩트 부재10

필수 차원에서 실패하면 거부하고 재생성하십시오.

실패 로직

정확한 제품 충실도가 반복적으로 실패하는 경우:

  • 느슨한 브랜드 분위기 프롬프트 사용 중단
  • 더 엄격한 참조 요구
  • 가능한 경우 보존된 사진 또는 운영자 제공 에셋으로 하향 조정
  • 모델이 어려움을 겪는다고 해서 정확성을 가장하지 마십시오.

Bloom이 첫 번째 제공자이고 반복적으로 실패하는 경우:

  • 핵심 충실도보다 구성이나 자르기가 문제라면 전체 재생성보다 제공자 네이티브 편집/크기 조정을 먼저 시도하십시오.
  • Bloom이 여전히 QA를 통과하지 못하면 Nano Banana로 전환하십시오.
  • 두 제공자 모두 실패하고 샷이 신뢰도에 중요한 경우, 실제 운영자 에셋을 요구하십시오.

Cowork가 Bloom을 자체 기본 이미지 동작으로 조용히 대체하지 못하게 하십시오. 런타임이 Bloom에 접근할 수 없으면 일시 중지하고 그렇게 알리십시오.

평가 참조

점수 기준 및 통과 임계값에 대해서는 skills/page-qa/references/eval-rubric.md를 참조하십시오.

핸드오프

비주얼이 승인된 후 page-build를 실행하십시오.

Individual skills in this repo

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

TheMattBerman/landing-page-factory

Build an evidence-backed brand profile from site extract and page strategy. Separates observed facts from synthesis so downstream skills preserve the brand instead of rewriting it.

TheMattBerman/landing-page-factory

Top-level operator skill for Landing Page Factory. Classifies requests, chooses stage order, enforces prerequisites and hard stops, manages variant pages, reruns changed stages, and handles page-package admin.

TheMattBerman/landing-page-factory

Build a deployable landing page from strategy, copy, visuals, and brand profile using category-aware routing, preservation hierarchy, and explicit QA. Single-file HTML output.

TheMattBerman/landing-page-factory

Write mechanism-preserving, proof-disciplined landing page copy from strategy, brand profile, and extract language bank. Includes mandatory sharpness audit and claim control.

TheMattBerman/landing-page-factory

Final landing-page QA pass against strategy, proof provenance, mechanism clarity, trust preservation, accessibility, and anti-slop. Gates whether a page is shippable or draft-only.

TheMattBerman/landing-page-factory

Normalize raw extract or manual brief into a page strategy artifact: mechanism, offer, audience, proof provenance, CTA, preservation plan, and review flags. Mandatory before copy or build.

TheMattBerman/landing-page-factory

Extract operator-grade source facts from a website or manual brief: claims, proof, CTAs, mechanism language, trust cues, visual patterns, and page structure with provenance. First stage of Page Factory.

관련 스킬