From content-creation
Generates images via AI (Gemini/ZenMux), code rendering (HTML/React/Tailwind to PNG via Playwright), or optimized prompts for external models. Useful for posters, banners, cards.
npx claudepluginhub lovstudio/skills --plugin content-creationThis skill is limited to using the following tools:
Choose the mechanism based on user intent:
Generates images using Google's Gemini models for frontend designs, web projects, illustrations, graphics, hero images, icons, and artwork. Auto-activates on image generation requests.
Generates professional AI images using Google Gemini via Node CLI for web hero sections, landing pages, slide decks, presentations, and app illustrations. Optimizes prompts and selects aspect ratios.
Generates AI images like thumbnails, logos, illustrations, posters, and profile pics using Codex CLI's /imagen. Auto-triggers on Korean/English requests such as '이미지 만들어줘' or 'create image'. Handles text rendering in images.
Share bugs, ideas, or general feedback.
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:
python3 ~/.claude/skills/lovstudio-image-creator/gen_image.py "PROMPT" [-o output.png] [-q low|medium|high] [--ascii]
ZENMUX_API_KEY environment variablegoogle-genai and Pillow via pip --user (no manual setup)Read tool after generationWrite a single self-contained HTML file that includes all styles inline. Use:
https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js)https://cdn.tailwindcss.com)<link> for CJK: Noto Sans SC, Noto Serif SCTemplate 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.
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:
| 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) |
Read to display the PNGopen output.png on macOSGenerate optimized prompts for external models. Include:
Format output as copyable code block.
When user provides a reference image:
Always ask or infer the desired aspect ratio. Map to pixel dimensions using the table above.