Skip to content

/poster-hero

Vertical poster or Moments-style share image with strong visual impact.

From plugin
open-design
108k170 skills1 command1 MCP

Claude Code

$ npx -y skills add nexu-io/open-design --skill poster-hero --agent claude-code

SKILL.md

poster-hero.SKILL.md
name: poster-hero
zh_name: "营销海报"
en_name: "Marketing Poster"
emoji: "🖼️"
description: "Vertical poster or Moments-style share image with strong visual impact."
zh_description: "竖版海报 / 朋友圈分享图, 强视觉冲击"
en_description: "Vertical poster or Moments-style share image with strong visual impact."
category: poster
scenario: marketing
aspect_hint: "1080×1920 竖版"
tags: ["poster", "海报", "朋友圈"]
example_id: sample-poster-launch
example_name: "营销海报 · 产品发布"
example_format: markdown
example_tagline: "9:16 朋友圈分享图"
example_desc: "高对比度发布海报, 含 QR 码占位 + 渐变 mesh + 噪点纹理"
od:
  mode: prototype
  surface: web
  platform: desktop
  scenario: marketing
  upstream: "https://github.com/nexu-io/html-anything"
  preview:
    type: html
    entry: index.html
    reload: debounce-100
  design_system:
    requires: false
  example_prompt: "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
  example_prompt_i18n:
    zh-CN: "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"

【模板: 营销海报】

  • 容器 `w-[1080px] h-[1920px] mx-auto`, 全屏渐变 / mesh 背景。
  • 上部 30% 留白 + 一个大 emoji 或抽象几何图形。
  • 中部主标题占视觉中心 (text-8xl, font-black), 一句话副标题。
  • 下部信息卡片: 3-5 条核心要点用图标 + 短句。
  • 底部右下角放品牌 / 二维码 (用 SVG 占位)。
  • 使用大胆的色彩: 渐变背景 (from-violet-500 via-fuchsia-500 to-indigo-500 之类), 文字白色 + 1 个对比色高亮。
  • 使用 SVG 做装饰性元素 (圆 / 三角 / 波浪 / 噪点纹理)。
Read more
@nexu-io
Ships withopen-design

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.

Stars on GitHub

Momentum

stars in total
107.6k
Star history of nexu-io/open-design on GitHub, a chart by star-history.com

Other skills on open-design.

od-contribute
Auto-invoked

od-contribute

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or…

@nexu-io@nexu-ioInstall Skill
ad-creative
Auto-invoked

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad…

@nexu-io@nexu-ioInstall Skill
agent-browser
Auto-invoked

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages,…

@nexu-io@nexu-ioInstall Skill
ai-music-album
Auto-invoked

ai-music-album

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album…

@nexu-io@nexu-ioInstall Skill

More skills from other plugins.

impeccable

impeccable

Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…

@pbakaus@pbakausInstall Skill
animate

animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…

skills5d56k
@emilkowalski@emilkowalskiInstall Skill

Questions about poster-hero.

Which coding agents can use poster-hero?
poster-hero installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.