AI backgrounds + real products = professional hero images in 30 minutes.
A Codex-style skill for creating production-ready, layered Photoshop files that combine AI-generated backgrounds with real product photography. No manual compositing required.
Ecommerce teams face a dilemma:
- AI image generation produces polished, contextual backgrounds — but lacks real product authenticity
- Manual product photography is authentic but expensive and slow
- Hand-compositing (AI background + real product) is tedious and error-prone
- Existing tools force a false choice: use generated images or real photos, but not both
This skill automates the middle ground: generate a background, drop in your real product, get an editable Photoshop file — without hiring a compositing artist.
The skill handles the three hardest parts of ecommerce image creation:
- AI background generation — Creates contextual, on-brand backgrounds
- Product placement & scaling — Automatically positions and scales your product photo
- Photorealistic compositing — Adds shadows, reflections, and lighting adjustments to make the product look "native" to the background
Output: Layered, fully-editable PSD file with:
- Separated design elements (background, product, text layers, badges)
- Editable headlines, benefit cards, offer panels
- Non-destructive adjustment layers (shadows, color grading)
- Ready for tweaks in Photoshop or export as PNG/JPG
1. Product photo (PNG with transparency, 1000x1000px)
2. Visual reference (brand mood, color palette)
3. Copy (headline, benefits, CTA, offer)
4. Dimensions (canvas size, placement zones)
1. Generate AI background (contextual, on-brand)
2. Extract product cutout edges (if needed)
3. Calculate optimal product placement and scale
4. Generate matching shadows and reflections
5. Compose into Photoshop-ready layers
6. Add text layers, badges, benefit cards
7. Render preview PNG for QA
hero_v1.psd # Fully editable Photoshop file
hero_v1_preview.png # QA reference image
hero_config.json # Reproducible configuration
Total time: 20–30 minutes (vs. 2–4 hours of manual compositing)
mkdir -p ~/.codex/skills/hybrid-psd-ecommerce
cp -R hybrid-psd-ecommerce/* ~/.codex/skills/hybrid-psd-ecommerce/Keep the skill folder available and reference it when asking Claude to generate ecommerce images.
Use $hybrid-psd-ecommerce to create a hero image for this skincare product.
Background: Minimal spa aesthetic with soft lighting.
Product photo: [attached]
Copy: "Radiant Skin Starts Here" + 3 key benefits
Canvas: 1200x800px
Use $hybrid-psd-ecommerce to generate 5 hero image variations for this fitness tracker.
Same product and copy, but 5 different background contexts (gym, outdoor, lifestyle, tech, luxury).
Output: 5 layered PSDs for A/B testing.
Use $hybrid-psd-ecommerce to create an editable ecommerce banner from this reference mood board and product cutout.
Make it feel premium and minimal.
{
"background": {
"description": "Spa-inspired, soft natural lighting, neutral tones",
"reference_mood": "calm, minimal, luxury"
},
"product": {
"path": "input/product.png",
"height_px": 600,
"placement": "center-right",
"shadow_type": "soft-drop"
},
"canvas": {
"width": 1200,
"height": 800,
"safe_area": [100, 100, 100, 100]
},
"copy": {
"brand": "BRAND_NAME",
"headline": "Main value proposition",
"subheadline": "Support copy",
"benefits": [
{ "icon_type": "checkmark", "text": "Benefit 1" },
{ "icon_type": "star", "text": "Benefit 2" }
],
"cta": "Shop Now",
"offer": "Limited time offer"
}
}| Script | Purpose |
|---|---|
make_psd_hybrid_template.py |
Generate Photoshop JSX from config + product photo |
validate_hybrid_psd.py |
Check compositing quality, detect edge artifacts, validate layer structure |
generate_variants.py |
Create multiple background contexts for A/B testing |
- Python 3.9+
- Pillow (image processing)
- NumPy (array operations)
- Photoshop or compatible (for executing JSX, saving PSD)
- Optional: ImageMagick (batch processing)
- Ecommerce hero images (main product page, category banners)
- Product launch marketing materials
- Social media carousel posts (generate variants)
- Email campaign hero images
- A/B testing visual alternatives
- Product cutout quality matters — Clean, transparent background on your product photo = better compositing
- Copy tone — Generated text can sound generic; 10–15 min of human copywriting polish recommended
- Brand consistency — Requires clear brand guidelines (colors, typography, mood)
- Photoshop required — For final editing and PSD export (not included in skill)
- Generate hero with initial config
- Review preview PNG
- Adjust product placement, shadow intensity, copy
- Re-generate
- Open in Photoshop, make final tweaks
- Export for web/print
| Aspect | Result |
|---|---|
| Compositing realism | Shadows and reflections are plausible (not perfect) |
| Layer organization | Groups by element (background, product, text, badges) |
| Editability | All text is live text layer (editable in Photoshop) |
| File size | Typically 8–15 MB layered PSD |
| Format compatibility | Native Photoshop .psd (opens in PS CC 2020+) |
Share your ecommerce heroes built with this skill (anonymized or full credit):
- Submit issues with before/after images
- Tag with
#hybrid-psd-ecommerceon Twitter/LinkedIn - Contribute to community showcase
| Issue | Solution |
|---|---|
| Shadows look flat | Adjust shadow_intensity in config; try soft-drop or hard-drop |
| Product doesn't fit | Reduce height_px or increase canvas size |
| Text is hard to read | Increase background contrast or add text background layer |
| PSD won't open | Ensure Photoshop CC 2020 or later; check file isn't corrupted |
If you:
- Find edge cases (unusual product shapes, transparent backgrounds), open an issue
- Improve the compositing algorithm, submit a PR
- Create case studies or tutorials, share them in Discussions
MIT — Use freely for personal and commercial projects.
- Prepare your product photo — PNG, transparent background, 1000x1000px minimum
- Write your brand brief — Colors, tone, mood, target audience
- Use the skill — Generate your first hero
- Review & iterate — Adjust config, regenerate
- Polish in Photoshop — Final tweaks and export
Professional ecommerce image generation, without the professional price tag.