Lovstudio Image Creator

Image Creator — Multi-Mechanism Framework

Mechanism Selection

Choose the mechanism based on user intent:

| Mechanism | When to Use | Output | |-----------|------------|--------| | end-to-end | User wants AI-generated artwork, photos, illustrations | PNG image | | code | User wants designed layouts (posters, cards, banners) with editable content | HTML file + PNG | | prompt | User 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 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 ` for CJK: Noto Sans SC, Noto Serif SC`

Template structure:

  
  
  
  
  
  
  
    tailwind.config = {
      theme: { extend: { /* custom theme */ } }
    }
  
  
    /* Reset & base styles */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { width: {{WIDTH}}px; height: {{HEIGHT}}px; overflow: hidden; }
  

  
  
    // React component here
    function Poster() {
      return (/* JSX */);
    }
    ReactDOM.createRoot(document.getElementById('root')).render();
  
  

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

Step 2: Render to PNG

python3 scripts/render_to_png.py \
  /path/to/poster.html \
  -o output.png \
  -W 1200 -H 630 \
  --scale 2

Common aspect ratios: | Ratio | Dimensions | Use Case | |-------|-----------|----------| | 16:9 | 1200×675 | Social media banner | | 4:3 | 1200×900 | Presentation | | 1:1 | 1080×1080 | Instagram post | | 9:16 | 1080×1920 | Story / mobile poster | | 3:4 | 900×1200 | Portrait poster | | A4 | 794×1123 | Print 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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: lovstudio
• Source: lovstudio/skills
• License: MIT
• Homepage: https://lovstudio.ai/skills

Install and usage instructions live in the source repository linked above.