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 → 截图"
模板用法
<!-- 参考:/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 版权归发布方所有