ROUND 01
冷启动：一次把"气质"讲透
首轮 Prompt工具：TRAE · 目标：单文件 HTML 的移动端 H5 Demo（390×844）
我的 Prompt
# 任务
用单文件 HTML（内联 Tailwind CSS + 原生 JS，CDN 引入）实现一个可在浏览器直接打开、可点击交互的移动端 H5 Demo（视口 390×844）。
# 产品气质（最重要，先读）
- 不是音频列表 App，而是一座"线上人文展览"……
- 情绪关键词：安静、温柔、克制、落日、宣纸、墨色、旧信、栖居。
- 拒绝：高饱和色块、圆角大卡片、emoji、廉价渐变、Spotify 式播放条、营销感按钮。
- 推崇：大量留白、纵向呼吸感、宋体字、纸质感、缓慢的淡入动效、一次只让用户做一个动作。
# 设计系统
- 配色（严格使用）：页面底色 #F4EFE6 / 卡片底 #ECE5D8 / 主文字 #2B2520 / 次文字 #8C8275 / 强调色 #B8542E / 分隔线 #D8CFBF
- 字体：Noto Serif SC；字距放松，行距 1.8；圆角最多 4px；阴影极轻
……
# 输出要求
- 直接输出完整的 index.html 代码，不要解释，不要省略，不要用占位注释。
展开首轮 Prompt 全文（含三页结构与全局交互要求）
# 任务
用单文件 HTML（内联 Tailwind CSS + 原生 JS，CDN 引入）实现一个可在浏览器直接打开、可点击交互的移动端 H5 Demo（视口 390×844，iPhone 尺寸）。这是一个以「声音内容 + 书信阅读 + 人文展览」为核心的内容产品，名字叫「落霞来信」。
# 产品气质（最重要，先读）
- 不是音频列表 App，而是一座"线上人文展览"。用户进来要有走进美术馆/拆开一封旧信的仪式感，而不是刷信息流。
- 情绪关键词：安静、温柔、克制、落日、宣纸、墨色、旧信、栖居。
- 拒绝：高饱和色块、圆角大卡片、emoji、廉价渐变、Spotify 式播放条、营销感按钮。
- 推崇：大量留白、纵向呼吸感、宋体字、纸质感、缓慢的淡入动效、一次只让用户做一个动作。
# 设计系统
- 配色（严格使用）：
- 页面底色：#F4EFE6（宣纸米白）
- 卡片/分区底：#ECE5D8
- 主文字：#2B2520（墨色）
- 次文字：#8C8275（灰墨）
- 强调色（落霞橙）：#B8542E，仅用于 CTA、播放按钮、选中态，面积要小
- 分隔线：#D8CFBF
- 字体：中文标题用「Noto Serif SC / 思源宋体」，正文用「Noto Serif SC」或 system-ui；数字与英文用 Georgia / serif。字距放松，行距 1.8。
- 圆角：全局几乎直角，最多 4px；不要大圆角卡片。
- 阴影：极轻或无，靠底色分层。
# 页面一：首页（默认落地页）
1. 顶部状态栏样式（9:41 + 信号图标，用 CSS 画即可）。
2. 导航行：左侧「今日特展 ⌄」（可点击展开下拉"展览时间：8.31 – 9.6"，柔和淡入），右侧一个小日历图标。
3. Hero 氛围区：占屏约 45%，一张"落霞/黄昏窗景"背景图，加一层 #2B2520 透明度 35% 的蒙层。图上不压大字。
4. 下方信息区（宣纸底、居中、大量留白）：栏目名「落霞来信」、副文案「接下来 7 天，你会收到 7 封不同的信。这是寄给你的第 1 封。」、三个 tab「落霞来信/古典/流行」、主 CTA「开始读信 →」。
5. 迷你播放条（固定在底部 Tab 上方）：小方形封面 + 「收到信的时候，他已经走了很远」+ 列表图标。
6. 底部 Tab Bar（5 个）：声画廊、声剧场、乐厅、声景、我的，图标用极简线性 SVG。
# 页面二：本期内容 / 音频详情页
1. 顶部返回箭头 ←；2. Hero 氛围图（约 220px）；3. 开场段 + 「展开全部 ⌄」；4. 小标题「本期内容」；5. 16:9 播放卡片 + 假进度条；6. 小标题「书信专区」；7. 横幅卡片「立即阅读 →」；8. 小标题「更多推荐」+ 4 条推荐列表。
# 页面三：信件阅读页（核心仪式感页面，重点打磨）
整页背景 #EDE6D6；顶部极简关闭 ×；内容最大宽度 320px；顶部小字、大标题、落款、4–5 段正文；段落 stagger 120ms 淡入上移；底部小播放控件；底部「下一封信 →」。
# 全局交互要求
- 用一个简单的 JS view 切换系统：首页 / 详情页 / 阅读页，三个 section，切换时整体淡入淡出 300ms。
- 所有可点元素要有 hover 态；Hero 图进入时做一次 1.2s 的 Ken Burns 缓慢放大。
- 不要出现任何真实音频文件，全部用 setInterval 模拟进度。
- 不要用框架路由，不要构建工具，单个 index.html 双击即可打开。
# 输出要求
- 直接输出完整的 index.html 代码，不要解释，不要省略，不要用占位注释。
- 代码里所有文案用中文，题目给定文案原样保留，自己补写的部分也要保持同样的温柔克制语气。
- 写完后告诉我怎么在浏览器打开即可。
AI 给了什么（首轮产出）
一次性产出单文件 index.html：首页、详情页、阅读页三个 <section class="view">，用 JS 切换；CSS 变量落地了纸色/墨色/落霞橙；Hero 用了落日氛围图 + 蒙层；详情页有假播放进度；阅读页有段落 stagger 淡入。
首轮产出可打开、可切换，气质方向正确，但结构上把 mini-player 与 tabbar 写在了首页 #view-home 内部——这个隐患在第 3 轮才爆出来。
我为什么这么问
冷启动阶段，AI 会先入为主地把"内容产品"做成音频列表 App。所以我把 产品气质放在最前面标注"最重要，先读"，并用"拒绝 / 推崇"两组对照句锁定审美边界。
颜色、字体、圆角、动效全部写死成具体值，让它只引用、不发明；三个页面按"从上到下"逐条列出区块与交互，把模糊的"好看"翻译成可执行的清单。
AI 哪里没达到
- 产出的页面是"静态可看"而非"可交互闭环"：进度条、展开、toast 都是占位，需要后续逐轮补齐。
- 结构分层意识弱：底部播放条与导航栏被塞进首页视图内部，属于把组件塞进了页面，为第 3 轮的翻车埋下伏笔。
我怎么纠的
先验收：直接双击打开跑起来，确认三页能切换、气质对。再把问题拆成一个个可控的小任务窗口逐个修——一次只推动一类改动，改完立即验收，绝不"攒一批再改"。
