# Lovstudio Image Creator

> >

- **Type:** Skill
- **Install:** `agentstack add skill-lovstudio-skills-image-creator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lovstudio](https://agentstack.voostack.com/s/lovstudio)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lovstudio](https://github.com/lovstudio)
- **Source:** https://github.com/lovstudio/skills/tree/main/skills/image-creator
- **Website:** https://lovstudio.ai/skills

## Install

```sh
agentstack add skill-lovstudio-skills-image-creator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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)

```bash
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:

```html

  
  
  
  
  
  
  
    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

```bash
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](https://github.com/lovstudio)
- **Source:** [lovstudio/skills](https://github.com/lovstudio/skills)
- **License:** MIT
- **Homepage:** https://lovstudio.ai/skills

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lovstudio-skills-image-creator
- Seller: https://agentstack.voostack.com/s/lovstudio
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.