eat-today · lofi-scenes · 终审画廊
五个饭点,五张 Chillhop 场景,真机合成
背景从"几何剪纸"换成了 lofi 板绘底图:AI 生成的五张插画铺在页面底层,标题、餐盘、按钮浮在画上。下面每张截图都是真实构建 + 手机视口(390×844)跑出来的,不是设计稿拼贴。
2026-07-14 · branch experiment/universal-food-picker-ui · Phase A 基建已合入,本页为接图前终审
一眼看数字
1 批待删
旧 SVG 几何件等 Phase C 退役
扁平插画压缩率极高:最大的一张(晚餐)也只有 25KB。图片体积这条线可以从担心清单里划掉了。
五幕画廊
breakfast · 早饭
清晨的早点摊
- 成立:摊子、蒸笼、蒸汽、摊前小背影都透出来了,太阳从摊后升起。
- 摊子压在左侧,正好躲开中间的餐盘——构图和 UI 没打架。
- 待删:顶上那串旧 SVG 三角旗还叠在按钮附近,Phase C 清掉。
lunch · 午饭
纯天空 + 风筝
- 成立:天台方案否掉后改的"抬头看天"——大太阳在左,风筝在盘右侧的空档里,线一直拖到筛选卡后面,很灵。
- 五张里唯一没有地面的一张,通透感就是它的辨识度。
- 待删:右上角还有一颗旧 SVG 太阳在自转,现在画面里有两个太阳。
tea · 下午茶
沉进云海的落日(风格锚)
- 成立:整套风格就是从这张定下来的。紫到橙的天色、电线杆、云堤半沉的落日,都在。
- 太阳左移后从餐盘左侧探出来,没被挡。
- 唯一待决定:栏杆边的小人还在画面中带,被餐盘完全挡住。要么按之前给的增量 prompt 把小人移到 80% 位置,要么就接受"看不见"。
- 待删:右上角旧的紫色树冠圆块和第二颗落日光晕。
dinner · 晚饭
暮色都市,亮灯的窗
- 成立,五张里最成熟:亮窗楼群 + 地平线橙光 + 两块小霓虹,楼从餐盘两侧穿过去,城市味道全出来了。
- 顶部深蓝天空留白,后面叠星星闪烁和流星动效正好。
- 小瑕疵:那句"一天结束了"正好压在青色霓虹上,读起来有点费劲。接图时把画往下挪 2-3% 或把霓虹调暗一档就好。
- 待删:旧 SVG 月牙和旧楼群还叠在画上。
midnight · 宵夜
屋里的深夜:月亮、暖灯、猫
- 成立,氛围最大的一次翻身:从"看别人家窗户"改成"自己屋里"——窗外满月,屋里暖灯,桌上热汤面,猫在灯下睡。陪伴感有了。
- 窗外的暗夜天空正好托住暖白标题,画里的灯光把右下角整个焐热了。
- 待删:右上角还有一颗旧 SVG 月亮(现在有两个月亮),旧屋脊线、盘边的旧 SVG 小黑猫也该退休了——画里那只质感好得多。
接图前还剩什么
| 事项 | 谁来做 | 说明 |
| tea 小人 |
你(生图) |
二选一:按增量 prompt 把小人移到 80% 位置重出一版;或接受小人藏在盘后。其余四张不用动。 |
| Phase C 接图 + 退役 |
codex |
五张 WebP 进 /public/scenes/,同步删掉每幕的旧 SVG 几何件(双太阳、双月亮、旧旗串、旧楼群、旧树冠、盘边 SVG 猫)。方案文档 §三§四 有逐项清单。 |
| 动效薄层对位 |
codex |
炊烟对准早餐蒸笼位、Zzz 和热气对准夜宵画里的猫和碗、月晕对准窗外月亮、流星和星星留在晚餐上空。 |
| dinner 文案压霓虹 |
codex |
底图下移 2-3% 或霓虹减淡一档,让那句话离开青色招牌。 |
截图里所有"两个太阳、两个月亮"都不是图的问题——是旧几何场景还没删,和新画叠着渲染。Phase C 一刀下去就干净了。
这一轮走到哪了
- 几何剪纸方案到了天花板,换成"画负责质感、CSS 负责活"的板绘方案——五张图共 83KB,渐变兜底保证图挂了页面也不破相。
- 五张画全部由 nano banana pro 生成,tea 定风格,其余四张挂它做参考,一套下来风格没有散。
- 午餐和夜宵各重画过一次:天台改纯天空,外景改室内猫——两次返工都值。
- 接下来就是 codex 的 Phase C,做完再截一轮五时段图做最终回归。