App 列表页和详情页设计提示词（Codex）

设计带搜索框和筛选标签的列表页，以及点进去的详情页，分成两个文件，书名和数字都用真实可信的内容。

提示词

设计 [书库] 列表页和 [图书] 详情页，各做成一个文件。列表页展示 [12 本书]，每本显示封面、书名、作者和进度，另外加一个搜索框，以及 [在读、已读完、想读] 筛选标签。详情页从列表项点进来，展示 [阅读历史和笔记]。书名和数字都要用真实可信的内容。

这条提示词能做什么

Codex 会把两个相互关联的页面分别做成文件：一个列出 12 本书的列表页，每项有封面、书名、作者和进度，顶部是搜索框和筛选标签；另一个是点击列表项后打开的详情页。两个页面一起设计，同一个条目在列表和详情里的样子才能保持一致。

把方括号换成你 App 里的列表和详情组合：商品和商品页、任务和任务详情、菜谱和菜谱页都可以。条目数量按真实用户的情况来填，筛选标签写你实际会有的状态。结尾那句「用真实可信的内容」比看上去重要：一个很长的书名，再加上进度 3% 和 100% 的书放在一起，才看得出列表行的布局撑不撑得住。

做完后检查从列表点进详情是否连贯：两个文件里的封面、书名样式和进度的表现方式应该一致。这一步的 [书库] 页面也是后面空状态、加载和错误状态提示词的基础，所以先把正常状态做好。