Vibe Coding 提示词

Commerce · Intermediate

电商商品详情页提示词

创建包含规格选择、配送说明、可信证据和清晰购买路径的商品页。

Vibe Codingv0LovableBolt

可复制的提示词模板

技术模板保留英文,便于直接用于兼容的编程 Agent;页面说明、选型建议和检查步骤均已中文本地化。

Build a responsive product detail page for [PRODUCT], made by [BRAND] for [TARGET CUSTOMER]. The primary purchase reason is [CORE BENEFIT].

Above the fold:
- Product gallery with thumbnail navigation, meaningful alt text, zoom, and a clear placeholder treatment.
- Product name, concise value proposition, rating summary labeled as sample data, price, payment information, and stock status.
- Variant selectors for [VARIANTS] that make unavailable combinations obvious.
- Quantity, Add to cart, delivery estimate for [DEFAULT LOCATION], returns summary, and secure checkout reassurance.

Supporting content:
- Benefit-led product story with concrete specifications.
- Comparison or “why this version” section when it helps the decision.
- Materials, dimensions, care, delivery, returns, and warranty in scannable disclosure sections.
- Reviews breakdown and a small set of believable sample reviews clearly labeled as examples.
- Related products that explain why each recommendation is relevant.

Behavior and quality:
- Updating a variant must update price, stock, gallery, and delivery message consistently.
- Include out-of-stock, low-stock, invalid combination, cart loading, cart error, and cart success states.
- Keep the purchase controls usable on mobile without obscuring content.
- Do not use fake scarcity timers, misleading discounts, or unsupported sustainability claims.

Art direction: [ART DIRECTION]. Use a coherent commerce design system with clear hierarchy and accessible controls.

使用前先完成定制

替换所有变量,删除不需要的功能,并加入真实内容、技术限制和明确的验收条件。

  • PRODUCT / BRAND — Arc Daypack / Northline
  • TARGET CUSTOMER — urban commuters who carry a laptop and gym kit
  • CORE BENEFIT — organized capacity without a bulky silhouette
  • VARIANTS — color and size
  • DEFAULT LOCATION — United Kingdom
  • ART DIRECTION — technical outdoor catalogue with crisp macro photography

系统检查生成结果

检查移动端、键盘操作、加载、空数据与错误状态,并使用真实数据完成核心流程。

选择 AI 编程工具

来源与维护信息

相关资源