本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Supabase 官网首页 Figma 公开稿。打开即可对照版面结构、bento 卡片与组件层级。
Supabase 首页以近白画布、近黑无衬线字和少量绿色，组织一套面向开发者的产品叙事。顶栏先把绿色闪电标与小写 supabase 放在左侧，Product、Developers、Solutions、Pricing、Docs、Blog 形成平直的信息带；右侧的 GitHub 114K、Sign in 与实心绿色 Start your project 划出由旁观到行动的层级。首屏把「Build in a weekend」拆成黑字主句和绿色的「Scale to millions」，大字置左，右侧副文则快速串起 Postgres、Authentication、Data APIs、Edge Functions、Realtime、Storage、Vector。实心绿色 Start your project 与描边 Request a demo 并列，既留住自助使用者，也给采购型访问留出较缓的入口。
白底首屏、绿字 Scale to millions、双 CTA 与下方 Postgres/Auth/Functions 卡片
首屏下方的 bento 网格承担了证据展示。Postgres 大卡不使用实拍或炫目的三维主视觉，只用线框象、100% portable、Built-in Auth with RLS、Easy to extend 三组短信息建立数据库的轮廓；Authentication 卡把邮箱栈 UI 直接露出，Functions 卡以地球线框和 $ supabase functions deploy 命令把能力落回开发动作。下一行的 Storage、Realtime、Vector、Data APIs 继续按同一语法切分，其中 Vector 标出 OpenAI、Hugging Face，Data APIs 用表名通向 REST 的关系图压缩说明。收束句「Use one or all…」让卡片既能独立扫读，也被放回整合平台的语境。
产品 bento：大卡 Postgres 线框象、Auth 邮箱栈、Functions 部署命令与 Storage/Realtime/Vector/Data APIs
白底营销壳是此页有意识的取舍。绿色没有铺满背景，也没有接管每一张卡片，只用于行动按钮、选中状态和标题的半行点亮；信息可信度交给细灰边框、线框插图、仪表盘窗口与代码卡。其后接入灰阶品牌 logo 条，弱化了合作方之间的竞争关系，使视线自然进入产品操作层。卡片圆角、轻边框与克制留白反复出现，页面的信息密度不低，却始终保留类似文档页的呼吸。
Stay productive and manage your app without leaving the dashboard 一段把抽象能力改写为可操作的工作台。Table Editor、SQL Editor、RLS Policies 排成分段胶囊；下方产品窗聚焦「Create a new table under public」，Name、Description、Enable RLS 的 Recommended 标记、Enable Realtime 与 Columns 中的 id 主键按表单节奏展开。这里故意只呈现一个建表瞬间，并未把完整控制台塞进营销页面。访问者先理解操作颗粒度，复杂配置则留给后续探索。胶囊切换、RLS 复选状态和面板内容替换，也提供了轻量而明确的动效线索。
Stay productive 区 Table Editor 分段控件与 Create a new table 面板
「Use Supabase with React」进一步把开发者语言收进双栏：左边的 React、Next、Flutter、Svelte、Vue、Nuxt 以框架 Logo 标签排列，React 处于选中态；右边 createClient 与 todos 示例作为可读的代码证据，底部以 Read docs for React 接住深入阅读。框架标签适合做局部交换，代码卡的外框、行距和语法色则保持稳定。这种取舍避免让整页被动效主导，也使不同技术栈的访问者能快速找到对应入口。随后 Kickstart templates 用 Stripe Subscriptions Starter、Next.js Starter 两张大卡，配合 AI Chatbot、LangChain、Flutter、Expo 小卡，补齐从能力理解到项目起步的连续性。
Use Supabase with React 双栏：框架 Logo 标签与 createClient 代码卡
客户故事区刻意成为全页唯一高饱和断点。How industry leaders are building with Supabase 的标题之下，Lovable 卡从粉色过渡到橙色，引用与 Bryan Byrne 署名留在大面积色场中；右侧竖条品牌切换器把其他案例压成窄而清晰的入口。此前以白、灰、黑和绿色维持的秩序，到这里才允许色彩扩张，因此客户成果获得足够分量，又不反过来干扰产品演示。竖条切换同样暗示内容可轮换，色场和引语可随选择切入，形成页面后段较强的停留点。
客户故事区 Lovable 粉橙渐变大卡与右侧竖条品牌切换
整页的组件体系并不复杂：绿色主按钮、描边次按钮、分段胶囊、圆角边框卡、产品窗与语法高亮代码面板不断复用。Supabase 将品牌识别压缩为有限的颜色预算，再让 bento 线框、界面局部和代码示例回答「具体怎样使用」。这使首页在产品宽度很大的前提下，仍维持一条清楚的阅读路径：先看承诺，再看模块，随后看仪表盘、SDK、模板与真实客户。