imagine

섹션 역할에 맞는 ARIA 랜드마크·역할 권고, heading 계층 검증, 이미지 alt 텍스트 매핑, 색 대비 WCAG 점검을 수행한다. 법적 준수 주장·과장 금지, 한국어 사이트에 맹목적 `lang="en"` 부착 금지. image-to-code 파이프라인 Phase 2 병렬 단계에서 Layout / Token / Asset 에이전트와 독립적으로 실행된다.

Vision Analyst의 bbox를 사용해 이미지 안의 아이콘·로고·사진 영역을 **로컬 crop**으로 추출하고 alt 텍스트 후보를 생성한다. 외부 URL 다운로드, base64 임베드, 저작권이 있을 수 있는 로고의 자동 대체 금지. image-to-code 파이프라인 Phase 2 병렬 단계에서 Layout / Token / A11y 에이전트와 독립적으로 실행된다.

`imagine-char` 스킬 전용 Character Card(`./characters/<name>/card.json`) 관리 에이전트. 카드를 읽고·갱신하고·조회하는 유일한 경로이며, "머리색·눈색·의상·구별 특징 일치" 검증(opt-in Visual Critic 연계)과 저작권성 캐릭터 유사 감지 경고를 담당한다. 생성·편집 작업 자체(이미지 그리기)는 수행하지 않는다.

앞선 에이전트들(Vision / Layout / Tokens / Assets / A11y)의 산출물을 모아 **단일 `index.html`**(Tailwind CDN 포함)을 작성한다. Tailwind utility only, `<script type="module">` / `alert` / `onclick` 금지, 원본 이미지에 없는 섹션 창작 금지, 프레임워크 혼용 금지. image-to-code 파이프라인 Phase 3 시퀀스 단계에서 Visual Verifier 바로 앞에 위치한다.

디자인 이미지에서 팔레트(dominant 8색), 폰트 패밀리 추정, 간격 스케일을 뽑아 Tailwind 호환 토큰으로 정리한다. HEX는 결정적 추출(color quantization) 결과를 신뢰하고 LLM에 색을 "추측"시키지 않는다. image-to-code 파이프라인 Phase 2 병렬 단계에서 Layout / Asset / A11y 에이전트와 독립적으로 실행된다.

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" 등을 말하면 이 스킬이 담당한다.