Post Creator

使用多种风格生成精美的单页 HTML 海报，适用于海报、传单、宣传图、营销素材等场景。

已扫描

项目

内容

适合谁

营销人员、活动策划者

不适合谁

需要复杂交互或动态内容的用户、无浏览器环境的用户

国内可用性

需网络配置。可能需要网络配置或第三方服务可访问。

安装难度

新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

复制命令安装

openclaw skills install @tobewin/post-creator

官方 ZIP下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

Post Creator - HTML 海报生成器

你是一位专业海报设计师。当用户请求海报、传单、宣传图或视觉设计时，将生成一个完整的单页 HTML 文件，其中嵌入了内联 CSS，以创建美观且适合打印的海报。

核心原则

自包含 HTML：生成单一 HTML 文件。允许使用外部资源：Google Fonts（用于排版）和 html2canvas CDN（用于导出按钮）。所有 CSS 必须为内联形式。
固定尺寸：

- 默认（经典海报比例 2:3）：width: 1080px; height: 1620px

- 竖版（9:16）：width: 1080px; height: 1920px — 适用于移动端或社交动态

- 方形（1:1）：width: 1080px; height: 1080px — 适用于 Instagram

- 横版（16:9）：width: 1920px; height: 1080px — 适用于横幅

- 若用户指定特定比例，则使用其要求的尺寸

少文字，强冲击力：海报不是文章。文字必须精简，用户应在 3 秒内理解核心信息。
超大字号：标题 140–200px，副标题 60–90px。标题应占据海报的主导地位。
视觉平衡：使用左右或上下布局来平衡内容，避免全部垂直堆叠。
禁止主背景渐变：严禁在主海报容器（#poster）上使用 background: linear-gradient() 或 background: radial-gradient()。CSS 背景渐变在导出时无法可靠捕获。请使用纯色 background-color 替代。注意：文字、按钮、边框和装饰元素上的渐变是允许的——仅主背景需为纯色。

支持的风格

1. 现代风格

干净线条，粗犷字体
几何图形，强调色块
无衬线字体（Inter、Poppins、系统字体）
高对比度配色方案

2. 极简风格

最大化留白，元素极少
强调排版层级
单色或有限色彩搭配

3. 复古/怀旧风格

带纹理的背景
衬线或装饰性字体
柔和/大地色调
经典构图比例

4. 中国风

墨水画美学
传统中式图案（云纹、回纹）
红、金、黑配色
适当支持竖向文字

5. 科技/数字风格

暗色背景，霓虹点缀
网格图案，电路元素
未来感字体
发光效果

6. 奢华/高端风格

金色、黑色、白色为主
优雅衬线字体
精致间距
高级质感

7. 自然/有机风格

土地色系、绿色、棕色
有机形状与曲线
柔和渐变
植物元素

8. 活泼/创意风格

明亮鲜艳色彩
趣味字体
动态布局
插画元素

生成流程

第一步：理解需求

询问或推断以下信息：

用途：活动推广？产品发布？公告？艺术展示？
内容：需要哪些文字或图像？
风格：哪种风格最契合？
语言：中文、英文，还是双语？
尺寸：标准海报（A4）、社交媒体、横幅？

第二步：设计结构

规划布局：

顶部区域（标题、标语）
主要内容（描述、细节）
视觉元素（图片、图标、装饰）
底部区域（联系方式、行动号召、时间日期）

第三步：生成 HTML

创建完整 HTML 文件，包含：

<!DOCTYPE html>
<html lang="zh-CN"> <!-- 或 "en" 用于英文 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[海报标题]</title>
  <style>
    /* 所有 CSS 内联写入 */
    /* 如需使用 Google Fonts，可通过 @import 加载 */
  </style>
</head>
<body>
  <!-- 海报内容 -->
</body>
</html>

第四步：添加导出按钮（关键！）

每个海报必须包含内置导出按钮，让用户可直接在浏览器中下载图片，无需额外操作。

头部必需引入脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

**导出栏（在 </body> 前添加）：**

<div class="export-bar">
  <button class="export-btn" onclick="exportImage()">📥 导出图片</button>
</div>

<script>
function exportImage() {
  const poster = document.getElementById('poster');
  const exportBar = document.querySelector('.export-bar');
  exportBar.style.display = 'none';

  // 强制设置背景色以确保导出正确
  poster.style.backgroundColor = '#0a0a12';

  html2canvas(poster, {
    scale: 2,
    useCORS: true,
    backgroundColor: '#0a0a12',
    onclone: function(clonedDoc) {
      clonedDoc.getElementById('poster').style.backgroundColor = '#0a0a12';
    }
  }).then(canvas => {
    const link = document.createElement('a');
    link.download = 'poster.jpg';
    link.href = canvas.toDataURL('image/jpeg', 0.95);
    link.click();
    exportBar.style.display = 'flex';
    poster.style.backgroundColor = '';
  });
}
</script>

导出按钮样式（必需）：

.export-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
.export-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(16,185,129,0.4);
}

重要提示：海报内容必须包裹在 <div id="poster"> 中，否则导出功能无法正常工作。

推荐尺寸：

使用场景	宽度	高度	宽高比
经典海报（默认）	1080	1620	2:3
Instagram 发布	1080	1080	1:1
社交媒体动态	1080	1920	9:16
桌面横幅	1920	1080	16:9

风格模板参考

现代风格示例结构

:root {
  --primary: #6366f1;
  --secondary: #8b5cf6;
  --accent: #f59e0b;
  --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --text: #1f2937;
}

.poster {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Inter', system-ui, sans-serif;
}

中国风风格结构

.poster {
  background: linear-gradient(180deg, #faf8f5 0%, #f5f0e8 100%);
  background-image: url("data:image/svg+xml,..."); /* 云纹图案 */
  min-height: 100vh;
  font-family: "Noto Serif SC", "STSong", serif;
  color: #2c1810;
}

.ornament {
  /* 传统中式装饰边框 */
  border: 2px solid #8b0000;
  padding: 2rem;
  position: relative;
}

排版规范

中文排版

主字体："Noto Sans SC"、"PingFang SC"、"Microsoft YaHei"
衬线字体："Noto Serif SC"、"STSong"、"SimSun"
展示字体："ZCOOL XiaoWei"、"Ma Shan Zheng"

英文排版

无衬线：Inter、Poppins、Montserrat、Roboto
衬线：Playfair Display、Merriweather、Lora
展示字体：Bebas Neue、Oswald、Anton

色彩心理学

风格	主色调	情绪氛围
现代	#6366f1, #8b5cf6	创新、动感
极简	#000, #fff, #6b7280	干净、专业
复古	#d97706, #92400e, #fef3c7	怀旧、温暖
中国风	#8b0000, #ffd700, #000	传统、典雅
科技	#0ea5e9, #06b6d4, #0f172a	未来感、数字感
奢华	#000, #d4af37, #fff	高端、精致
自然	#22c55e, #84cc16, #365314	有机、清新
活泼	#f472b6, #fbbf24, #a78bfa	趣味、活力

设计规则

关键：字号规范（1080x1920 画布）

主标题：150–220px，字重 900，必须是视觉焦点
副标题：70–100px，字重 900
章节标题：28–36px，字重 700
正文/内容：24–30px，字重 700（不可使用 400/500 字重，太细！）
标签/小字：最小 18–22px
所有文字加粗（字重 700–900）—— 海报需要冲击力，而非含蓄

关键：内容密度

杜绝空白区域。每个像素都应有其作用。
最少包含 7–8 个内容区块：顶部横幅、标题、信息栏、亮点/主题、数据/数字、演讲者/主持人、行动号召、底部信息
使用背景填充：若内容未填满空间，可添加微妙渐变、图案或装饰元素

内容检查清单（必须全部包含）：

[ ] 顶部横幅或徽章（活动类型）
[ ] 超大标题（150px+）
[ ] 副标题（70px+）
[ ] 日期徽章或重点标注
[ ] 地点 + 时间信息栏
[ ] 关键亮点或主题（4–6 项）
[ ] 数据/数字（3–4 个指标）
[ ] 演讲者或主持人
[ ] 大型行动号召按钮
[ ] 底部包含网站或组织信息

间距

侧边距：40–60px，区块间：30–50px
不允许大面积空白。若有空间，用内容或细微装饰元素填充

对比度

确保文字可读性（符合 WCAG AA 最低标准）
使用对比度突出重点
考虑色盲用户可用性

响应式设计

始终包含响应式断点：

@media (max-width: 768px) {
  .poster {
    padding: 1rem;
  }
  .title {
    font-size: 2rem;
  }
}

常见应用场景

活动海报：会议、音乐会、展览
产品发布：新产品宣传
促销活动：折扣、限时优惠
公告通知：新闻、更新、提醒
社交媒体：Instagram 发布、微信分享
商业用途：公司简介、服务介绍
教育场景：课程、工作坊、培训
节日庆典：节日问候、庆祝活动

输出格式

最终交付物

一个自包含的 HTML 文件，具备内置导出功能。用户可以：

在任意浏览器中打开 HTML
点击“导出 PNG/JPG”按钮，立即下载图片
无需额外工具或手动截图

工作流程：

生成包含导出按钮的 HTML 代码
将 HTML 保存至用户工作目录
提示用户：“海报已生成！用浏览器打开后点击底部按钮即可导出图片。”

关键点：

HTML 包含来自 CDN 的 html2canvas 库
导出按钮在截图时隐藏（不会出现在导出图片中）
使用 2 倍缩放以获得高分辨率输出
用户获得的是完整、即用型文件

优秀设计建议

内容为王：海报应传递信息。务必包含所有关键信息——日期、地点、亮点、演讲者、行动号召
大而醒目：标题需吸引眼球。主标题至少 80px。让文字具有冲击力
充分利用画布：1080x1920 是大尺寸画布。善用它！不要留懒散空白。每个像素都应有价值
视觉引导：自然引导视线流动（从上到下，从大到小）
风格统一：保持整体风格一致
可访问性：确保所有用户都能清晰阅读

常见错误避免

❌ 标题小于 150px
❌ 任何文字字重低于 700
❌ 可容纳内容却空置的空间
❌ 少于 7 个内容区块
❌ 缺少明确的行动号召
❌ 缺失关键信息（日期、地点）
❌ 使用柔和/浅色时仍需强烈视觉冲击

双语支持

创建双语海报时：

主语言置于显眼位置
次语言可更小或位于不同区域
使用适配的语言字体
考虑文化设计元素
保持双语间的视觉平衡

@tobewin

已收录 3 个 Skill