DEV Community

xiaodong Zhang
xiaodong Zhang

Posted on

No Designer? Connect item-detail to Codex and Turn One Product Photo into a Full Detail Page

Turn one product photo into a modular ecommerce detail page
Your product is ready, but the supplier sent only one clean photo. You still need a hero banner, benefit icons, material close-ups, construction details, and a size or specification block.
The item-detail skill turns that problem into a repeatable Codex workflow. Give it one product image, a category, and up to 100 Chinese characters of verified selling points. It then prepares separate prompts and commands for a complete set of product-detail visuals with Chinese copy.
You do not need to be a developer to follow this guide.
Important: the skill is a workflow, not an offline image editor. The actual images are generated by the third-party dLazy cloud model seedream-5.0-pro. Your image, prompt, and parameters are uploaded to that service. Confirm your rights to the source material and make sure the account has enough credits.
What does it produce?
A practical page can be divided into five modules:
1.Hero banner: product or model image, headline, and subheadline;
2.Benefit row: three or four icons with short labels;
3.Material block: a fabric or surface close-up with explanation;
4.Detail block: stitching, hardware, ports, texture, or construction;
5.Size/specification block: apparel measurements or technical parameters.
The workflow should not invent certifications, medical effects, discounts, or comparison data. It should also preserve the product's style, color, and material.
Step 1: Start with a source image the model can read

A clean and complete ecommerce source image
Use a source file that meets these rules:
20KB to 15MB;
larger than 400×400 pixels;
JPG, JPEG, PNG, or WebP;
the complete product is visible and unobstructed;
the background is clean, without old prices, watermarks, or promotional copy.
If a hand hides the zipper, the model has to guess the zipper. If old text already covers the product, the new layout may collide with it.
Step 2: Compress the selling points
Image copy is not a product manual. Short text is easier to typeset and less likely to become malformed.
Keep a Chinese headline within 8 characters;
keep a subheadline within 16 characters;
keep an icon label within 5 characters;
use only claims that have been verified.
For example, replace a long sentence about soft, comfortable fabric with the short label .
Step 3: Install item-detail in Codex
Original skill:
GitHub: dlazyai/ecommerce-skills — item-detail
Open a new Codex task and enter:
$skill-installer
Install the item-detail skill from this GitHub path:
https://github.com/dlazyai/ecommerce-skills/tree/main/skills/item-detail

Keep the complete skill directory. Confirm that the entry file is named SKILL.md,
then verify that Codex can discover item-detail.
Codex can install skills from other repositories. A standalone skill uses a directory whose entry file is SKILL.md. If it does not appear immediately, restart Codex, type $, or run /skills.
Manual locations are:
Current project: $CWD/.agents/skills/item-detail/SKILL.md
All projects: $HOME/.agents/skills/item-detail/SKILL.md
Step 4: Prepare the dLazy CLI
Check the pinned version:
npx @dlazy/cli@1.2.3 --help
Use the recommended device login:
dlazy login
If you already have a key:
dlazy auth set YOUR_API_KEY
Never paste a real key into public chat, screenshots, or a repository.
Step 5: Generate modules, not one giant page

Five separately generated detail-page modules
Generate the hero, benefits, material, detail, and specification blocks separately, then assemble them into a long page.
The longer the canvas and the more text it contains, the more likely the lower sections are to develop bad characters or cramped layout. Modular generation also lets you rerun only the failed block.
Every prompt should contain four controls:
1.Put every literal line of copy inside Chinese quotation marks 「」;
2.specify a sans-serif Chinese typeface and clear size hierarchy;
3.define the relationship between the product area and copy area;
4.explicitly require clear, correct Chinese with no malformed characters.
Step 6: Use a dry run first
Place the product image in the project, for example:
docs/item-detail/product-sweater.jpg
Then ask Codex:
$item-detail

Create a five-module product detail-page kit from
docs/item-detail/product-sweater.jpg.

Category: apparel.
Product: olive green crew-neck cable-knit sweater.
Must preserve: olive color, crew neck, dropped shoulders, central diamond knit,
side cable pattern, and ribbed cuffs.
Verified selling points only: wool blend, warm weight, soft against skin,
and suitable for commuting.

Prepare: 1) hero banner, 2) three benefit icons, 3) fabric macro,
4) neckline and knit detail, and 5) size reference.

Keep the Chinese headline within 8 characters, the subheadline within 16,
and each icon label within 5. Put every Chinese string inside 「」.
Use a sans-serif Chinese typeface. Product and copy areas must not overlap.
All Chinese must be clear and correct. Add no claims I did not provide.

Run a dry run first. Show all five commands, aspect ratios, save paths,
and estimated credits. Do not generate yet.
After approval, save each module separately under docs/item-detail/ with a predictable SKU-based name.
Step 7: Review character by character

Human review of product identity, typography, icons, and specifications
Do not approve a result simply because it looks attractive. Check:
color, silhouette, texture, pattern, and construction against the source;
every headline, subheadline, and icon label character by character;
malformed, missing, invented, or extra characters;
overlap between the product and copy;
consistent icon style;
size and specification values against the real product data;
invented effects, certifications, promotions, or absolute claims.
If one module fails, rerun only that module.
Common problems
Chinese text is malformed
Shorten the copy, repeat the exact strings, and append:

Copy overlaps the product
Define explicit regions, such as 55% for the product and 45% for the copy, with no overlap.
The product changes
List the exact color, material, structure, pattern, and defining details, then reuse that preservation list in every module.
unauthorized
Run dlazy login again or check the saved API key.
insufficient_balance
Add dLazy credits at dLazy Credits.
The workflow in one line
Clean source → verified short copy → five modules → dry run → generate separately → proofread → assemble
The value of item-detail is not that AI designs without supervision. It is that a fragile creative task becomes a clear, repeatable process.
Related links
Original item-detail skill · Official Codex skills guide · dLazy CLI source · dLazy

Top comments (0)