Post Creator

自动生成带导出功能的精美单页HTML海报，支持中英文及多种风格。

已扫描

项目

内容

适合谁

需要快速制作宣传海报的运营人员、无设计基础但需视觉化内容的个人创作者

不适合谁

需要复杂交互或动态效果的高级设计师、希望直接输出PSD/AI格式的专业平面设计师

国内可用性

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

安装难度

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

安装与下载

复制命令安装

openclaw skills install @tobewin/post-creator

官方 ZIP下载官方 ZIP

Skill 说明

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

Post Creator - HTML 海报生成器

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

核心原则

自包含性：每个海报必须是一个独立的 HTML 文件，所有样式均内联
固定尺寸：

- 默认（经典海报比例 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。标题应占据海报的主导地位
视觉平衡：使用左右或上下布局来平衡内容，避免全部堆叠在垂直方向
纯色背景：始终使用 background-color（纯色）。禁止使用 background: linear-gradient() 或 background: radial-gradient()。CSS 渐变在导出时无法可靠捕获。请使用如 #000、#0a0a12、#1a1a2e 等纯色背景

支持风格

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>
    /* 所有样式在此处 —— 完全自包含 */
    /* 如需使用 Google 字体，请通过 @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

已收录 1 个 Skill