跳到正文
cccskills
免费在 GitHub 公开

poster-hero

Create vertical marketing posters for product launches, events, and social sharing. Arrange a large headline, key selling points, and a call to action in a 1080×1920 layout, delivered as an HTML file and a rendered PNG image.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

生成 1080×1920 竖版营销海报,包含大标题、核心卖点和可选二维码,适合产品发布、活动宣传与朋友圈传播。当用户说“做竖版营销海报、活动宣传图、朋友圈海报、产品发布海报”时使用。横版金句卡用 card-quote,小红书知识卡用 card-xiaohongshu。

集成工具Playwright
查看安装方法

适用场景

  • Creating a poster for a product launch
  • Announcing an event or sale
  • Sharing a team's award announcement on social media
  • Designing a promotional image in brand colors

包含的文件(4)

  • SKILL.md4.3 KB
  • EASEL-META.md373 B
  • example.html6.2 KB
  • example.md263 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

营销海报

你是一名视觉营销设计师。根据用户提供的内容,生成一张竖版高冲击力营销海报 HTML。

⚠️ 生成前先读 card-design 设计系统(锁配色/字体层级/填满画幅/去 AI 廉价感)。营销海报可用有品味的渐变/mesh 作背景氛围(这是海报的合理手段,与知识卡不同),但仍禁:蓝紫科技渐变、渐变文字、emoji 当图标、粗黑大标题、底部死空白。海报也要填满 1080×1920。

输出规范

  • 容器 width: 1080px; height: 1920px,居中显示,圆角裁切
  • 输出完整的 HTML 文件,写入 outputs/ 目录,可直接在浏览器打开截图

海报结构

  1. 上部 — 品牌名 / 标签(发布日期、版本号、活动名等)+ 一个线性图标或抽象几何标记(禁 emoji 当图标)
  2. 中部视觉中心 — 主标题(字越大越细:大字用 Thin/Light 字重,靠字号+留白建立层级,而非 font-black)+ 一句话副标题,用 1 个强调色高亮关键词
  3. 下部信息卡片 — 3-5 条核心卖点,每条 线性图标(Lucide,stroke 1.5) + 短句
  4. 底部 — 右下角品牌 / 二维码(用 SVG 占位)+ CTA 文案;底部填满,不留死空白

视觉风格

遵循 card-design:先按内容/Profile 选一个风格立场并锁定它的配色与字体,全程只用这一套。海报允许有品味的氛围渐变作背景,但下列是硬红线。

  • 背景:氛围渐变 / mesh 或单色系深底 + 1 个强调色。禁蓝紫科技渐变(from-violet-* via-fuchsia-* to-indigo-* 这类是头号 AI tell);配色取自 card-design 选中风格,不自由撞色。
  • 文字:字越大越细(大标题 Thin/Light),仅 1 个对比强调色突出关键词;正文/副标题不用纯白硬撞,用低透明度或浅灰建立层次。禁渐变文字(bg-clip-text)。
  • 装饰克制:发丝线 / 网格 / 极淡噪点纹理(grain)即可。禁玻璃拟态(backdrop-filter:blur)、禁堆叠阴影。
  • 字体:Noto Sans / Serif SC 全字重(细体已装),英文用 Inter Tight;经 Tailwind CDN + Google Fonts 加载。
  • 填满 1080×1920:内容覆盖 ≥75% 画高,任何无理由空白带 >15% 画高 = 失败(见 card-design layout-laws.md)。

示例 Prompt

  • "帮我做一张产品发布海报,产品是 XXX,核心卖点是 A、B、C"
  • "做一张活动宣传海报,主题是年中大促,时间 7 月 20 日"
  • "朋友圈分享图,内容是我们团队刚拿了 XX 奖"

与其他卡片 SKILL 的区别

三者都是"HTML 单图 → 截图",仅画幅与场景不同,互不替代:

  • poster-hero(本 SKILL) = 1080×1920 竖版营销海报 / 朋友圈分享图,全屏渐变 + 大标题 + 卖点卡片 + 二维码,用于产品发布、活动宣传。
  • card-quote = 16:9 横版金句/数据卡,单张 hero 观点或核心数字,配微博 / 知乎 / X / 公众号。
  • card-xiaohongshu = 1080×1440 竖版小红书知识卡(走 card-design 风格库),可多张联排滑动浏览,一套干货拆成多张。

Profile 感知

  • 有 Profile:从 style.md 读取品牌配色替换默认背景,从 identity.md 读取品牌名用于底部署名
  • 无 Profile:按 card-design 选一个风格立场锁定配色(如「高奢黑金」「杂志暖纸」),底部署名留空——不要退回蓝紫科技渐变默认。

输出

生成完整的 HTML 文件,写入 outputs/ 目录,再用共享脚本自动渲染成图(勿手动截图):

python skills/shared/scripts/render_card.py \
  --html outputs/主题名/assets/poster.html \
  --out outputs/主题名/poster.png \
  --full-page --width 1080 --height 1920
  • 竖版海报 1080×1920 用 --full-page。脚本对 CDN/字体有界超时不卡死。
  • 首次需 pip install playwright && playwright install chromium。

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Generate images from written descriptions, transform existing images with editing instructions, or create several variations. Choose image dimensions and quantity, then save the results using an OpenAI-compatible service or apimart with your own API key.

中文简介正在准备中。当前显示英语简介。

  • Generating an illustration from a written description
  • Changing an image's background using instructions
  • Creating several variations of an existing image
ZJU-REAL/Easel40242026年10月21日 更新

ai-music

免费

Generate background music for short videos, vlogs, and social posts from descriptions of mood, style, and instruments. Download MP3 audio, optionally include sung lyrics, and use shared scripts to trim tracks, adjust loudness, or add music to videos.

中文简介正在准备中。当前显示英语简介。

  • Generating background music for a vlog intro
  • Creating instrumental music to match a social post
  • Generating a sung track from supplied lyrics
ZJU-REAL/Easel40242026年10月21日 更新

Create new videos from written scene descriptions or still images using external AI services. Set the aspect ratio and duration, animate a character image, and request generated audio when the selected model supports it.

中文简介正在准备中。当前显示英语简介。

  • Generate a short video from a scene description
  • Animate a still image
  • Create character motion from a starting image
ZJU-REAL/Easel40242026年10月21日 更新

Organize generated images, videos, and text in outputs/ by date, platform, and type. Add tags, search filenames and content, produce asset lists and reports, and preview archive moves before applying them to make past work easier to reuse.

中文简介正在准备中。当前显示英语简介。

  • Organizing generated assets by date, platform, and type
  • Finding past content through keywords and tags
  • Listing assets for a specific account or platform
ZJU-REAL/Easel40242026年10月21日 更新

Reduce background noise in audio recordings or video soundtracks with three processing levels. Keep the original file, create a cleaned version, and receive a report of the settings used and file details before and after processing.

中文简介正在准备中。当前显示英语简介。

  • Reducing fan or air conditioner noise in recordings
  • Cleaning speech in podcasts and interviews
  • Reducing noise in a video's audio track
ZJU-REAL/Easel40242026年10月21日 更新

Edit audio files by trimming sections, converting formats, matching loudness, or extracting sound from videos. You can also join recordings, add fades, and change playback speed while keeping the original pitch.

中文简介正在准备中。当前显示英语简介。

  • Trim a recording to the section you need
  • Convert audio formats and match loudness
  • Extract audio from a video
ZJU-REAL/Easel40242026年10月21日 更新

查看 ZJU-REAL 的全部技能

报告此技能的问题