{"id":"c6e3ecfd-7952-49c3-9470-e2b0414ed666","shortId":"EDW9tM","kind":"skill","title":"lovstudio:image-creator","tagline":"Generate images via multiple mechanisms. Supports: (1) End-to-end AI generation via Gemini/ZenMux — given a prompt, directly output an image. (2) Code-based rendering — generate HTML/React single-file, render to PNG via Playwright. (3) Prompt engineering — generate optimized prom","description":"# Image Creator — Multi-Mechanism Framework\n\n## Mechanism Selection\n\nChoose the mechanism based on user intent:\n\n| Mechanism | When to Use | Output |\n|-----------|------------|--------|\n| **end-to-end** | User wants AI-generated artwork, photos, illustrations | PNG image |\n| **code** | User wants designed layouts (posters, cards, banners) with editable content | HTML file + PNG |\n| **prompt** | User wants a prompt for external model (Midjourney, nano-banana-pro, etc.) | Text prompt |\n\nIf the user doesn't specify, infer from context:\n- \"生成一张猫的图片\" → end-to-end\n- \"做一张活动海报\" → code\n- \"帮我写一个 Midjourney prompt\" → prompt\n\n## Mechanism 1: End-to-End (Gemini)\n\n```bash\npython3 ~/.claude/skills/lovstudio-image-creator/gen_image.py \"PROMPT\" [-o output.png] [-q low|medium|high] [--ascii]\n```\n\n- Generates image directly via Gemini 3 Pro (through ZenMux)\n- Requires `ZENMUX_API_KEY` environment variable\n- First run auto-installs `google-genai` and `Pillow` via `pip --user` (no manual setup)\n- Display result with `Read` tool after generation\n\n## Mechanism 2: Code-Based Rendering\n\n### Step 1: Generate HTML\n\nWrite a single self-contained HTML file that includes all styles inline. Use:\n- **React 19** via CDN (`https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js`)\n- **ReactDOM 19** via CDN\n- **Tailwind CSS** via CDN (`https://cdn.tailwindcss.com`)\n- **Google Fonts** via `` for CJK: `Noto Sans SC`, `Noto Serif SC`\n\nTemplate structure:\n\n```html\n\n\n\n \n \n \n \n \n \n \n \n\n\n

\n \n \n\n\n```\n\n**IMPORTANT**: Babel standalone script MUST come AFTER the text/babel script block.\n\n### Step 2: Render to PNG\n\n```bash\npython3 ~/.claude/skills/lovstudio-image-creator/scripts/render_to_png.py \\\n /path/to/poster.html \\\n -o output.png \\\n -W 1200 -H 630 \\\n --scale 2\n```\n\nCommon aspect ratios:\n| Ratio | Dimensions | Use Case |\n|-------|-----------|----------|\n| 16:9 | 1200×675 | Social media banner |\n| 4:3 | 1200×900 | Presentation |\n| 1:1 | 1080×1080 | Instagram post |\n| 9:16 | 1080×1920 | Story / mobile poster |\n| 3:4 | 900×1200 | Portrait poster |\n| A4 | 794×1123 | Print poster (210mm×297mm @96dpi) |\n\n### Step 3: Display & Iterate\n\n- Use `Read` to display the PNG\n- Open with `open output.png` on macOS\n- User can request edits → modify the HTML → re-render\n\n## Mechanism 3: Prompt Engineering\n\nGenerate optimized prompts for external models. Include:\n- **Positive prompt**: subject, style, lighting, quality tags\n- **Negative prompt**: common defects to avoid\n\nFormat output as copyable code block.\n\n## Reference Image Support\n\nWhen user provides a reference image:\n- **End-to-end**: describe the style/composition in the prompt\n- **Code**: analyze the layout, colors, typography → replicate in HTML/CSS\n- **Prompt**: extract style keywords for the external model\n\n## Aspect Ratio\n\nAlways ask or infer the desired aspect ratio. Map to pixel dimensions using the table above.","tags":["image","creator","skills","lovstudio","agent-skills","ai-coding-assistant","cjk","claude-code","cursor","gemini-cli","markdown-to-docx","markdown-to-pdf"],"capabilities":["skill","source-lovstudio","skill-image-creator","topic-agent-skills","topic-ai-coding-assistant","topic-cjk","topic-claude-code","topic-cursor","topic-gemini-cli","topic-markdown-to-docx","topic-markdown-to-pdf"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/lovstudio/skills/image-creator","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add lovstudio/skills","source_repo":"https://github.com/lovstudio/skills","install_from":"skills.sh"}},"qualityScore":"0.470","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 40 github stars · SKILL.md body (4,035 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:34.673Z","embedding":null,"createdAt":"2026-04-18T22:19:01.762Z","updatedAt":"2026-04-22T00:56:34.673Z","lastSeenAt":"2026-04-22T00:56:34.673Z","tsv":"'/.claude/skills/lovstudio-image-creator/gen_image.py':141 '/.claude/skills/lovstudio-image-creator/scripts/render_to_png.py':260 '/npm/react@19/umd/react.production.min.js':218 '/path/to/poster.html':261 '1':11,133,195,289,290 '1080':291,292,297 '1123':310 '1200':265,279,286,305 '16':277,296 '19':213,220 '1920':298 '2':27,189,254,269 '210mm':313 '297mm':314 '3':42,155,285,302,317,343 '4':284,303 '630':267 '675':280 '794':309 '9':278,295 '900':287,304 '96dpi':315 'a4':308 'ai':16,75 'ai-gener':74 'alway':410 'analyz':392 'api':161 'artwork':77 'ascii':149 'ask':411 'aspect':271,408,416 'auto':168 'auto-instal':167 'avoid':365 'babel':243 'banana':107 'banner':89,283 'base':30,59,192 'bash':139,258 'block':252,371 'card':88 'case':276 'cdn':215,222,226 'cdn.jsdelivr.net':217 'cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js':216 'cdn.tailwindcss.com':227 'choos':56 'cjk':232 'code':29,82,127,191,370,391 'code-bas':28,190 'color':395 'come':247 'common':270,362 'contain':203 'content':92 'context':120 'copyabl':369 'creator':4,49 'css':224 'defect':363 'describ':385 'design':85 'desir':415 'dimens':274,421 'direct':23,152 'display':181,318,323 'doesn':115 'edit':91,335 'end':13,15,69,71,123,125,135,137,382,384 'end-to-end':12,68,122,134,381 'engin':44,345 'environ':163 'etc':109 'extern':102,350,406 'extract':401 'file':36,94,205 'first':165 'font':229 'format':366 'framework':53 'gemini':138,154 'gemini/zenmux':19 'genai':172 'generat':5,17,32,45,76,150,187,196,346 'given':20 'googl':171,228 'google-genai':170 'h':266 'high':148 'html':93,197,204,241,338 'html/css':399 'html/react':33 'illustr':79 'imag':3,6,26,48,81,151,373,380 'image-cr':2 'import':242 'includ':207,352 'infer':118,413 'inlin':210 'instagram':293 'instal':169 'intent':62 'iter':319 'key':162 'keyword':403 'layout':86,394 'light':357 'lovstudio':1 'low':146 'maco':331 'manual':179 'map':418 'mechan':9,52,54,58,63,132,188,342 'media':282 'medium':147 'midjourney':104,129 'mobil':300 'model':103,351,407 'modifi':336 'multi':51 'multi-mechan':50 'multipl':8 'must':246 'nano':106 'nano-banana-pro':105 'negat':360 'noto':233,236 'o':143,262 'open':326,328 'optim':46,347 'output':24,67,367 'output.png':144,263,329 'photo':78 'pillow':174 'pip':176 'pixel':420 'playwright':41 'png':39,80,95,257,325 'portrait':306 'posit':353 'post':294 'poster':87,301,307,312 'present':288 'print':311 'pro':108,156 'prom':47 'prompt':22,43,96,100,111,130,131,142,344,348,354,361,390,400 'provid':377 'python3':140,259 'q':145 'qualiti':358 'ratio':272,273,409,417 're':340 're-rend':339 'react':212 'reactdom':219 'read':184,321 'refer':372,379 'render':31,37,193,255,341 'replic':397 'request':334 'requir':159 'result':182 'run':166 'san':234 'sc':235,238 'scale':268 'script':245,251 'select':55 'self':202 'self-contain':201 'serif':237 'setup':180 'singl':35,200 'single-fil':34 'skill' 'skill-image-creator' 'social':281 'source-lovstudio' 'specifi':117 'standalon':244 'step':194,253,316 'stori':299 'structur':240 'style':209,356,402 'style/composition':387 'subject':355 'support':10,374 'tabl':424 'tag':359 'tailwind':223 'templat':239 'text':110 'text/babel':250 'tool':185 'topic-agent-skills' 'topic-ai-coding-assistant' 'topic-cjk' 'topic-claude-code' 'topic-cursor' 'topic-gemini-cli' 'topic-markdown-to-docx' 'topic-markdown-to-pdf' 'typographi':396 'use':66,211,275,320,422 'user':61,72,83,97,114,177,332,376 'variabl':164 'via':7,18,40,153,175,214,221,225,230 'w':264 'want':73,84,98 'write':198 'zenmux':158,160 '做一张活动海报':126 '帮我写一个':128 '生成一张猫的图片':121","prices":[{"id":"aa856f94-3612-416e-9056-380366e49377","listingId":"c6e3ecfd-7952-49c3-9470-e2b0414ed666","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"lovstudio","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:19:01.762Z"}],"sources":[{"listingId":"c6e3ecfd-7952-49c3-9470-e2b0414ed666","source":"github","sourceId":"lovstudio/skills/image-creator","sourceUrl":"https://github.com/lovstudio/skills/tree/main/skills/image-creator","isPrimary":false,"firstSeenAt":"2026-04-18T22:19:01.762Z","lastSeenAt":"2026-04-22T00:56:34.673Z"}],"details":{"listingId":"c6e3ecfd-7952-49c3-9470-e2b0414ed666","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"lovstudio","slug":"image-creator","github":{"repo":"lovstudio/skills","stars":40,"topics":["agent-skills","ai-coding-assistant","cjk","claude-code","cursor","gemini-cli","markdown-to-docx","markdown-to-pdf"],"license":"mit","html_url":"https://github.com/lovstudio/skills","pushed_at":"2026-04-21T15:57:51Z","description":"Agent skills for AI coding assistants — Markdown to PDF/DOCX with 14 themes, CJK support","skill_md_sha":"32aa7d02b31f76ab1fc8fedcf0f528c2d4b97166","skill_md_path":"skills/image-creator/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/lovstudio/skills/tree/main/skills/image-creator"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"lovstudio:image-creator","description":"Generate images via multiple mechanisms. Supports: (1) End-to-end AI generation via Gemini/ZenMux — given a prompt, directly output an image. (2) Code-based rendering — generate HTML/React single-file, render to PNG via Playwright. (3) Prompt engineering — generate optimized prompts for external models (nano-banana-pro, etc.). Trigger words: image, generate image, 生图, render, poster, 海报, banner, card, 卡片"},"skills_sh_url":"https://skills.sh/lovstudio/skills/image-creator"},"updatedAt":"2026-04-22T00:56:34.673Z"}}