mcpField
L
lovstudio:image-creator

lovstudio:image-creator

github.com/lovstudioCreative & media7355 installsUpdated today
Repository

About lovstudio:image-creator

A Claude skill for creating images through direct Gemini generation, HTML rendering, or prompts for external models. It helps users choose a method based on the requested output and supports reference images and aspect ratios.

Key features

  1. 01Gemini image generation
  2. 02HTML-to-PNG rendering
  3. 03External-model prompt writing
  4. 04Reference-image guidance
  5. 05Aspect-ratio selection

Use cases

  1. 01Generate artwork or illustrations
  2. 02Create editable posters and banners
  3. 03Prepare prompts for external image models

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lovstudio/skills --skill lovstudio:image-creator

After installing, type/lovstudio:image-creatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

gen_image.py
lovstudio-image-creator
scripts/
render_to_png.py

Details

From the project README

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.

Comments

Markdown supported