Skill: leosheep821-debug/poster-precise-text (version 1.0.0)

--- name: poster-precise-text description: 精准文字海报生成技能（两步法）。当用户需要生成中文海报且文字必须100%精准时触发。核心方法：Step1 用 image_synthesize 以参考图生成插画，Step2 用 HTML 精确渲染文字，两者互补。适用场景：健康科普、教育宣传、活动海报、运营素材。 --- # poster-precise-text · 精准文字海报两步法 ## 核心原则 > **文字精准 > 插画还原** > 当两者冲突时，优先保文字。AI 图像生成对中文精准度有限，用 HTML 控制文字是唯一可靠解法。 --- ## 触发判断 用户说这些词时激活： - "海报" + "文字要准" - "中文海报" "排版复刻" - "生成海报" "文字清晰" - 直接发一张图片要求"复刻" --- ## 标准工作流 ### Step 1 · 提取内容（images_understand） 分析原图，提取： - 所有文字内容（逐字） - 排版结构（标题区/内容区/页脚） - 视觉风格（配色/字体风格/图标数量） ### Step 2 · 生成插画（image_synthesize） **有原图参考时：** - `input_files`: 原图路径 - `prompt`: 明确要求"保留原图排版风格，重生成插画，文字区域留空" - 注意：文字留白成功率约40%，做好重试准备 **无原图时（纯文字海报）：** - `prompt`: 详细描述排版结构（不用"参考图生成"） - 文字内容直接写在 prompt 里（用于评估插画匹配度） ### Step 3 · HTML 精准文字版 使用预设模板，填入精准文字内容，输出 HTML 文件。 **发布 HTML：** ``` deploy(project_name="poster-xxx", dist_dir=临时目录) ``` **导出 PNG（如需要）：** 当前环境 Playwright 不可用，可选方案： - 截图工具手动导出 - 告知用户"在浏览器打开 HTML → 截图" --- ## 模板用法 ```html <!-- 参考：/workspace/skills/poster-precise-text/references/bone_health_template.html --> ``` 关键替换字段： | 字段 | 说明 | |------|------| | `{{title}}` | 主标题 | | `{{subtitle}}` | 副标题 | | `{{section1_title}}` | 板块1标题 | | `{{section1_cards}}` | 板块1内容（卡片JSON） | | `{{section2_items}}` | 板块2内容（列表JSON） | | `{{section3_items}}` | 板块3内容 | | `{{footer_left}}` | 左下内容 | | `{{footer_right}}` | 右下内容 | | `{{bg_color}}` | 主色调 | | `{{accent_color}}` | 强调色 | --- ## 配色规范 **医疗健康类（推荐）：** - 主色：`#00857C`（青绿色） - 背景：`#F7F7F7` - 强调：`#F5A623`（橙色） - 正文：`#1A1A1A` **政务宣传类：** - 主色：`#C41E3A`（中国红） - 辅助：`#FFD700`（金色） **教育科普类：** - 主色：`#2563EB`（蓝色） - 辅助：`#10B981`（绿色） --- ## Prompt 模板（image_synthesize） ### 有原图参考 ``` Recreate this poster layout. Keep the exact structure, illustrations, icons, color scheme. Only change text to: [精准文字内容] Keep all other elements identical. ``` ### 无参考，纯文字海报 ``` [见 references/poster_prompt_guide.md] ``` --- ## 常见问题 **Q: 文字变形严重怎么办？** → 跳过参考图，用纯 prompt 生成海报，HTML 文字做精准层 **Q: 图像生成报错了？** → 检查 input_files 数量是否超限（max 10） → 尝试去掉 input_files，只用纯 prompt **Q: HTML 发布后需要 PNG 格式？** → 用户在浏览器打开 → Ctrl+P 打印为 PDF → 或截图工具处理 --- ## 版权说明 - 插画风格仅作参考，不可抄袭原图商业素材 - 生成的 HTML 版权归发布方所有

path: references/bone_health_template.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
  :root {
    --primary: {{bg_color}};   /* 主色 */
    --accent: {{accent_color}}; /* 强调色 */
    --bg: #F7F7F7;
    --white: #FFFFFF;
    --dark: #1A1A1A;
    --gray: #666;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Noto Sans SC', sans-serif; background: var(--bg); }
  
  /* 标题区 */
  .hero {
    background: linear-gradient(135deg, #E8F5F3 0%, #FFFFFF 60%);
    text-align: center;
    padding: 2.2rem 2rem 1.5rem;
    border-bottom: 4px solid var(--primary);
  }
  .hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
  }
  .hero .subtitle {
    font-size: 0.8rem;
    color: var(--gray);
    letter-spacing: 0.1em;
  }
  .hero .badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 0.68rem;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    margin-top: 0.7rem;
  }

  /* 区块标题栏 */
  .section-bar {
    background: var(--primary);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .section-bar .num {
    width: 20px; height: 20px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
  }

  /* 三卡片布局 */
  .card3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #E0E0E0; }
  .card3 .c { background: white; padding: 1rem 0.9rem; }
  .card3 h3 { font-size: 0.78rem; color: var(--primary); margin-bottom: 0.35rem; }
  .card3 p { font-size: 0.68rem; color: var(--gray); line-height: 1.55; }
  .card3 .c.accent { background: #FFF8F0; }

  /* 列表项 */
  .list2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #E0E0E0; }
  .list2 .item { background: white; padding: 0.75rem 1rem; display: flex; align-items: flex-start; gap: 0.6rem; }
  .list2 .n {
    width: 20px; height: 20px; min-width: 20px;
    background: var(--primary); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700;
  }
  .list2 p { font-size: 0.72rem; color: var(--dark); line-height: 1.45; }

  /* 信号列表 */
  .signal { padding: 1.2rem 1.4rem; background: white; }
  .signal-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid #F0F0F0; }
  .signal-item:last-child { border-bottom: none; }
  .signal .n { width: 22px; height: 22px; min-width: 22px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; }
  .signal p { font-size: 0.75rem; color: var(--dark); }

  /* 页脚 */
  .footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E0E0E0; }
  .footer .l { background: white; padding: 1.2rem 1.4rem; }
  .footer .r { background: var(--primary); color: white; padding: 1.2rem 1.4rem; }
  .footer h4 { font-size: 0.75rem; margin-bottom: 0.45rem; }
  .footer .l h4 { color: var(--primary); }
  .footer .r h4 { opacity: 0.8; }
  .footer p { font-size: 0.7rem; line-height: 1.7; }
  .footer .r p:first-of-type { font-weight: 700; }

  @media (max-width: 500px) {
    .card3, .list2, .footer { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>
<div>

  <!-- 标题 -->
  <div class="hero">
    <h1>{{title}}</h1>
    <p class="subtitle">{{subtitle}}</p>
    <span class="badge">{{badge}}</span>
  </div>

  <!-- 板块1 -->
  <div class="section-bar"><span class="num">1</span>{{section1_title}}</div>
  <div class="card3">
    {{#each section1_cards}}
    <div class="c {{#if this.accent}}accent{{/if}}">
      <h3>{{this.title}}</h3>
      <p>{{this.body}}</p>
    </div>
    {{/each}}
  </div>

  <!-- 板块2 -->
  <div class="section-bar"><span class="num">2</span>{{section2_title}}</div>
  <div class="list2">
    {{#each section2_items}}
    <div class="item"><span class="n">{{this.num}}</span><p>{{this.text}}</p></div>
    {{/each}}
  </div>

  <!-- 板块3 -->
  <div class="section-bar"><span class="num">3</span>{{section3_title}}</div>
  <div class="signal">
    {{#each section3_items}}
    <div class="signal-item"><span class="n">{{this.num}}</span><p>{{this.text}}</p></div>
    {{/each}}
  </div>

  <!-- 页脚 -->
  <div class="footer">
    <div class="l">
      <h4>{{footer_left_title}}</h4>
      <p>{{footer_left_text}}</p>
    </div>
    <div class="r">
      <h4>{{footer_right_title}}</h4>
      <p>{{footer_right_line1}}</p>
      <p style="opacity:0.9">{{footer_right_line2}}</p>
    </div>
  </div>

</div>
</body>
</html>


path: references/poster_prompt_guide.md
content: # 海报生成 Prompt 参考

## 纯文字海报 Prompt 模板

```
Create a Chinese health/education poster. Clean, professional medical style.
Color scheme: teal (#00857C) + white + orange accents.
Vertical scroll layout, 9:16 aspect ratio.

MAIN TITLE: [标题文字]
SUBTITLE: [副标题/来源]

SECTION 1 - [板块1标题]
Layout: 3 cards side by side with icons
Card 1: [标题] | [内容]
Card 2: [标题] | [内容]
Card 3: [标题] | [内容]

SECTION 2 - [板块2标题]
Layout: 4x2 numbered grid with medical icons
[数字] [文字内容]
... (8 items)

SECTION 3 - [板块3标题]
Layout: 4 numbered items with icons
[数字] [文字内容]
... (4 items)

SECTION 4 - [板块4标题]
Left box (white): [内容]
Right box (teal): [内容]

Style: Clean infographic, all text in Chinese, clear typography.
```

## 配色速查

| 场景 | 主色 | 辅色 |
|------|------|------|
| 医疗健康 | #00857C | #F5A623 |
| 政务宣传 | #C41E3A | #FFD700 |
| 教育科普 | #2563EB | #10B981 |
| 金融投资 | #1A1A2E | #F5A623 |
| 社区服务 | #00857C | #10B981 |

## 图像生成注意事项

1. **中文精准度**：MiniMax / 图像生成工具对中文渲染有限，复杂文字（8字以上）容易变形
2. **长文本**：超过20字的内容建议用 HTML 层处理
3. **多字号层级**：标题/正文/注释至少三个字号层级
4. **图标风格**：医学类图标用线性图标，禁用表情符号


path: skill.json
content: {
  "name": "poster-precise-text",
  "version": "1.0.0",
  "description": "精准文字海报生成技能（两步法）：HTML精准文字 + AI插画，文字100%清晰可读，适用于中文海报、医疗科普、教育宣传等场景。",
  "author": "hetu",
  "license": "MIT-0",
  "tags": ["chinese", "poster", "healthcare", "text-precision", "html", "infographic"]
}


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)