poster-hero
nexu-io/open-design
Vertical 9:16 poster or Moments-style share image with strong visual impact.
What is poster-hero?
A template for creating high-impact vertical posters and social media share images (1080×1920px). Use this when you need eye-catching marketing visuals with bold gradients, geometric elements, and clear information hierarchy for product launches or promotional content.
- Generates vertical posters optimized for 9:16 aspect ratio (1080×1920px)
- Applies bold gradient backgrounds with mesh effects and decorative SVG elements
- Arranges content with large headline, subtitle, and 3-5 key points with icons
- Includes QR code and branding placement in bottom-right corner
- Uses high-contrast color schemes with white text and accent highlights
- Adds noise texture and geometric decorations (circles, triangles, waves)
How to install poster-hero
npx skills add https://github.com/nexu-io/open-design --skill poster-heroHow to use poster-hero
- 1.Install the skill using: npx skills add https://github.com/nexu-io/open-design --skill poster-hero
- 2.Provide your content: main headline, subtitle, 3-5 key points, brand/QR code details, and preferred color scheme
- 3.The template will generate an HTML-based 1080×1920px poster with gradient background and decorative elements
- 4.Preview the poster in the web interface and adjust colors, text, or layout as needed
- 5.Export or screenshot the final poster for use on social platforms
Use cases
- Creating product launch announcements for social media sharing
- Designing promotional posters for WeChat Moments or similar platforms
- Building marketing materials with strong visual hierarchy and brand colors
- Generating event or campaign visuals with key information cards
- Making shareable vertical graphics for mobile-first audiences
- Marketing and product teams
- Social media content creators
- Brand designers creating campaign materials
- Product launch coordinators
- Agencies producing vertical promotional content
poster-hero FAQ
The poster is 1080×1920 pixels (9:16 aspect ratio), optimized for vertical sharing on social media platforms like WeChat Moments and Instagram Stories.
Yes, the template uses configurable gradient backgrounds (e.g., violet to fuchsia to indigo) and accent colors. You can specify your brand colors when providing content.
The template includes an SVG placeholder in the bottom-right corner where you can insert your QR code image or data.
Prepare a main headline, one-line subtitle, 3-5 key points with brief descriptions, your brand logo or name, and optionally a QR code and preferred color palette.
The template generates HTML-based posters with a web preview interface. You can screenshot or export the final result for use on social platforms.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
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 做装饰性元素 (圆 / 三角 / 波浪 / 噪点纹理)。
Related skills
More from nexu-io/open-design and the wider catalog.
ppt-keynote
Apple Keynote-quality slides with keyboard navigation and one card per screen.
pptx
Read, generate, and adjust PowerPoint slides, layouts, and templates.
pptx-generator
Create and edit PowerPoint presentations from scratch with PptxGenJS.
pptx-html-fidelity-audit
Audit python-pptx exports against HTML source decks and fix layout drift with cursor-flow discipline.
pr-feedback-quality-gate
Track PR feedback, resolve conflicts, validate fixes, and cross-review before committing changes.
redesign-existing-projects
Audit and upgrade existing websites to premium quality without breaking functionality.