首页版式方案
一句话：现在首页十节里，有六节是同一个模子——上面一个标题块，下面一排细线框的等宽方格卡，再加一排按钮；而且十节里九节底色一样、宽度一样，所以滑下去分不清哪节是哪节。这份方案先把整页的顺序和每节的任务定下来，再给每一节画 4 个骨架不同的版式，一节一页，可以一节一节批注、一节一节定。
基准 = 首页预览分支 首页预览版（09-14 那一版，分支 claude/homepage-picks-2026-09-13，版本号 8597c24）（home-preview.yummyfuture.us 那一版）。本方案只出稿，不改线上页面，也不改那条预览分支；Jack 选定某一节后，交给正在维护首页预览版的那条 Claude 工作会话去改。
1 · 重复在哪：每节的版式骨架
把每节「长什么样」拆成五件事：骨架、底色、宽度、标题摆法、是不是等宽方格卡。标红的行 = 跟别的节是同一个模子。
| # | 节 | 现在长什么样（从上到下） | 底色 | 宽度 | 标题 | 跟谁一个模子 |
|---|---|---|---|---|---|---|
| 1 | 第一屏 | 满版视频压字；大标题左下；数字和按钮挤在最底一排。全页唯一不一样的一节。 | 满版照片/视频 | 满版贴边 | 标题压在图上 | —（全页唯一不一样的一节） |
| 2 | 饮品 | 标题块 → 导语 → 5×2 等宽方格卡 → 6 格照片条 → 一句话 → 两个按钮。 | 纸色 | 常规宽 | 标题左上 | proof · voices · locations · units · channel |
| 3 | 成绩 | 大标题块 → 4 格年份条 → 3 格大数字 → 评分条 → 按钮，全是细线方格。 | 纸色 | 常规宽 | 标题左上 | drinks · voices（紧挨着）· locations · units · channel |
| 4 | 顾客评价 | 小号标题块 → 导语 → 4 格等宽引语卡 → 一排按钮。跟上一节、下一节几乎同一个模子。 | 纸色 | 常规宽 | 标题左上 | proof（紧挨着）· 同时跟 press 都是「小标题＋导语＋一排卡」 |
| 5 | 媒体报道 | 小号标题块 → 导语 → 自动滚动的报道卡片带 → 反向滚动的标志带。 | 纸色 | 常规宽 | 标题左上 | voices（小标题＋导语＋一排卡，只是会滚） |
| 6 | 门店 | 标题块 → 地图格 + 3 格等宽门店卡（细线方格）→ 按钮。 | 纸色 | 常规宽 | 标题左上 | units（紧挨着）· drinks · proof · voices · channel |
| 7 | 三款设备 | 大标题块 → 3 格等宽产品卡（图上字下，规格 2×2 小方格）。 | 纸色 | 常规宽 | 标题左上 | locations（紧挨着）· drinks · proof · voices · channel |
| 8 | 软件 | 标题块 → 左边一句话＋按钮、右边带阴影的视频框（框里 3×2 模块方格）。左边大片空白。 | 纸色 | 常规宽 | 标题左上 | how（紧挨着，都是左右对半） |
| 9 | 出杯流程 | 标题块 → 左视频、右 4 行步骤（细线框）。跟上一节「软件」都是左右对半，还挨着。 | 纸色 | 常规宽 | 标题左上 | software（紧挨着，都是左右对半） |
| 10 | App 与团购 | 小号标题块 → 两格对半卡（左深棕 App 卡带手机图、右白色礼品卡）。 | 纸色 | 常规宽 | 标题左上 | drinks · proof · voices · locations · units |
重复最多的三处
- 六节是「一排等宽方格卡」：饮品、成绩、顾客评价、门店、三款设备、App 与团购——都是细线框、格子一样宽，只是格子里装的东西不同。
- 九节开头是同一个标题块：左上一行小字眉标 → 大标题 → 右边一行等宽小字旁注 → 一根细线。只有字号分三档，结构完全一样。
- 整页只有一种底色、一种宽度：除了第一屏的视频，九节全是纸色、全是同样宽，节和节之间没有任何「换场」。紧挨着的双胞胎有三对：成绩→顾客评价、门店→三款设备、软件→出杯流程。
把现状拿去跑下面第 3 部分的节奏规则：红 30 条（R1 违反 4 次，R2 违反 8 次，R4 违反 7 次，R5 违反 7 次，R6 违反 4 次）
展开看每一条
- R1 饮品 和 成绩 都是「一排等宽方格卡」
- R2 饮品 和 成绩 底色都是「纸色」
- R6 饮品 和 成绩 都是等宽方格卡，还挨着
- R1 成绩 和 顾客评价 都是「一排等宽方格卡」
- R2 成绩 和 顾客评价 底色都是「纸色」
- R6 成绩 和 顾客评价 都是等宽方格卡，还挨着
- R4 饮品 / 成绩 / 顾客评价 连着三节都是「常规宽」
- R5 饮品 / 成绩 / 顾客评价 连着三节都是「标题左上」
- R2 顾客评价 和 媒体报道 底色都是「纸色」
- R4 成绩 / 顾客评价 / 媒体报道 连着三节都是「常规宽」
- R5 成绩 / 顾客评价 / 媒体报道 连着三节都是「标题左上」
- R2 媒体报道 和 门店 底色都是「纸色」
- R4 顾客评价 / 媒体报道 / 门店 连着三节都是「常规宽」
- R5 顾客评价 / 媒体报道 / 门店 连着三节都是「标题左上」
- R1 门店 和 三款设备 都是「一排等宽方格卡」
- R2 门店 和 三款设备 底色都是「纸色」
- R6 门店 和 三款设备 都是等宽方格卡，还挨着
- R4 媒体报道 / 门店 / 三款设备 连着三节都是「常规宽」
- R5 媒体报道 / 门店 / 三款设备 连着三节都是「标题左上」
- R2 三款设备 和 软件 底色都是「纸色」
- R4 门店 / 三款设备 / 软件 连着三节都是「常规宽」
- R5 门店 / 三款设备 / 软件 连着三节都是「标题左上」
- R1 软件 和 出杯流程 都是「左右对半」
- R2 软件 和 出杯流程 底色都是「纸色」
- R4 三款设备 / 软件 / 出杯流程 连着三节都是「常规宽」
- R5 三款设备 / 软件 / 出杯流程 连着三节都是「标题左上」
- R2 出杯流程 和 App 与团购 底色都是「纸色」
- R4 软件 / 出杯流程 / App 与团购 连着三节都是「常规宽」
- R5 软件 / 出杯流程 / App 与团购 连着三节都是「标题左上」
- R6 全页有 6 节是等宽方格卡（最多 2 节）
2 · 整页结构：顺序、每节的任务、内容
先定「每节要让访客知道什么、做什么」，版式才有标准可比。下表是现在的顺序，内容大纲的全文在每节自己的页面里。
| # | 节 | 看完应该知道 | 看完应该去做 | 推荐版式 |
|---|---|---|---|---|
| 1 | 第一屏 | 这不是概念机：机器人咖啡吧 2019 年就在真门店卖咖啡，有名字响亮的投资方。 | 点「Invest」去 Wefunder，或点「Partner with us」开买机器的表，或往下看机器人。 | 保持现状 |
| 2 | 饮品 | 一台机器做全套咖啡馆菜单：意式、抹茶、冷萃、果茶都能出，而且杯子是真店里做出来的。 | 点「See the full menu」看门店菜单，或点「Explore Max」看做这些饮品的机器。 | 方案 B · 一大几小拼贴：一张门店实拍当主角，饮品照片围着它 |
| 3 | 成绩 | 这是一门已经在赚钱的生意，不是试点：2018 年起步，现在三家店，卖出 24 万多杯。 | 点「Visit our stores」去门店页。 | 方案 B · 一句大话＋一行数字，反色深底 |
| 4 | 顾客评价 | 说好话的是真实顾客，不是我们自己写的，每句都能点开看原文。 | 点任意一句去 Yelp / Google 看原评价。 | 方案 C · 左边一个大评分，右边引语一行一条 |
| 5 | 媒体报道 | 从 2019 年起，本地和湾区的媒体一直在报道我们，而且从没花钱买过版面。 | 点任意一篇报道去原文。 | 方案 B · 报刊目录：年份 · 媒体 · 标题，一行一篇，窄栏 |
| 6 | 门店 | 三家店在哪、现在开不开，可以直接去。 | 点「Store page / Directions / Book event」，或「View all locations」。 | 方案 A · 满版地图带，门店卡浮在地图上 |
| 7 | 三款设备 | 有三种尺寸的机器：台面放的 Bar、独立站的 Kiosk、多工位的 Max，各适合什么场地。 | 点「Request quote」开买机器的表（带着产品名）。 | 方案 A · 页签切换：一次只讲一台，大照片＋介绍 |
| 8 | 软件 | 机器靠自家软件管着：点单收银、库存、监控、设备自检、排班、会员，一套全包。 | 点「Explore Software」看软件页，或「Book a demo」约演示。 | 方案 D · 居中窄栏：一句话＋一段小视频＋两个按钮 |
| 9 | 出杯流程 | 亲眼看机械臂怎么做一杯：接单 → 磨粉称重 → 萃取 → 出杯。 | 看视频（滚到就自动播）；第一屏「See the robot」按钮会跳到这里。 | 方案 A · 满版视频，四个步骤压在底边一排 |
| 10 | App 与团购 | 可以用 App 提前点单到店取；公司也能批量买礼品卡或订团餐。 | 下载 App（App Store / Google Play），或点「Buy gift」「Catering / Corporate」。 | 方案 A · 手机大图＋App 一句话，礼品团餐降成底下一行 |
结构上的建议（都是建议，待 Jack 定；不定就按现在的顺序）
- 把「出杯流程」提到「饮品」后面。第一屏的「See the robot」按钮跳到这一节，现在它在倒数第二，点完要滑过七节才看到机器人。第一屏主打机器人可信度，机器人应该早点出场。
- 「顾客评价」和「媒体报道」合成一节「别人怎么说」。评价那节 4 句里有 2 句本来就是媒体原话，两节内容在打架；合并后全页少一节。
- 同一个数只说一次。「240,000+ 杯」「3 家店」在顶上状态栏、成绩、门店三处重复；建议只留在成绩一节。
- 先把几处内容冲突定掉，再上新版式（详细在各节页面的红框里）：饮品 24 款还是 150+ 款；出杯 38 秒还是 135 秒；三款设备卡里没出处的产能数字删还是补；媒体卡里带融资金额的那篇拿掉；「Buy gift」按钮去哪。
如果 Jack 同意第 1 条挪顺序，推荐组合要换两节的方案才能继续守住节奏规则——已经配好一套，见第 4 部分「建议顺序」，同样跑过测试：全绿
3 · 节奏规则：相邻两节怎么拉开
每节用五个标签描述（骨架 / 底色 / 宽度 / 标题摆法 / 是否等宽方格卡），整页从上到下逐节对照下面七条。七条都是能用程序查的，测试脚本 tools/homepage-layouts/test.cjs 每次都跑，违反任何一条就报红。
- R1 · 相邻两节，骨架不能一样
- R2 · 相邻两节，底色不能一样
- R3 · 两节暗底（反色深底或满版照片/视频）不能挨着
- R4 · 不能连着三节一样宽
- R5 · 标题摆法不能连着三节一样
- R6 · 「一排等宽方格卡」全页最多 2 节，而且不能挨着
- R7 · 暗底节全页最多 3 节
底色只有四档：纸色、深一档纸色、反色深底、满版照片/视频。深色主题下纸色两档都变深、反色深底变成浅纸色，所以「相邻不同底色」在两种主题下都成立。每个方案页右上角可以切浅色 / 深色看。
4 · 推荐组合（每节一个方案，相邻不重复）
推荐组合跑节奏规则：7 条全绿
| # | 节 | 推荐 | 骨架 | 底色 | 宽度 | 标题 |
|---|---|---|---|---|---|---|
| 1 | 第一屏 | 保持现状 | 满版照片/视频压字 | 满版照片/视频 | 满版贴边 | 标题压在图上 |
| 2 | 饮品 | 方案 B · 一大几小拼贴：一张门店实拍当主角，饮品照片围着它 | 一大几小拼贴 | 纸色 | 常规宽 | 标题左上 |
| 3 | 成绩 | 方案 B · 一句大话＋一行数字，反色深底 | 一句大话＋数字条 | 反色深底 | 满版贴边 | 标题居中 |
| 4 | 顾客评价 | 方案 C · 左边一个大评分，右边引语一行一条 | 左右对半 | 深一档纸色 | 常规宽 | 标题在侧栏 |
| 5 | 媒体报道 | 方案 B · 报刊目录：年份 · 媒体 · 标题，一行一篇，窄栏 | 竖排清单 | 纸色 | 窄栏 | 标题左上 |
| 6 | 门店 | 方案 A · 满版地图带，门店卡浮在地图上 | 地图为主 | 深一档纸色 | 满版贴边 | 标题压在图上 |
| 7 | 三款设备 | 方案 A · 页签切换：一次只讲一台，大照片＋介绍 | 页签切换 | 纸色 | 常规宽 | 标题左上 |
| 8 | 软件 | 方案 D · 居中窄栏：一句话＋一段小视频＋两个按钮 | 居中窄栏 | 深一档纸色 | 窄栏 | 标题居中 |
| 9 | 出杯流程 | 方案 A · 满版视频，四个步骤压在底边一排 | 满版照片/视频压字 | 满版照片/视频 | 满版贴边 | 标题压在图上 |
| 10 | App 与团购 | 方案 A · 手机大图＋App 一句话，礼品团餐降成底下一行 | 左右对半 | 纸色 | 常规宽 | 标题左上 |
自己搭一套试试
每节下拉选一个方案，下面马上告诉你有没有违反节奏规则。选好想要的组合，可以在这里批注写下来。
5 · 各节页面（一节一页，分开批注）
批注：点右上角「✎ 批注」或打开本机地址（带 ?annotate=1），批注存在 Jack 这台 Mac 的 :8010 台账里，每节一个 topic（homepage-layouts-<节>）。公网地址 https://homepage-layouts.yummyfuture.us/ 适合转给别人看，批注以本机为准。