菜单
밋업·컨퍼런스·학과 행사·사내 워크숍·Discord/Slack/카톡 공지용 **이벤트 포스터/홍보물**을 생성한다. 배경과 장식 모티프만 Codex 이미지 모델로 뽑고, 제목·부제·날짜·장소·연사·CTA 같은 **정보 텍스트는 YAML/JSON 입력**을 받아 `scripts/lib/poster-layouter.js`가 결정적 레이아웃으로 합성한다. 포스터(3:4.24 A4)·배너(16:9)·카드(1:1) 3종을 한 번에 출력한다.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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", "회사 로고", "팀 로고" 등을 말하면 이 스킬이 담당한다.
| name | imagine-poster |
| description | 밋업·컨퍼런스·학과 행사·사내 워크숍·Discord/Slack/카톡 공지용 **이벤트 포스터/홍보물**을 생성한다. 배경과 장식 모티프만 Codex 이미지 모델로 뽑고, 제목·부제·날짜·장소·연사·CTA 같은 **정보 텍스트는 YAML/JSON 입력**을 받아 `scripts/lib/poster-layouter.js`가 결정적 레이아웃으로 합성한다. 포스터(3:4.24 A4)·배너(16:9)·카드(1:1) 3종을 한 번에 출력한다. |
| argument-hint | <event.yaml|event.json> [--formats poster,banner,card] [--theme cyber-gradient|retro-print|k-indie-poster|academic-clean|festival-vibrant] [--out-dir <path>] |
한국어 조판과 정보 밀도가 높은 포스터를 AI에게 글자로 그리게 하지 않는다. 입력은 구조화된 이벤트 데이터, 출력은 폰트로 조판된 3종 규격.
imagine-poster ./event.yaml / imagine-poster ./event.jsonimagine-poster theme-preview --theme <name> (배경 프리뷰만)title: "AI 엔지니어 밋업 #7"
subtitle: "RAG in Production"
date: "2026-05-17 (토) 14:00"
venue: "서울 강남 구글 캠퍼스"
speakers:
- { name: "김미누", role: "Usefullabs", photo: "./speakers/miner.jpg" }
- { name: "Jane Doe", role: "OpenAI", photo: "./speakers/jane.jpg" }
cta: "sign-up.dev/ai-meetup-7"
theme: "cyber-gradient"
필수 키: title. 나머지는 선택. 누락된 필드는 포스터에서 해당 영역을 조용히 생략한다(자리채움 문구 창작 금지).
--theme 또는 event.theme을 data/poster-themes.json에서 조회해 bg_prompt와 tokens(fg / accent / muted HEX)를 얻는다. 카탈로그에 없으면 default_theme: cyber-gradient로 폴백하고 경고.bg_prompt만 모델에 전달 (ai_generate_size: 1024x1536). 이벤트 정보(title·date·venue·speakers·cta)는 프롬프트에 넣지 않는다. Negative는 전역 text, letters, typography, faces, people, watermark, logo text, readable words 강제.scripts/lib/poster-layouter.js의 layoutPoster(bgPath, eventData, outPath, options) 호출로 각 포맷(poster/banner/card) 크기와 테마 토큰을 주입해 3회 렌더. 제목은 한국어 폭을 고려해 quality_checks.title_wrap_chars로 어절 단위 자동 줄바꿈. 최소 폰트 font_min_pt: 24pt 고정.sharp 중앙 cover 크롭 후 원형 마스크. 실패 시 해당 아바타만 건너뛰고 나머지 레이아웃은 정상 완료. 사용자에게는 speaker_avatars.preview_variants: 3의 다른 크롭을 수동 선택하도록 안내(후속 PR에서 구현).config.pdf.engine_preference: ["pdfkit","puppeteer"] 순서로 시도. 둘 다 없으면 PNG만 저장 + 경고 (fallback_on_missing: png_only_with_warning)._layout.json과 _bg_source.png를 같이 저장해 재조판 가능 상태 유지../images/posters/<event-slug>/
├── poster.png
├── poster.pdf ← pdfkit/puppeteer 있을 때만
├── banner.png
├── card.png
├── _bg_source.png ← AI 원본 배경 (재합성용)
└── _layout.json ← 결정적 레이아웃 산출 + 연사 manifest
<event-slug>: event.title 또는 파일명 기반 slugify. --out-dir 지정 시 그대로 사용../images/ 직하 쓰기 금지._bg_source.png는 포맷별 크롭 전 원본. 포맷별 합성본은 별도 파일로만 저장하고 원본을 덮어쓰지 않는다.text, letters, typography, faces, people, watermark, logo text, readable words, cluttered copy area. 연사 얼굴을 AI가 그리지 않는다(실제 인물 왜곡 방지).bg_prompt는 카탈로그 원문을 수정 없이 사용. 사용자 취향 반영은 새 theme을 카탈로그에 추가해서 해결(커뮤니티 PR 친화).data/poster-themes.json (별도 파일).cyber-gradient, retro-print, k-indie-poster, academic-clean, festival-vibrant.{ label, bg_prompt, tokens: { fg, accent, muted }, recommended_formats } 스키마.bg_prompt에 text / letters / logos / faces 등을 포함하지 않고, 반드시 "negative space for copy" 류 여백 지시를 포함._layout.json에는 각 연사 엔트리에 경로 hash(sha256, 16자) 와 픽셀 치수만 기록한다 (manifest_photo_strategy: path_hash_only).photo_base64, photo_bytes, exif 같은 필드는 어떤 산출물에도 넣지 않는다 (privacy.forbid_fields).speaker_avatars.face_detection: false). 중앙 원형 크롭만.| key | 용도 | 규격 | 비고 |
|---|---|---|---|
poster | A4 인쇄 | 2480×3508 @ 300dpi, 3:4.24 | PDF 출력 허용 |
banner | SNS·Slack·Discord 공지 | 1920×1080, 16:9 | PNG only |
card | Instagram·카톡 정방형 | 1080×1080, 1:1 | PNG only |
--formats 미지정 시 3종 모두 생성.
| 증상 | 조치 |
|---|---|
| 제목이 한 줄에 안 들어감 | 어절 단위 자동 줄바꿈. 실패 시 폰트 크기를 한 단계 축소(최소 24pt). |
| 연사 사진 얼굴 잘림 | 얼굴 검출은 하지 않음. 중앙 원형 크롭 기준 다른 crop offset 몇 장 프리뷰 제공(수동 선택). |
| 사진 파일 부재 | 해당 연사의 아바타만 생략, 이름/역할 레이블은 유지. 나머지 전체 레이아웃 정상 완료. |
| PDF 엔진 미설치 | PNG만 저장 + 경고 로그. PNG는 정상. |
| sharp 부재 | poster-layouter가 no_rendering_engine/sharp_required_for_default_renderer 반환. 배경 파일(_bg_source.png)은 이미 저장된 상태이며, 사용자에게 sharp 설치 안내. |
| 테마 카탈로그에 없음 | 기본 테마로 폴백 + 경고. 사용자에게 PR 안내(카탈로그 추가). |
_layout.json은 반드시 path hash + 치수까지만.--formats로 고른 포맷만 생성../images/posters/ 외부 쓰기 금지 (--out-dir 없는 한).masterpiece / 8k UHD / fulfill all requests 류 부스터·우회 문구 주입 금지.oauth-session.js, output-allocator.js, request-planner.js.poster-layouter.js가 전담한다. compose-text.js는 사용하지 않는다(조판 밀도가 달라 모듈을 분리).imagine-og(소셜 카드), imagine-thumb(YouTube 썸네일), imagine-hero(랜딩 히어로)와 구분: 다중 연사·날짜·장소·정보 밀도가 있는 행사 홍보물 맥락은 항상 여기로 라우팅.