App 三屏骨架(首页+列表+详情)
移动 App 最常见的三屏:底部标签栏框架 + 列表首页 + 内容详情。
iOSAndroid 安卓HarmonyOS 鸿蒙内容组织全屏整套流程 版本 v1.0.0 · 框架目标:html-css / tailwind / react 待复验
这条场景提示词引用的组件提示词
- 底部标签栏(移动端) · 提示词 v1.0.0
- 基础列表行 · 提示词 v1.0.0
- 详情页头图区 · 提示词 v1.0.0
- 基础卡片 · 提示词 v1.0.0
版式说明
全局框架:底部标签栏常驻 4 个入口。首页为列表(列表行 + 穿插卡片),点任意行进详情页:头图区在上、正文滚动、底部操作条吸底;返回保留列表滚动位置。
填空生成你的提示词
这条提示词没有参数表:直接复制全文,把文中的占位符换成你的内容。
验证信息
待复验:这条提示词还没有用真实模型跑过,上线前会逐条复验。
拼好的完整提示词
原始七段全文
场景说明
移动 App 最常见的三屏:底部标签栏框架 + 列表首页 + 内容详情。
版式说明
全局框架:底部标签栏常驻 4 个入口。首页为列表(列表行 + 穿插卡片),点任意行进详情页:头图区在上、正文滚动、底部操作条吸底;返回保留列表滚动位置。
引用的组件提示词
mobile-tab-bar-promptv1.0.0list-item-promptv1.0.0detail-hero-promptv1.0.0card-basic-promptv1.0.0
生成顺序
先按版式生成页面骨架,再逐个引用上面的组件提示词生成各部件,最后统一令牌与间距。不要把组件提示词全文复制进本场景——引用 + 覆盖即可(规格 §5.1)。
(验证状态:待复验。本场景尚未经真实模型实测,验证字段如实留空。)