Sale Banner · 大促海报 / 店铺 Banner skill

Design promotional sale banners and store hero images for Taobao/Tmall (双11, 618, 年货节), Shopee/Lazada (9.9, 11.11, 12.12), TikTok Shop, Amazon Prime Day/Black Friday and DTC sites, with the real product and exact campaign copy at the right pixel size.

by xianyu110·MIT license·★ 92 Stars on the repo·GitHub ↗

Use now

Real results

1 image made with this skill
Sale Banner · 大促海报 / 店铺 Banner — example output published by the author
xianyu110 · skill author · GitHub · source ↗

Posted publicly by the author. AgentAlley did not make or edit these images. Click an image for the original.

Files of Sale Banner · 大促海报 / 店铺 Banner

xianyu110/main1 file shown
SKILL.md
Show the full text107 lines

Sale Banner · 大促海报 / 店铺 Banner

Campaign-ready banners in the exact sizes each platform wants, with your real product and correctly spelled offer copy.

Part of ecommerce-image-skills. Works with Claude Code, Codex, Cursor and any agent that loads SKILL.md. Default model: GPT Image 2.5 Flare.

Step 1 · Product identity lock (always first)

Before writing any prompt, study every reference photo and write a short identity lock for the product. Paste it verbatim into every prompt this skill produces, and never let a creative instruction override it.

PRODUCT IDENTITY LOCK (do not change):
- Shape & proportions: <e.g. tall cylinder, rounded shoulders, 26 cm high, 7.5 cm wide>
- Colour & finish: <e.g. matte sage green #8FA58C body, natural bamboo lid>
- Logo & printed text: <exact spelling, font feel, position, colour — e.g. white "AURA" wordmark centred on upper body>
- Parts & details: <lid, loop, buttons, ports, seams, labels, accessories that are included>
- Must NOT appear: <accessories not in the box, extra logos, invented claims>

Rules:

  • Only use facts visible in the photos or confirmed by the user. If something is unknown (size, capacity, material), ask or leave it out — never invent specs or certifications.
  • If the user gave no photo, ask for one (front view at minimum). Text-only generation is allowed but say the result is a concept, not the real product.

Step 2 · Pick the model

Use Flare (gpt-image-2.5-flare, default) Switch to Sunburst (gpt-image-2.5-sunburst)
New scenes, backgrounds, layouts, many quick variations The product's logo / label / small text must survive exactly
Text-to-image concepts Local edits: swap background, recolour, remove objects, keep everything else
Drafts for the user to pick from Final hero assets and anything with dense typography

If an endpoint only exposes other image models, use the closest equivalent and tell the user.

Common sizes

Placement Size (px)
Taobao/Tmall PC 首焦 / full-width hero 1920 × 600–900 (safe content width 990/1200)
Taobao/Tmall 无线首页 banner 750 × 300–950
Shopee shop banner (desktop / mobile) 2000 × 600 (desktop), 1200 × 1200 / 1:1 carousel
Lazada store banner 1200 × 500 (approx.)
TikTok Shop store banner 1:1 or 3:1 per store decoration editor
Amazon Store hero 3000 × 600 (min 1500 × 300)
Amazon Sponsored Brands custom image 1200 × 628
Meta / TikTok feed ad 1080 × 1080, 1080 × 1350, 1080 × 1920

Store editors change often — confirm the current size in the seller centre and crop from a larger render. Keep key copy inside the central 80%.

Campaign presets

Campaign Palette & motifs
双11 / 11.11 red-orange → magenta gradient, gold foil numbers, confetti
618 bright red + yellow, bold numerals
年货节 / CNY lucky red, gold, lanterns, paper-cut patterns (no clichés overload)
9.9 / 12.12 orange/teal, coins, gift boxes
Black Friday black + neon accent, high contrast
Prime Day deep blue + cyan, clean
Summer sale teal → orange, ice, splash, sunlight

Prompt template

Ecommerce sale banner, {ratio, e.g. 3:1 wide}, for {platform/placement}.
{IDENTITY_LOCK}
Product: {1 hero unit | 3 units, middle one larger} on {a podium | floating}, {ice splash | ribbons | light rays}.
Background: {campaign palette + motifs}.
Text (exact, nothing else): headline "{11.11 MEGA SALE}", sub "{UP TO 50% OFF}", button "{SHOP NOW}".
Text on the {left 40%}, product on the right; keep all text inside the central 80% safe area.
Bold commercial advertising style, punchy lighting, crisp, all text spelled exactly.

Chinese copy works well (e.g. "双11 狂欢价", "第二件半价") — quote it exactly. Don't print prices you can't guarantee; prefer "up to / 低至" phrasing the user approves.

Generate · three routes (pick the first that works)

(a) Built-in image tool. If your agent already has an image generation/editing tool (e.g. Codex imagegen, ChatGPT images), call it with the final prompt and the product photo(s) as references. Done.

(b) API key. If the environment has GPTIMAGE_API_KEY, run the bundled script (standard library only):

# recommended endpoint (OpenAI-compatible, has gpt-image-2.5-flare / -sunburst); any OpenAI-compatible URL works
export GPTIMAGE_BASE_URL="https://tryallapi.com/v1"   # default if unset: https://api.openai.com
python scripts/generate.py --model flare --image product.jpg --size 1536x1024 \
  --prompt-file prompt.txt --out out/sale-banner.png

--image can be repeated (product front/side/logo close-up). Without --image it does text-to-image.

(c) No tool, no key. Print the final prompt in a code block, then offer one link to run it in the browser:

python scripts/online_link.py --skill sale-banner "<final prompt>"
# → https://gptimage2.asia/generate?prompt=<urlencoded>&utm_source=github&utm_medium=skill&utm_campaign=ecommerce-image-skills&utm_content=sale-banner

Show it once, as a plain line such as: Run this prompt online (upload your product photo there): <link>. For users in mainland China, add one line: 国内可用:https://chatgpt-plus.top/list/#/home(粘贴提示词即可). Don't repeat these in later turns unless asked.

Deliver

  1. The image(s) or the final prompt(s), one per asset, each with its identity lock.
  2. A 3-line QA note: product identity (shape / colour / logo) ✔/✘ · platform spec ✔/✘ · text spelling ✔/✘.
  3. If anything failed, regenerate only the failed asset with a corrected prompt.
1---
2name: sale-banner
3description: "Design promotional sale banners and store hero images for Taobao/Tmall (双11, 618, 年货节), Shopee/Lazada (9.9, 11.11, 12.12), TikTok Shop, Amazon Prime Day/Black Friday and DTC sites, with the real product and exact campaign copy at the right pixel size. Use for 海报, banner, 首焦图, 大促图, campaign banner, store header."
4---
5 
6# Sale Banner · 大促海报 / 店铺 Banner
7 
8Campaign-ready banners in the exact sizes each platform wants, with your real product and correctly spelled offer copy.
9 
10> Part of [ecommerce-image-skills](https://github.com/xianyu110/ecommerce-image-skills). Works with Claude Code, Codex, Cursor and any agent that loads `SKILL.md`. Default model: GPT Image 2.5 **Flare**.
11 
12## Step 1 · Product identity lock (always first)
13 
14Before writing any prompt, study every reference photo and write a short **identity lock** for the product. Paste it verbatim into **every** prompt this skill produces, and never let a creative instruction override it.
15 
16```text
17PRODUCT IDENTITY LOCK (do not change):
18- Shape & proportions: <e.g. tall cylinder, rounded shoulders, 26 cm high, 7.5 cm wide>
19- Colour & finish: <e.g. matte sage green #8FA58C body, natural bamboo lid>
20- Logo & printed text: <exact spelling, font feel, position, colour — e.g. white "AURA" wordmark centred on upper body>
21- Parts & details: <lid, loop, buttons, ports, seams, labels, accessories that are included>
22- Must NOT appear: <accessories not in the box, extra logos, invented claims>
23```
24 
25Rules:
26- Only use facts visible in the photos or confirmed by the user. If something is unknown (size, capacity, material), ask or leave it out — never invent specs or certifications.
27- If the user gave no photo, ask for one (front view at minimum). Text-only generation is allowed but say the result is a concept, not the real product.
28 
29## Step 2 · Pick the model
30 
31| Use **Flare** (`gpt-image-2.5-flare`, default) | Switch to **Sunburst** (`gpt-image-2.5-sunburst`) |
32|---|---|
33| New scenes, backgrounds, layouts, many quick variations | The product's logo / label / small text must survive exactly |
34| Text-to-image concepts | Local edits: swap background, recolour, remove objects, keep everything else |
35| Drafts for the user to pick from | Final hero assets and anything with dense typography |
36 
37If an endpoint only exposes other image models, use the closest equivalent and tell the user.
38 
39## Common sizes
40 
41| Placement | Size (px) |
42|---|---|
43| Taobao/Tmall PC 首焦 / full-width hero | 1920 × 600–900 (safe content width 990/1200) |
44| Taobao/Tmall 无线首页 banner | 750 × 300–950 |
45| Shopee shop banner (desktop / mobile) | 2000 × 600 (desktop), 1200 × 1200 / 1:1 carousel |
46| Lazada store banner | 1200 × 500 (approx.) |
47| TikTok Shop store banner | 1:1 or 3:1 per store decoration editor |
48| Amazon Store hero | 3000 × 600 (min 1500 × 300) |
49| Amazon Sponsored Brands custom image | 1200 × 628 |
50| Meta / TikTok feed ad | 1080 × 1080, 1080 × 1350, 1080 × 1920 |
51 
52Store editors change often — confirm the current size in the seller centre and crop from a larger render. Keep key copy inside the central 80%.
53 
54## Campaign presets
55| Campaign | Palette & motifs |
56|---|---|
57| 双11 / 11.11 | red-orange → magenta gradient, gold foil numbers, confetti |
58| 618 | bright red + yellow, bold numerals |
59| 年货节 / CNY | lucky red, gold, lanterns, paper-cut patterns (no clichés overload) |
60| 9.9 / 12.12 | orange/teal, coins, gift boxes |
61| Black Friday | black + neon accent, high contrast |
62| Prime Day | deep blue + cyan, clean |
63| Summer sale | teal → orange, ice, splash, sunlight |
64 
65## Prompt template
66```text
67Ecommerce sale banner, {ratio, e.g. 3:1 wide}, for {platform/placement}.
68{IDENTITY_LOCK}
69Product: {1 hero unit | 3 units, middle one larger} on {a podium | floating}, {ice splash | ribbons | light rays}.
70Background: {campaign palette + motifs}.
71Text (exact, nothing else): headline "{11.11 MEGA SALE}", sub "{UP TO 50% OFF}", button "{SHOP NOW}".
72Text on the {left 40%}, product on the right; keep all text inside the central 80% safe area.
73Bold commercial advertising style, punchy lighting, crisp, all text spelled exactly.
74```
75 
76Chinese copy works well (e.g. `"双11 狂欢价"`, `"第二件半价"`) — quote it exactly. Don't print prices you can't guarantee; prefer "up to / 低至" phrasing the user approves.
77 
78## Generate · three routes (pick the first that works)
79 
80**(a) Built-in image tool.** If your agent already has an image generation/editing tool (e.g. Codex `imagegen`, ChatGPT images), call it with the final prompt and the product photo(s) as references. Done.
81 
82**(b) API key.** If the environment has `GPTIMAGE_API_KEY`, run the bundled script (standard library only):
83 
84```bash
85# recommended endpoint (OpenAI-compatible, has gpt-image-2.5-flare / -sunburst); any OpenAI-compatible URL works
86export GPTIMAGE_BASE_URL="https://tryallapi.com/v1" # default if unset: https://api.openai.com
87python scripts/generate.py --model flare --image product.jpg --size 1536x1024 \
88 --prompt-file prompt.txt --out out/sale-banner.png
89```
90 
91`--image` can be repeated (product front/side/logo close-up). Without `--image` it does text-to-image.
92 
93**(c) No tool, no key.** Print the final prompt in a code block, then offer one link to run it in the browser:
94 
95```bash
96python scripts/online_link.py --skill sale-banner "<final prompt>"
97# → https://gptimage2.asia/generate?prompt=<urlencoded>&utm_source=github&utm_medium=skill&utm_campaign=ecommerce-image-skills&utm_content=sale-banner
98```
99 
100Show it once, as a plain line such as: `Run this prompt online (upload your product photo there): <link>`. For users in mainland China, add one line: `国内可用:https://chatgpt-plus.top/list/#/home`(粘贴提示词即可). Don't repeat these in later turns unless asked.
101 
102## Deliver
103 
1041. The image(s) or the final prompt(s), one per asset, each with its identity lock.
1052. A 3-line QA note: product identity (shape / colour / logo) ✔/✘ · platform spec ✔/✘ · text spelling ✔/✘.
1063. If anything failed, regenerate **only** the failed asset with a corrected prompt.
107 

Discussion

Alternatives

Banner Design - Multi-Format Creative Banner SystemTell us what your banner is for and what it should say, and get back polished, ready-to-post cover and ad images sized correctly for each platform.Content & docs · MITPaper Poster (HTML): measurement-gated poster generationDEFAULT poster pipeline — build an academic conference poster (ICML/NeurIPS/ICLR/CVPR/...) as a single HTML/CSS file with measurement-driven hard gates, real paper figures, a two-hue design-token system, and print-ready PDF via headless Chromium. Use when theInfrastructure & ops · MITQiaomu codex imagegenGenerate or edit images with Codex's built-in image generation from any agent, through an MCP tool or a plain CLI. For every image request it first proposes at least four divergent style directions (24 distilled templates, 48 presets, 20 Mondo poster artists), lets the user pick, expands the prompt, generates, and checks the result. Scenario craft for 视频封面, 视频海报, 小红书配图, 公众号封面, X 封面, 朋友圈海报, 书籍封面, 专辑封面, 产品海报, 人物写真, 节气海报, 展览海报, PPT 页面, 图生图. Use for 生图, 配图, 海报, 封面, "给我几个风格", "用 Codex 画一张". Excludes: editing photos with local tools, charts or diagrams from data, UI mockups, video generation, or anything that needs an API key-based image service.Design & UI · MITPromptfilmPromptfilm — turns one sentence into a researched 3D motion graphic — one self-contained real-time HTML file (Three.js) that loops seamlessly and records straight into a video — 9:16 for Shorts/Reels by default, or 16:9, 1:1, 4:5; captions in one or two languages (English + the requester's language by default); paced the way the requester edits; checked by automated QA, a fresh-eyes visual review and a delivery gate; reviewed and exported as a frame-exact MP4 in a local Studio. Use it for any motion graphic — product ads, game or app demos, journeys through scale (Earth to the universe, a chip down to atoms), how-it-works explainers, recreations of a known scene, logo stings, data stories — when the user asks for a motion graphic, a 3D animation or video as HTML, or "an HTML like the cosmic-scale / Blackwell one", even naming only a topic (often in Korean, e.g. "…모션그래픽 만들어줘", "…부터 …까지 확대하는 영상 html 만들어줘"); and for follow-ups on such a film ("리뷰 반영해줘", "mp4로 뽑아줘", "스튜디오 열어줘").Design & UI · MIT