lovstudio:image-creator

图像创作 — 多机制框架

机制选择

根据用户意图选择机制：

机制	使用场景	输出
end-to-end	用户想要 AI 生成的艺术作品、照片、插画	PNG 图像
code	用户想要可编辑内容的设计版式（海报、卡片、横幅）	HTML 文件 + PNG
prompt	用户想要用于外部模型（Midjourney、nano-banana-pro 等）的提示词	文本提示词

如果用户没有指定，则根据上下文推断：

• “生成一张猫的图片” → end-to-end
• “做一张活动海报” → code
• “帮我写一个 Midjourney prompt” → prompt

机制 1：端到端（Gemini）

python3 ~/.claude/skills/lovstudio-image-creator/gen_image.py "PROMPT" [-o output.png] [-q low|medium|high] [--ascii]

• 通过 ZenMux 使用 Gemini 3 Pro 直接生成图像
• 需要设置 ZENMUX_API_KEY 环境变量
• 首次运行时会通过 pip --user 自动安装 google-genai 和 Pillow（无需手动设置）
• 生成后使用 Read 工具显示结果

机制 2：基于代码的渲染

步骤 1：生成 HTML

编写一个包含所有内联样式的独立 HTML 文件。使用：

• 通过 CDN 提供的 React 19（https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js）
• 通过 CDN 提供的 ReactDOM 19
• 通过 CDN 提供的 Tailwind CSS（https://cdn.tailwindcss.com）
• 面向 CJK 的 Google Fonts：使用 <link> 引入 Noto Sans SC、Noto Serif SC

模板结构：

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

重要：Babel standalone 脚本必须放在 text/babel 脚本块之后。

步骤 2：渲染为 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

常见宽高比：

宽高比	尺寸	用途
16:9	1200×675	社交媒体横幅
4:3	1200×900	演示文稿
1:1	1080×1080	Instagram 帖子
9:16	1080×1920	快拍 / 手机海报
3:4	900×1200	竖版海报
A4	794×1123	打印海报（210mm×297mm，@96dpi）

步骤 3：显示并迭代

• 使用 Read 显示 PNG
• 在 macOS 上使用 open output.png 打开
• 用户可以请求修改 → 修改 HTML → 重新渲染

机制 3：提示词工程

为外部模型生成优化后的提示词。包括：

• 正向提示词：主体、风格、光线、质量标签
• 负向提示词：需要避免的常见缺陷

将输出格式化为可复制的代码块。

参考图支持

用户提供参考图时：

• 端到端：在提示词中描述风格和构图
• 代码：分析版式、颜色、排版 → 在 HTML/CSS 中复现
• 提示词：提取风格关键词，供外部模型使用

宽高比

始终询问或推断所需的宽高比。使用上表映射为像素尺寸。