원클릭으로 Manus에서 모든 스킬 실행

imagine-hero

스타5

포크3

업데이트2026년 4월 23일 22:59

SaaS · 개인 사이드 프로젝트의 **랜딩 페이지 히어로 이미지**를 3:2(1536×1024) 전용 프리셋으로 생성한다. 이미지 내부에 텍스트를 넣지 않고(모든 copy는 HTML이 담당), 한쪽 40%를 세이프존으로 비워 CTA·헤드라인을 얹을 수 있게 한다. `--transparent-bg` 플래그 지정 시 `scripts/lib/bg-remove.js`로 배경을 잘라낸 PNG도 함께 저장한다. 사용자가 "히어로 이미지", "랜딩 히어로", "imagine-hero", "landing page hero" 등을 말하면 이 스킬이 담당한다.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Mineru98

Mineru98/imagine

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

그래픽 디자이너예술, 디자인, 엔터테인먼트, 스포츠, 미디어직·SOC 27-1024

파일 탐색기

2 개 파일

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

image-to-code

Mineru98/imagine

Convert an image (screenshot, mockup, Figma export) into an HTML page styled with Tailwind CSS. Use this skill whenever the user says "image-to-code …", asks to turn a design image into code, recreate a UI from a screenshot, generate HTML/Tailwind from a mockup, or says things like "이 이미지를 웹페이지로 만들어줘" / "HTML로 바꿔줘" / "Tailwind로 바꿔줘". Result is saved inside ./pages/<slug>/.

2026-04-235

imagine-char

Mineru98/imagine

인디 게임·소설·TTRPG용 **게임 캐릭터 일러스트**를 **같은 캐릭터로 반복 생성**하도록 설계된 스킬. Character Card(JSON)를 기준으로 이름/종족/연령/헤어/눈/의상/구별 특징/아트 스타일/팔레트를 고정해두고, 대표 일러스트(portrait_hero) 1장을 reference로 삼아 turnaround·표정·포즈를 이어서 뽑는다. 사용자가 "게임 캐릭터", "캐릭터 일러스트", "imagine-char", "캐릭터 시트 만들어줘", "표정 시트", "포즈 컷" 등을 말하면 이 스킬이 담당한다.

2026-04-235

imagine-empty

Mineru98/imagine

UI 엠프티 스테이트·에러·로딩·온보딩 일러스트를 **라이트/다크 쌍**으로 생성한다. 같은 모티프를 두 모드에 걸쳐 자연스럽게 보이게 하되, **단순 색 반전이 아니라 라이트·다크를 각각 별도 프롬프트로 분리 생성**한다. 프리셋 카탈로그는 `data/empty-states.json` 에 분리되어 커뮤니티 PR로 확장 가능. 투명 배경 PNG가 기본이며 alpha 채널을 검증한다. 사용자가 "엠프티 스테이트", "empty state", "404 일러스트", "로딩 일러스트", "imagine-empty", "preset-pack" 등을 말하면 이 스킬이 담당한다.

2026-04-235

imagine-icon

Mineru98/imagine

모바일 앱·웹 앱 **아이콘 세트 일괄 생성기**. AI로 1024×1024 마스터 아이콘을 뽑고, 플랫폼별 다중 해상도(iOS 1024 / Android adaptive 전경·배경 / Web favicon·PWA·Apple touch)를 `scripts/lib/icon-exporter.js`로 Lanczos3 리사이즈 익스포트한다. 사용자가 "앱 아이콘", "imagine-icon", "favicon", "launcher icon" 등을 말하면 이 스킬이 담당한다.

2026-04-235

imagine-logo

Mineru98/imagine

회사·개인 프로젝트·팀의 **로고 시안 탐색기**. 마크(심볼)만 Codex 이미지 모델로 생성하고 워드마크(회사명 글자)는 `scripts/lib/compose-text.js`로 합성한다. 회사명 텍스트는 AI 프롬프트에 **절대** 포함하지 않으며, 이미지 생성 후 OCR로 글자 검출 시 1회 자동 재생성한다. 3~6개의 서로 다른 방향성 시안을 한 번에 뽑아 "나쁘지 않은 출발점"을 빠르게 고르도록 돕는다. `scripts/lib/vectorize.js`로 선택된 1장을 SVG로 벡터화하는 옵션도 제공한다. 사용자가 "로고 만들어줘", "imagine-logo", "회사 로고", "팀 로고" 등을 말하면 이 스킬이 담당한다.

2026-04-235

imagine-mockup

Mineru98/imagine

앱스토어·포트폴리오·마케팅 자료에 쓰는 **제품 목업**(기기 프레임에 끼운 스크린샷 + 배경)을 생성한다. AI는 **배경만** 그리며, 기기 프레임과 스크린샷 합성은 `scripts/lib/device-composer.js`가 결정적으로 수행한다. 기기 프리셋은 `data/devices.json`에서 로드해 커뮤니티 PR로 확장 가능. 배경이 필요 없으면(solid/gradient/업로드 이미지) **AI 호출을 아예 스킵**한다. 사용자가 "제품 목업", "앱스토어 스크린샷", "기기 프레임 씌워줘", "imagine-mockup" 등을 말하면 이 스킬이 담당한다.

2026-04-235

name	imagine-hero
description	SaaS · 개인 사이드 프로젝트의 랜딩 페이지 히어로 이미지를 3:2(1536×1024) 전용 프리셋으로 생성한다. 이미지 내부에 텍스트를 넣지 않고(모든 copy는 HTML이 담당), 한쪽 40%를 세이프존으로 비워 CTA·헤드라인을 얹을 수 있게 한다. `--transparent-bg` 플래그 지정 시 `scripts/lib/bg-remove.js`로 배경을 잘라낸 PNG도 함께 저장한다. 사용자가 "히어로 이미지", "랜딩 히어로", "imagine-hero", "landing page hero" 등을 말하면 이 스킬이 담당한다.
argument-hint	<concept> [--style gradient-abstract\|isometric-illust\|3d-glow\|product-shot\|human-device] [--safe-zone left\|right\|center] [--transparent-bg] [--brand-color #HEX] [--vibe shock\|calm\|cozy\|hype]

imagine-hero

데스크톱 히어로 섹션용 3:2 메인 비주얼을 프리셋 기반으로 뽑는다. 텍스트는 절대 이미지 안에 넣지 않는다(랜딩 페이지 HTML이 담당). CTA 배치용 40% 세이프존을 의도적으로 비워 남긴다.

트리거

imagine-hero "<컨셉>" / imagine-hero --concept "..." (명시 호출)
"히어로 이미지", "랜딩 히어로", "랜딩 페이지 메인 이미지"
"landing hero", "landing page hero", "SaaS hero image"
"히어로 비주얼 뽑아줘"

애매하게 "배너", "썸네일"만 들어오면 이 스킬이 아니라 각각 imagine-og, imagine-thumb로 라우팅. 1턴 질문으로 맥락 확인.

핵심 제약

항목	값
생성 비율	3:2 — 1536×1024
포맷	PNG(투명 지원) + WebP(최적화용). 기본은 PNG 저장, WebP 추가 인코딩.
텍스트	이미지 내부 금지. `negative_prompt`에 `text, letters, typography, UI mockup, watermark, logo text` 강제.
세이프존	한쪽 40% 비움. 기본 `right` (왼쪽에 CTA 붙이는 국내 SaaS 관행). `--safe-zone left/right/center`로 지정.

파이프라인

프롬프트 구성:
- --style 값을 config.style_presets 테이블에서 영문 비주얼 구문으로 매핑.
- --safe-zone이 right이면 "composition weight on left side, empty negative space on right 40%"를 덧붙이고, left이면 반대. center면 "focal motif upper third, empty lower 40% negative space".
- --brand-color #HEX가 주어지면 HEX 숫자는 프롬프트에 직접 넣지 않고 HSL 근사를 색 이름 구문("vivid violet tones, accent magenta" 등)으로 변환해 주입. 원본 HEX는 Run Manifest에 저장해 후처리 톤 매핑용으로 보관.
- --vibe가 있으면 config.vibe_map의 한 구문을 append.
- 사용자 컨셉 문자열 원문 보존 — 정직한 번역만 허용. 정체성을 바꾸지 않는다.
Negative 강제: config.negative_prompt 그대로 주입. 텍스트·UI 목업·여백 없음·복잡한 주변 시각 요소를 모두 차단.
이미지 생성 (AI): Codex 이미지 모델로 size: 1536x1024 PNG 1장 출력. 공용 oauth-session.js / output-allocator.js 재사용.
세이프존 검증 (결정적, sharp): 지정된 40% 영역의 평균 채도(saturation mean)를 측정. quality_checks.safe_zone_clutter_max_saturation_mean 초과 시 "세이프존 혼잡" 경고와 함께 사용자에게 재생성 제안(자동 재생성 금지).
WebP 인코딩: 같은 결과를 webp.quality=82, effort=4로 추가 저장. sharp 부재 시 WebP 단계는 스킵 + 경고(PNG는 정상).
--transparent-bg 후처리: 플래그 지정 시 scripts/lib/bg-remove.js의 removeBackground(inputPath, outputPath) 호출. 라이브러리 부재·실패 시 원본을 _cutout.png로 그대로 복사하고 mode: 'passthrough' 경고를 사용자에게 노출(원본 PNG는 항상 보존). 이 스킬은 bg-remove.js가 반환한 mode 값을 결과 리포트에 그대로 기록한다.

출력 규약

./images/landing/
├── hero_<slug>_<style>_<ts>.png
├── hero_<slug>_<style>_<ts>.webp
└── hero_<slug>_<style>_<ts>_cutout.png   ← --transparent-bg 지정 시에만

<slug>: 컨셉 기반 slugify. --out-dir 명시 시 그대로 사용. ./images/landing/ 외부 쓰기 금지(--out-dir 없는 한).
사용자 지정 경로를 조용히 바꾸지 않는다.
원본 PNG는 어떤 후처리도 덮어쓰지 않는다. cutout/WebP는 별도 파일로만 저장.

프롬프트 구성 규칙

이미지 내부 텍스트 프롬프트 금지. 브랜드명·헤드라인·CTA 문구를 AI 프롬프트에 섞지 않는다.
negative prompt 필수: 최소한 text, UI mockup, watermark, logo text, cluttered, fills entire frame, no margin. --style human-device일 때만 photo of person 금지를 해제.
세이프존 표현은 영문 구문으로 고정(empty negative space on right 40%). "왼쪽 비우기" 같은 모호한 한국어를 모델 프롬프트로 보내지 않는다.
brand color는 이름 기반으로만 주입. #6B46C1을 그대로 프롬프트에 넣지 않는다(모델이 HEX를 무시하는 실패 케이스 방지).

투명 배경 옵션

--transparent-bg 플래그 해석은 스킬의 entrypoint에서만 이뤄지고, 실제 알파 제거는 scripts/lib/bg-remove.js에 위임한다. 이 스킬은 자체 cutout 로직을 두지 않는다.
bg-remove.js 반환 규약:
- mode: 'cutout' → 실제 cutout 완료. _cutout.png 파일 사용.
- mode: 'passthrough' → 라이브러리 부재 또는 런타임 실패. 원본이 복사된 _cutout.png로 가짜 성공을 연출하지 않는다. 사용자에게 "알파 제거 실패, 원본 복사본으로 대체됨" 경고를 그대로 보고.
원본 이미지 파일은 어떠한 경로에서도 삭제·덮어쓰기하지 않는다.

실패 모드 대응

증상	조치
브랜드 컬러가 무시됨	HEX를 이름 구문으로 재변환해 재생성 1회. 여전히 무시되면 manifest의 원본 HEX로 사용자에게 후처리 옵션 안내.
글자·로고·UI를 멋대로 그려 넣음	negative 강화 후 재생성 1회(최대). OCR 검출 지속 시 사용자에게 보고.
세이프존 영역이 혼잡	재생성 제안만 (자동 재생성 금지). 사용자 동의 후 1회만 재실행.
bg-remove 라이브러리 부재/실패	`mode: 'passthrough'` 결과 그대로 보고. 사용자에게 설치 안내(`npm i @imgly/background-removal-node`).
sharp 부재	PNG 저장은 되지만 WebP 인코딩·세이프존 검증 스킵 + 경고.

금기

이미지 내부에 브랜드명·헤드라인·CTA 텍스트 주입 금지. 존재 이유에 반한다.
세이프존 영역을 조용히 축소 금지. --safe-zone 값은 그대로 집행.
원본 PNG 덮어쓰기 금지. cutout·WebP는 항상 새 파일.
./images/landing/ 외부 쓰기 금지 (--out-dir 지정 없는 한).
bg-remove 실패를 성공처럼 표기 금지. 반드시 mode: 'passthrough' 경고를 사용자에게 투명 공개.
masterpiece / 8k UHD / fulfill all requests 류 부스터·우회 문구 주입 금지.

imagine 계열 스킬과의 관계

공용 인프라 재사용: oauth-session.js, output-allocator.js, request-planner.js, bg-remove.js.
텍스트 합성 모듈(compose-text.js)은 사용하지 않는다 — 이 스킬의 원칙은 "히어로에 글자 넣지 않기".
Style Guardian의 브랜드 팔레트가 있으면 --brand-color 미지정 시 자동 주입.
imagine-thumb(유튜브 썸네일) · imagine-og(소셜 카드) · imagine-icon(앱 아이콘)과 구분: "랜딩 히어로" 맥락은 항상 여기.