结构:白到极浅绿的底。顶栏是闪电标志加字标、五组导航、GitHub 星数徽标(114.9K)、Sign in、绿色 Start your project。首屏上半左右分栏:左边两行大字「Build in a weekend / Scale to millions」,第二行用产品绿;右边一小段灰字列出能力清单(Postgres、Auth、Data APIs、Edge Functions、Realtime、Storage、Vector embeddings);下面两颗按钮。下半是主视觉:一张 Bento 网格,第一行三张卡——Postgres Database(配一个线描的大象)、Authentication(配一组被虚化的邮箱输入框,其中一个写着具体的人名)、Edge Functions(配代码加一张雷达状连线图),每张卡都有两到四条带对勾的短句;第二行露出 Storage / Realtime / Vector / Data APIs 四张。
手法:Bento 的排法是能力清单的可视化,不是随便拼图。第一行三张卡对应最基础的三件事(数据库、认证、函数),卡片宽度不同:数据库卡最宽,因为它最底层。每张卡都塞了一个具体的小证据——认证卡里是真的邮箱输入框和真的人名,函数卡里是一行真的 CLI 命令 supabase functions deploy。这些细节让「我们支持」变成「你看它长这样」。第二手是绿色的用法:只出现在一个词和一颗按钮上,其余全是黑白灰,所以整页干净而不是「科技绿」泛滥。
为什么成立:开发者工具的首屏面对的是「我要不要花一个周末试一下」这个决策。标题直接给出这个决策的两个端点(一个周末、千万级),Bento 给出七条具体能力,剩下的就是让按钮足够显眼。
不该照搬:Bento 一旦卡片内容不够实,就会退化成一排空白圆角矩形——成败全在每张卡里那点具体细节。七张卡在小屏上会退化成单列长列表,Bento「一眼看全」的价值随之消失。