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

Lovstudio Image Creator

  • 83 installs
  • 64 repo stars
  • Updated July 31, 2026
  • lovstudio/skills

Helps with ai & agent building tasks.

About

lovstudio-image-creator is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

  • lovstudio-image-creator
  • AI & Agent Building
  • AI-coding skill

Lovstudio Image Creator by the numbers

  • 83 all-time installs (skills.sh)
  • +4 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #5,144 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/lovstudio/skills --skill lovstudio-image-creator

Add your badge

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

Listed on Skillselion
Installs83
repo stars64
Last updatedJuly 31, 2026
Repositorylovstudio/skills

What it does

Helps with ai & agent building tasks.

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 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 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.