How to use poster-hero: vertical marketing poster agent skill

What the poster-hero skill makes the agent produce

A skill is a folder of instructions that an AI agent loads when a task matches it. This one covers vertical marketing posters at 1080×1920. When you ask for a poster, the agent builds an HTML page with a full-screen gradient or mesh background, a large headline, a short subtitle, a card of three to five key points with icons, a placeholder QR code area in the lower right, and decorative SVG shapes such as circles, triangles, waves or noise texture.

The template uses bold colours, for example gradients running from violet through fuchsia to indigo, with white text and one contrasting highlight colour. The skill's example is a product launch poster written in Chinese.

Install the poster-hero skill

Download the poster-hero ZIP from this page and unzip it. You can install it in one of two places. For all your projects, put the poster-hero folder inside ~/.claude/skills/. For a single project, put it inside that project's .claude/skills/ folder.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there. Whichever route you choose, the folder should contain SKILL.md, which is the file the agent reads to learn the skill.

• Personal install: ~/.claude/skills/poster-hero/
• Project install: .claude/skills/poster-hero/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need a special command. Describe the poster you want and mention its purpose and format. Words such as vertical poster, 朋友圈 (WeChat Moments) share image, or 9:16 tell the agent that this layout fits the task.

Give the agent the facts it needs: the product name, the headline, the three to five points and the call to action. The more specific the copy, the more usable the first draft will be.

• Make a vertical poster for our product launch: headline, subtitle, four key points and a QR code slot, 1080×1920.
• Create a 朋友圈 share image announcing our new app with a bold gradient background.
• Design a 9:16 promo poster for our spring sale with three benefits and a brand footer.

Example: a product launch poster

The bundled example, named 营销海报 · 产品发布, is a high-contrast launch poster with a QR placeholder, a gradient mesh background and noise texture. It shows the intended structure: empty space in the top third, a large headline in the middle, an information card below and a branded or QR area at the bottom right.

Use the example as a reference for layout and hierarchy, then replace the copy and colours with your own.

What the skill needs and what it does not do

The skill only describes the layout. It does not render images itself. You need an agent that can produce HTML with Tailwind classes, and a separate way to render that HTML to an image. The skill's own metadata says it runs no scripts and uses no network access.

The layout is fixed to 1080×1920, so it is not suited to print posters or other sizes. The template uses generic Tailwind colours and a placeholder QR code, so it is not a fit where exact brand assets or fonts are required.

• Needs: an agent that can write HTML/Tailwind, plus a way to render it to an image
• Runs scripts: no
• Uses network: no
• Files: SKILL.md, example.html, example.md

Safety notes before you install

Because the skill runs no scripts and uses no network, its risk is mainly in what you put into the generated page. Check any text, links and QR codes before you publish, since the QR code is only a placeholder and must be replaced with a real one.

Read SKILL.md once after unzipping so you know exactly what instructions the agent will follow.

• Replace the QR placeholder with your real code before sharing.
• Check copy, claims and links yourself; the template does not verify them.
• Review the unzipped files before installing.

Tips for better posters

Keep the headline short enough to read at phone size, since the template centres a very large headline. Limit the key points to three to five, as the template specifies. If you need brand fonts or exact colours, give the agent those values explicitly, or edit the generated HTML by hand.

• Ask for the Chinese or English copy you want; the template and example are in Chinese.
• Specify your highlight colour so it matches your brand.
• Ask for a single headline and one subtitle to keep the hierarchy clear.