Build a Storefront Prototype from a Product Catalog
Prepare variants, stock and exact-cent estimates, then review the shopping journey and a local order draft. Keep payment, authoritative inventory and fulfillment as separate integrations.
Fastest way
Ask your AI to do it
Paste this into the AI agent you already use:
Use Commerce Product Studio to build a reviewed storefront prototype from my approved USD catalog. Confirm variants, integer-cent prices, stock and artwork. Verify a mixed bag, discounts, delivery thresholds and local draft export. Keep real inventory, payment and order fulfillment separate.
What can the storefront skill build without a commerce backend?
Commerce Product Studio v1.0.0 generates a static storefront with product galleries, variants, filters, comparisons, a stock-aware bag and downloadable local order drafts. Node.js 22+ runs its generator without dependencies or an API key. It does not take an order, reserve inventory or collect a payment.
Prepare approved product facts and explicit pricing assumptions
- Read references/input.md. Supply USD integer-cent prices, stable variant IDs, reviewed stock quantities, materials, sizes and permitted artwork. The bundled lamp, cup and clock drawings are illustrations; another product needs an explicit artwork adaptation.
- Set delivery costs, the post-discount free-delivery threshold, coupon basis points and tax assumptions. The helper taxes the discounted item subtotal and keeps delivery separate; confirm the actual business rules before backend integration.
Generate and serve the fictional shop
Install the complete package, review SKILL.md and run from its directory into a new output folder. The included Objects & Hours catalog is fictional. The local server keeps browser routes and storage on one origin; stop it with Ctrl+C.
Check Commerce Product Studio setup
node scripts/build-store.mjs --input examples/store.json --demo --output ./practice-store
python3 -m http.server 5374 --bind 127.0.0.1 --directory ./practice-storeCheck the entire shopping journey and the exported draft
- Open http://127.0.0.1:5374/. Inspect every product and finish, a sold-out variant, excess quantity, empty search and comparison changes. Test bag JSON export/import and recovery when browser storage is blocked.
- Recalculate a mixed-variant bag independently: item subtotal, rounded discount, post-discount delivery threshold, tax and final total. The local client total is an estimate, never an authoritative charge.
- Prepare a valid local draft, download its actual JSON and confirm local-draft-not-submitted. Change a draft field and ensure the old download is invalidated. Inspect catalog.csv, quality notes and delivery hashes.
Inspect the current example output → — Compare the visible result with the exported files and checks described in this section.
What remains before accepting real orders?
Replace every fictional claim, set fictional to false and regenerate without --demo for approved real material. Integrate server inventory, pricing, tax, payment, order persistence and fulfillment separately. A working local draft cannot establish that a payment or order succeeded.