Shop Home

An e-commerce home: search bar, carousel, product masonry, and bottom tabs.

iOSAndroidHarmonyOSMobile WebCommerceFull screenFlow Version v1.0.0 · Framework targets:html-css / tailwind / react Stale

Component prompts referenced by this scene prompt

Fill in the blanks to build your prompt

This prompt has no fill-in parameters — copy it as is, and replace the bracketed placeholders in the text.

Verification

Pending verification: this prompt has not been run against a live model yet; each one will be re-verified before launch.

Your assembled prompt

 

Original seven-part text

场景说明

电商 App 首页:搜索、轮播、商品瀑布与底部导航的完整组合。

版式说明

自上而下单列滚动:搜索框吸顶 → 轮播(≤5 张)→ 快捷分类一行 → 商品瀑布流;底部标签栏常驻,购物车标签带角标。

引用的组件提示词

  • search-bar-prompt v1.0.0
  • image-carousel-prompt v1.0.0,覆盖参数:{{autoplay}} = 自动(可暂停)
  • product-card-prompt v1.0.0
  • masonry-grid-prompt v1.0.0
  • mobile-tab-bar-prompt v1.0.0

生成顺序

先按版式生成页面骨架,再逐个引用上面的组件提示词生成各部件,最后统一令牌与间距。不要把组件提示词全文复制进本场景——引用 + 覆盖即可(规格 §5.1)。

(验证状态:待复验。本场景尚未经真实模型实测,验证字段如实留空。)