Poster Hero
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
poster-hero is an agent skill that vertical poster or moments-style share image with strong visual impact.
About
poster-hero is an agent skill from nexu-io/open-design that vertical poster or moments-style share image with strong visual impact. 【模板: 营销海报】 - 容器 `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 做装饰性元素 (圆 / 三角 / 波浪 / 噪点纹理)。 Developers invoke poster-hero during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- 容器 `w-[1080px] h-[1920px] mx-auto`, 全屏渐变 / mesh 背景。
- 上部 30% 留白 + 一个大 emoji 或抽象几何图形。
- 中部主标题占视觉中心 (text-8xl, font-black), 一句话副标题。
- 下部信息卡片: 3-5 条核心要点用图标 + 短句。
- 底部右下角放品牌 / 二维码 (用 SVG 占位)。
Poster Hero by the numbers
- 1,762 all-time installs (skills.sh)
- +135 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #167 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
poster-hero capabilities & compatibility
- Capabilities
- 容器 `w [1080px] h [1920px] mx auto`, 全屏渐变 / mesh · 上部 30% 留白 + 一个大 emoji 或抽象几何图形。 · 中部主标题占视觉中心 (text 8xl, font black), 一句话副标题。 · 下部信息卡片: 3 5 条核心要点用图标 + 短句。 · 底部右下角放品牌 / 二维码 (用 svg 占位)。
- Use cases
- orchestration
What poster-hero says it does
- 容器 `w-[1080px] h-[1920px] mx-auto`, 全屏渐变 / mesh 背景。
- 中部主标题占视觉中心 (text-8xl, font-black), 一句话副标题。
- 使用大胆的色彩: 渐变背景 (from-violet-500 via-fuchsia-500 to-indigo-500 之类), 文字白色 + 1 个对比色高亮。
npx skills add https://github.com/nexu-io/open-design --skill poster-heroAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Vertical poster or Moments-style share image with strong visual impact.
Who is it for?
Developers working on design & ui/ux during build tasks.
Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.
When should I use this skill?
Vertical poster or Moments-style share image with strong visual impact.
What you get
Completed design & ui/ux workflow aligned with SKILL.md steps.
- 1080×1920 vertical poster image
- Moments-style share graphic
By the numbers
- Outputs 1080×1920 vertical (9:16) poster images for social sharing
Files
【模板: 营销海报】
- 容器
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 做装饰性元素 (圆 / 三角 / 波浪 / 噪点纹理)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML Anything 0.1 海报</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<style>
body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; display:grid; place-items:center; padding:24px 0; }
.poster { position:relative; width:1080px; max-width:96vw; aspect-ratio:9/16; border-radius:32px; overflow:hidden; color:#fff;
background:
radial-gradient(ellipse at 80% 0%, rgba(233,185,74,0.55), transparent 55%),
radial-gradient(ellipse at 20% 100%, rgba(108,58,166,0.5), transparent 55%),
linear-gradient(135deg,#c96442 0%,#15140f 60%,#1a0e2b 100%);
display:flex; flex-direction:column; padding:80px 70px;
box-shadow:0 40px 120px -20px rgba(0,0,0,0.7);
}
.grain { position:absolute; inset:0; pointer-events:none; opacity:0.18; background-image:radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px); background-size:3px 3px; }
.label { font-size:13px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85; }
.glyph { width:120px; height:120px; border-radius:32px; display:grid; place-items:center; background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.18); }
h1 { font-family:'Inter Tight',sans-serif; font-weight:900; font-size:148px; line-height:0.95; letter-spacing:-0.04em; margin:0; }
.em { font-family:Georgia, 'Noto Serif SC', serif; font-weight:700; font-style:italic; color:#e9b94a; }
.feature { display:flex; align-items:flex-start; gap:18px; }
.feature .ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.12); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.feature .t { font-size:22px; font-weight:600; }
.feature .d { font-size:15px; opacity:0.7; line-height:1.55; margin-top:4px; }
.qr { width:120px; height:120px; border-radius:14px; background:#fff; padding:12px; }
.qr svg { width:100%; height:100%; }
</style>
</head>
<body>
<div class="poster">
<div class="grain"></div>
<div class="flex items-center justify-between">
<div class="label">RELEASE · 2026.05</div>
<div class="glyph">
<div style="font-family:Georgia,serif; font-style:italic; font-size:78px; font-weight:700; color:#fff">H</div>
</div>
</div>
<div style="margin:auto 0; flex:none">
<div class="label" style="margin-bottom:24px">v0.1 · 已发布 / Now Available</div>
<h1>HTML<br/><span class="em">Anything</span></h1>
<div style="font-size:30px; font-weight:500; opacity:0.92; margin-top:36px; max-width:560px; line-height:1.35">
任何文档 → 世界级好看的 HTML,<br/>
用你<span class="em" style="color:#e9b94a">本地</span>的 AI agent。
</div>
</div>
<div style="display:grid; grid-template-columns:1fr; gap:18px; margin:48px 0 32px">
<div class="feature"><div class="ic">🎨</div><div><div class="t">9 套世界级模板</div><div class="d">PPT · 简历 · 海报 · 小红书 · 数据报告 …</div></div></div>
<div class="feature"><div class="ic">🔌</div><div><div class="t">8 个本地 agent 自动检测</div><div class="d">Claude / Cursor / Codex / Gemini / Copilot …</div></div></div>
<div class="feature"><div class="ic">🗝️</div><div><div class="t">0 API Key</div><div class="d">复用你已经登录的 CLI session, 0 边际成本</div></div></div>
<div class="feature"><div class="ic">📋</div><div><div class="t">一键发布</div><div class="d">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div></div></div>
</div>
<div style="display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18)">
<div class="qr">
<svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg">
<rect width="33" height="33" fill="#fff"/>
<g fill="#0a0a0a">
<rect x="2" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
<rect x="5" y="5" width="3" height="3"/>
<rect x="22" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
<rect x="25" y="5" width="3" height="3"/>
<rect x="2" y="22" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
<rect x="5" y="25" width="3" height="3"/>
<rect x="13" y="2" width="2" height="2"/><rect x="17" y="2" width="2" height="2"/>
<rect x="13" y="6" width="2" height="2"/><rect x="15" y="9" width="2" height="2"/>
<rect x="2" y="13" width="2" height="2"/><rect x="6" y="13" width="2" height="2"/>
<rect x="13" y="13" width="2" height="2"/><rect x="17" y="13" width="2" height="2"/><rect x="21" y="13" width="2" height="2"/>
<rect x="13" y="17" width="2" height="2"/><rect x="19" y="15" width="2" height="2"/>
<rect x="22" y="17" width="2" height="2"/><rect x="26" y="17" width="2" height="2"/>
<rect x="13" y="21" width="2" height="2"/><rect x="17" y="21" width="2" height="2"/>
<rect x="22" y="22" width="2" height="2"/><rect x="26" y="26" width="2" height="2"/>
<rect x="22" y="29" width="2" height="2"/><rect x="29" y="22" width="2" height="2"/>
</g>
</svg>
</div>
<div>
<div style="font-family:'JetBrains Mono',monospace; font-size:14px; opacity:0.95">$ pnpm dlx html-anything</div>
<div style="font-size:14px; opacity:0.7; margin-top:6px">github.com/your-org/html-anything</div>
</div>
</div>
</div>
</body>
</html>HTML Anything 0.1 已发布
一句话
任何文档 → 世界级好看的 HTML, 用你本地的 AI agent
特性
- 9 套世界级模板
- 8 个本地 agent 自动检测
- 0 API Key, 复用本地登录 session
- 一键复制到公众号 / 推特 / 知乎
CTA
github.com/your-org/html-anything · 一行命令跑起来
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Choose poster-hero over generic image skills when the deliverable is a 9:16 launch poster with social-share layout rather than a square app icon or UI mockup.
FAQ
What does poster-hero do?
Vertical poster or Moments-style share image with strong visual impact.
When should I use poster-hero?
During build frontend work for design & ui/ux.
Is poster-hero safe to install?
Review the Security Audits panel on this listing before production use.