# Ecom Product Hero

> Generate premium product posters and e-commerce hero images with atmospheric layering, gold-accented typography, and luxury beverage advertising layout. Use for retail banners, wall posters, convenience store displays, and e-commerce hero images.

- Skill: `jahangirhussen/ecom-product-hero` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jahangirhussen/ecom-product-hero`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jahangirhussen/ecom-product-hero/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Jahangirhussen (https://skillmd.com/u/jahangirhussen)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jahangirhussen/ecom-product-hero

---


# Ecom Product Hero — Premium Poster Generator

Creates high-impact product posters using the "百岁山 layout" — inspired by high-end beverage advertising.

## When To Use

- Convenience store banners (易拉宝 rollup banners)
- Wall posters viewed from 3+ meters
- E-commerce hero images (主图 for Taobao/Shopify/WooCommerce)
- Retail display visuals

Do NOT use for: social media carousels, multi-page decks, close-reading layouts.

## Required Inputs

Before generating, collect:
1. **Product image** — transparent PNG preferred
2. **Landscape background** — matches product's geographic/origin story
3. **Key metrics** — 3-5 specs for the data matrix (e.g., "500ml | 0 Sugar | pH 7.4")
4. **Poster dimensions** — default: 80×100cm (rollup banner)
5. **Promotional badges** — optional ("New", "Limited", sale price)

## Visual Composition (5 Layers)

```
Layer 5: Typography + Data Matrix (top)
Layer 4: Ground mist — anchors product
Layer 3: Light rays — depth and drama
Layer 2: Warm product glow — spotlight effect
Layer 1: Cool-toned gradient overlay
Layer 0: Full-bleed landscape background
```

## Design Rules

- **Gold accent** `#d4a853` — use ONLY on data labels and 1 keyword in title
- **Typography weight**: thin (200) for numbers → scientific credibility; bold for labels
- **Text density**: MINIMAL — readable from 3 meters, no long body copy
- **Background**: must authentically connect to product's origin story
- **Product**: centered, atmospheric blending with surroundings

## Data Matrix Format

5-column spec table, semi-transparent background, hairline dividers:
```
| Spec 1 | Spec 2 | Spec 3 | Spec 4 | Spec 5 |
```

## Output

- HTML/CSS template rendered to PNG
- Resolution suitable for print (300dpi equivalent)
- Dimensions: 80×100cm default (adjustable)

## Design System Reference

See `references/design-system.md` for full typography hierarchy, overlay temperature guide, and category adaptations.