Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
lovstudio avatar

Lovstudio Image Creator

  • 2 installs
  • Updated May 30, 2026
  • lovstudio/image-creator-skill

Generates images via AI generation (Gemini/ZenMux), code-based HTML/React rendering to PNG with Playwright, or optimized prompt engineering.

About

Creates images through three mechanisms: end-to-end AI generation, code-based HTML/React rendering to PNG via Playwright, and prompt engineering for external models. A user uses it to produce posters, banners, or cards from a prompt or code.

  • End-to-end AI generation via Gemini/ZenMux
  • Code-based HTML/React rendered to PNG with Playwright

Lovstudio Image Creator by the numbers

  • 2 all-time installs (skills.sh)
  • Ranked #1,166 of 1,335 Generative Media skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/lovstudio/image-creator-skill --skill lovstudio-image-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2
Last updatedMay 30, 2026
Repositorylovstudio/image-creator-skill

What it does

Generates images via AI generation (Gemini/ZenMux), code-based HTML/React rendering to PNG with Playwright, or optimized prompt engineering.

Files

SKILL.mdMarkdownGitHub ↗

Image Creator — Multi-Mechanism Framework

Mechanism Selection

Choose the mechanism based on user intent:

MechanismWhen to UseOutput
end-to-endUser wants AI-generated artwork, photos, illustrationsPNG image
codeUser wants designed layouts (posters, cards, banners) with editable contentHTML file + PNG
promptUser wants a prompt for external model (Midjourney, nano-banana-pro, etc.)Text prompt

If the user doesn't specify, infer from context:

  • "生成一张猫的图片" → end-to-end
  • "做一张活动海报" → code
  • "帮我写一个 Midjourney prompt" → prompt

Mechanism 1: End-to-End (Gemini)

python3 ~/.claude/skills/lovstudio-image-creator/gen_image.py "PROMPT" [-o output.png] [-q low|medium|high] [--ascii]
  • Generates image directly via Gemini 3 Pro (through ZenMux)
  • Requires ZENMUX_API_KEY environment variable
  • First run auto-installs google-genai and Pillow via pip --user (no manual setup)
  • Display result with Read tool after generation

Mechanism 2: Code-Based Rendering

Step 1: Generate HTML

Write a single self-contained HTML file that includes all styles inline. Use:

  • React 19 via CDN (https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js)
  • ReactDOM 19 via CDN
  • Tailwind CSS via CDN (https://cdn.tailwindcss.com)
  • Google Fonts via <link> for CJK: Noto Sans SC, Noto Serif SC

Template structure:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: { extend: { /* custom theme */ } }
    }
  </script>
  <style>
    /* Reset & base styles */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { width: {{WIDTH}}px; height: {{HEIGHT}}px; overflow: hidden; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel" data-type="module">
    // React component here
    function Poster() {
      return (/* JSX */);
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<Poster />);
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
</body>
</html>

IMPORTANT: Babel standalone script MUST come AFTER the text/babel script block.

Step 2: Render to PNG

python3 ~/.claude/skills/lovstudio-image-creator/scripts/render_to_png.py \
  /path/to/poster.html \
  -o output.png \
  -W 1200 -H 630 \
  --scale 2

Common aspect ratios:

RatioDimensionsUse Case
16:91200×675Social media banner
4:31200×900Presentation
1:11080×1080Instagram post
9:161080×1920Story / mobile poster
3:4900×1200Portrait poster
A4794×1123Print poster (210mm×297mm @96dpi)

Step 3: Display & Iterate

  • Use Read to display the PNG
  • Open with open output.png on macOS
  • User can request edits → modify the HTML → re-render

Mechanism 3: Prompt Engineering

Generate optimized prompts for external models. Include:

  • Positive prompt: subject, style, lighting, quality tags
  • Negative prompt: common defects to avoid

Format output as copyable code block.

Reference Image Support

When user provides a reference image:

  • End-to-end: describe the style/composition in the prompt
  • Code: analyze the layout, colors, typography → replicate in HTML/CSS
  • Prompt: extract style keywords for the external model

Aspect Ratio

Always ask or infer the desired aspect ratio. Map to pixel dimensions using the table above.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.