Zeabur — Xin An

Zeabur（发音 /ˈziːˌbər/）是一个 PaaS 平台，帮助开发者一键部署前端、后端与数据库，不限语言和框架。团队 3 到 6 人。我在这里负责设计系统、控制台与官网的 UX/UI、品牌视觉资产，并逐步承担前端交付。

我在 Zeabur 的一年，按工作方式可以分成三段。入职后的前四个月，我在 Figma 里设计，由前端实现。接下来的三个月，我开始进入 dashboard 代码库，在实现完成后直接修正样式和层级，而不是回到 Figma 重新标注。年底之后，色板变量、主题开关、基础组件和落地页由我直接提交代码。到离职时，我在 dashboard 仓库提交了约 250 次，在官网仓库提交了 80 次。

控制台改版

控制台是用户最常打开的界面。我接手时，首页只能看到有几个项目、每个项目有几个服务，看不出项目在哪个区域、运行是否正常、大概会产生多少费用。"新建项目"是栅格末尾的一张卡片，项目一多就被推到页面底部。项目详情装在一个大弹窗里，内容再增加就放不下。

改版的方法是把一个项目的所有信息都拿出来，再一个个删去，只保留用户最需要在首页看到的。最后留下三项：服务器区域、费用估算、运行状态。首页从项目列表变成状态概览，不进详情页也能判断哪个项目在运行、哪个异常、哪个在产生费用。新建项目入口从内容流里抽出来，放到不受项目数量影响的位置。项目详情这一轮只做了一件事：从弹窗改成完整页面。

这一版我负责设计，前端负责开发。开发完成后，我进入代码库做视觉走查和样式修正。这是我第一次在 Zeabur 直接改前端代码。

到了年底，团队开始第二轮改版。新的整体布局由前端主导，项目详情从上下手风琴改为顶部 tab 切换，服务与设置改为网格排布。我负责样式、HeaderBar 和项目侧栏，并在这个过程中补了 Button、Menu、Listbox 等基础组件。

首页上线后在 Discord 社区得到正向反馈。

设计系统与浅色模式

Zeabur 原有的色板只服务暗色模式：整体偏紫，卡片边界、文字层级和状态色的对比度不稳定，页面里的颜色大多以 Tailwind class 直接写死。浅色模式是用户反复提出的诉求。由我发起并负责了这件事。

我以 OKLCH 色彩空间重新建立了色板，代码里输出为 RGB 三元组，以配合 Tailwind 的透明度语法。灰、紫、橙红三组色板各 15 阶，其中 150、250、750、850 是在标准色阶之间插入的半阶。灰阶在界面里承担的层级最多，需要更细的间隔。OKLCH 的 L 通道接近人眼感知，插入新色阶时只需调整 L 值，新颜色就能落入原有序列。

命名上，文字颜色使用语义名 main、secondary、tertiary，因为文字 token 语义化之后在页面里更好用。背景和边框各定义了少量语义变量。其余场景直接使用原始色阶，避免语义层在早期产品里不断膨胀。

组件库基于 HeadlessUI、Tailwind 与 React，结构参考 shadcn/ui，但只做 Button、Input、Menu、Listbox、Modal、Tooltip 等基础组件，不抽业务组件。功能尚未稳定时，ServiceCard 一类的封装很快会过时。

迁移采取渐进方式。旧色板保留并标记为 old color。先上线主题开关，随后逐页把写死的暗色样式替换为变量。同期 dashboard 的 Modal、Listbox、Combobox 从 HeadlessUI v1 迁到 v2，新组件统一读取 token。两个月后浅色模式正式发布，暗色模式的对比度与层级也一并修正。

到我离职时，dashboard 里 107 个文件使用新色阶，140 个文件使用语义文字 token，仍有 32 个文件保留旧色板。之后其他同学新写的页面直接使用了新 token。

Zeabur 浅色模式更新日志

落地页

落地页改版有两个背景。旧页面的视觉已经落后于产品阶段，自有服务器、共享集群、托管 VPS 等新能力也没有地方承载。同时，创始人决定把目标用户从专业开发者扩展到 AI coding 用户。我提出用落地页来承接这次转向，并负责了整个页面。

面向新用户的部分，是首屏下方的 Cursor、Copilot、大语言模型三张卡片，以及可以直接拖拽项目文件夹部署的卡片。PaaS 的卖点高度同质，"一键部署""按量计费""全栈支持"几乎是行业默认文案。所以在"你唯一需要的部署平台"一节，我让动效直接承担信息：git push 到框架识别的状态轮播，对应自动分析代码；十余个框架与数据库图标的列表，对应所有服务聚合一处；价格图表在 hover 时变化，对应用多少付多少。动效用 Framer Motion 与原生 CSS 实现。

自有服务器与共享集群两个区块使用线框等轴的插画，与错误页、空状态是同一套语言。

我先完成 Figma 稿并公开了预览，进入开发后用两个月完成页面、动效和五种语言的文案，独立交付上线。