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>/.

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

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

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

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

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

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

블로그·랜딩 글의 **OG 이미지 / 소셜 카드**(Twitter / Instagram / LinkedIn)를 플랫폼 프리셋에 맞춰 자동 생성한다. 배경 일러스트만 Codex 이미지 모델로 뽑고, 제목·태그 같은 글자는 AI에 맡기지 않고 공용 후처리 모듈(`scripts/lib/compose-text.js`)로 합성한다. 사용자가 "OG 이미지", "소셜 카드", "imagine-og", "Twitter 카드" 등을 말하면 이 스킬이 담당한다. 블로그 수백 편을 일괄 렌더하는 `--bulk` 모드도 지원한다.

웹 배경·포장지·스티커·UI 텍스처용 **패턴/텍스처 이미지**를 두 모드로 생성한다. `seamless` 모드는 타일링 가능한 512/1024/2048 PNG를 만들고 `scripts/lib/seamless.js`로 (w/2, h/2) offset → 이음새 heal(feather blur + grain 재주입) → 4×4 타일링 프리뷰를 자동 산출한다. `large` 모드는 타일링 불필요한 단일 큰 배경을 만든다. color variants는 AI 재호출 없이 sharp `.modulate({ hue })` **로컬 연산**으로만 생성해 쿼터를 보호한다. 사용자가 "패턴 만들어줘", "seamless 타일", "배경 텍스처", "imagine-pattern" 등을 말하면 이 스킬이 담당한다.

2D 도트 인디 게임·픽셀 아트 NFT·레트로 SNS 프로필용 **정수 픽셀 그리드 스프라이트**를 생성한다. AI가 뽑은 "픽셀 스타일 이미지"를 `scripts/lib/pixelize.js`로 **후처리 스냅**(nearest-neighbor 다운샘플 → 팔레트 클램프 → N× 업스케일)해 실제 16/32/48/64 그리드에 정렬한다. 스냅 없이 AI 원본을 그대로 저장하지 않는다. JPEG 저장은 금지(PNG only). 사용자가 "픽셀 캐릭터", "도트 스프라이트", "imagine-pixel", "픽셀 아트" 등을 말하면 이 스킬이 담당한다.

Apple Podcasts·Spotify·오디오북·"Audio Only" 유튜브용 **3000×3000 팟캐스트 커버 아트**와 에피소드별 variant를 생성한다. AI는 1024×1024 배경·모티프만 그리고 `scripts/lib/upscale.js`로 3000×3000까지 확대(sharp Lanczos3 기본, Real-ESRGAN opt-in)한 뒤 `scripts/lib/compose-text.js`로 쇼 이름·에피소드 제목을 시스템 폰트로 합성한다. 출력은 Apple Podcasts 규격(JPEG, RGB, 3000×3000, 500KB~500MB)을 **자동 검증**하고 55×55 축소 프리뷰에서 엔트로피·대비를 측정해 가독성 경고를 발행한다. 사용자가 "팟캐스트 커버", "imagine-podcast", "오디오북 커버", "플레이리스트 커버", "에피소드 커버" 등을 말하면 이 스킬이 담당한다.

인물 사진을 **로컬에서만** 보정·변환하는 `edit.js` 확장 모드. 하위 모드로 `bg-swap`(배경 교체), `stylize`(수채/유화/아크릴/만화 변환), `restore`(노후 사진 복원), `group-tone`(단체 사진 톤 통일)을 제공한다. 모든 경로는 `./images/portraits/` 안으로 **강제**되며(output-allocator가 경로 탈출을 거절), manifest에는 파일 경로의 **SHA-256 해시 + 모드·시각 메타만** 저장한다. 얼굴 썸네일·이미지 바이트·EXIF·raw prompt는 어떠한 산출물에도 남기지 않는다. 사용자가 "증명사진 배경", "프로필 사진 스타일 변환", "오래된 사진 복원", "단체 사진 톤 통일", "imagine-portrait" 등을 말하면 이 스킬이 담당한다.

밋업·컨퍼런스·학과 행사·사내 워크숍·Discord/Slack/카톡 공지용 **이벤트 포스터/홍보물**을 생성한다. 배경과 장식 모티프만 Codex 이미지 모델로 뽑고, 제목·부제·날짜·장소·연사·CTA 같은 **정보 텍스트는 YAML/JSON 입력**을 받아 `scripts/lib/poster-layouter.js`가 결정적 레이아웃으로 합성한다. 포스터(3:4.24 A4)·배너(16:9)·카드(1:1) 3종을 한 번에 출력한다.

Generate or edit images with Codex. Use this skill whenever the user says "imagine ...", asks to create an image from a text description, transform or restyle an existing image, produce artwork / illustrations / logos / concept art, make image variations, or asks for any kind of AI image generation or image-to-image editing. All outputs are saved inside the current project's `./images/` folder by default.

Keynote·PowerPoint·Google Slides용 **슬라이드 섹션 일러스트**를 같은 스타일로 일괄 생성한다. 입력은 섹션 제목 리스트(예: "문제 정의, 접근 방법, 결과, 다음 단계")이며, 출력은 투명 배경 PNG 세트로 슬라이드 텍스트 박스와 겹치지 않도록 좌·우 40% 세이프존에 일러스트를 배치한다. 이미지 내부에 텍스트·숫자·차트를 넣지 않는다. Style Guardian은 `imagine-service-section`과 **동일한 시리즈 일관성 체인**을 공유해 "홈/기능/가격/블로그" 등 같은 데크·캠페인의 톤을 유지한다. 사용자가 "슬라이드 일러스트", "발표 자료 비주얼", "imagine-slide", "섹션 이미지 세트" 등을 말하면 이 스킬이 담당한다.

`imagine-pixel`로 만든 캐릭터의 **애니메이션 스프라이트 시트**를 Unity/Godot/Aseprite가 바로 import할 수 있는 포맷으로 생성한다. 프레임은 **프레임 단위 개별 호출**로 뽑고, 첫 프레임을 **image→image reference**로 삼아 연속 프레임의 의상·머리색·팔레트가 드리프트하지 않도록 한다. `scripts/lib/pixelize.js`로 정수 픽셀 그리드 스냅, `scripts/lib/sheet-composer.js`로 가로 연결 시트 PNG + Aseprite 호환 JSON 메타를 출력한다. reference 체인 유지를 위해 **concurrency는 1로 강제**된다. 사용자가 "스프라이트 시트", "애니메이션 프레임", "imagine-sprite", "idle/walk/attack 애니메이션" 등을 말하면 이 스킬이 담당한다.

YouTube 썸네일 전용 생성기. 배경/인물 일러스트는 Codex 이미지 모델로 뽑고, 제목 텍스트는 **AI가 아니라 Node 후처리**(`scripts/lib/compose-text.js`)로 합성한다. 한국어 글자 깨짐을 원천 차단한다. 사용자가 "썸네일 만들어줘", "imagine-thumb <제목>", "유튜브 썸네일" 등을 말하면 이 스킬이 담당한다. 기본 A/B용 2장을 같은 제목 텍스트로 합성해 저장한다.

모바일 앱 화면의 **스타일 레퍼런스 이미지**를 빠르게 뽑는다. 실제 픽셀 퍼펙트 UI·구현 가능한 디자인이 아니라, Figma를 켜기 전에 "대충 이런 느낌인가?"를 여러 장 나열해보기 위한 **무드 보드**다. iOS · Android Material 3 · 한국 fintech(Pretendard 스타일) · 웹 모바일 프리셋을 제공하고, Style Guardian manifest에 `system` · `palette_hex` · `corner_radius_estimate`를 저장해 다음 호출에서 같은 톤으로 이어갈 수 있다. 사용자가 "UI 목업", "앱 화면 레퍼런스", "imagine-ui", "스크린 레퍼런스" 등을 말하면 이 스킬이 담당한다.