企业官网建设流程全解析

• 人工智能
• AI Agent
• 大模型
• AI 应用
• 媒体生成

Supabase 的设计语言是"跑在终端里的开发者的审美"——深炭黑表面、翡翠绿点缀、等宽代码块成为一等公民内容。本文以 xiaobei 仓库内置的 Supabase 设计系统规范 为骨架，完整拆解其视觉主题、色彩令牌、排版体系、组件样式与响应式策略，并结合仓库内design-full技能的工作流与源码，说明这套规范如何被真正落地为可执行的网页/落地页设计产出。读完你可以直接照规范写出"Supabase 味道"的暗色开发者工具页面，也能理解它在 xiaobei 内容生产流水线中的选用机制。

0. 这套文档在仓库里的位置：design-full 技能的内置设计系统库

在 xiaobei 仓库中，crews/content-producer是专业内容制作者 Crew，负责视频与平面设计两大方向。其中平面设计全案走design-full技能，其内置了 14 套知名品牌设计系统（Stripe、Vercel、Linear、Notion、Apple、Supabase、Shopify、Figma、Spotify、Tesla、Framer、Airbnb、BMW、IBM、Starbucks），每套规范都遵循统一的8 段结构：

1. Visual Theme & Atmosphere（视觉主题与氛围）
2. Color Palette & Roles（色彩体系与角色）
3. Typography Rules（排版规则）
4. Component Stylings（组件样式）
5. Layout Principles（布局原则）
6. Depth & Elevation（深度与层级）
7. Do's and Don'ts（设计护栏）
8. Responsive Behavior（响应式行为）

Supabase 规范文件即 supabase.md，它在索引 index.json 中的元数据为：

{ "id": "supabase", "name": "Supabase", "category": "devtools", "keywords": ["暗色", "翡翠绿", "代码优先", "数据库", "开发者"], "description": "暗色翡翠绿主题 + 代码优先美学 + 开发者友好", "colorPrimary": "#3ECF8E", "darkMode": true, "bestFor": "数据库/后端即服务、开源开发者工具", "file": "supabase.md" }

也就是说，这套设计系统的定位是devtools（开发者工具）品类，最适合数据库/后端即服务产品、开源开发者工具。在 xiaobei 的应用语境下，凡是给开发者工具、技术产品做官网、落地页、管理后台、SaaS 面板，design-full pick都极可能把它匹配为候选方案。

1. 视觉主题与氛围：终端里的翡翠绿

Supabase 的视觉语言服务的是"活在终端和编辑器里的开发者"。整套设计的底层气质借用 IDE 深色模式：深炭黑背景、语法高亮式点缀、等宽代码块作为一等内容。

• 氛围关键词：developer-tooling（开发者工具）、terminal-dark（终端暗色）、documentation-grade（文档级质感）、surgical precision（外科手术式精确）、open-source credibility（开源可信度）。
• 主模式：深色。仪表盘存在浅色模式但为次要，本设计系统默认深色。
• 标志性时刻（Signature Moments）：
  • 带绿色辉光的代码块，语法 token 颜色与品牌色板呼应；
  • $ supabaseCLI 提示符被织入营销页面；
  • 行高仅 28px 的高密度数据表格，像电子表格而不是营销站；
  • 状态变化时出现微妙的绿色rgba(62, 207, 142, 0.1)闪光。

这套审美的本质是：让"数据库正在运行"这个事实可视化——翡翠绿#3ECF8E在克制的暗色底上提示"active / live / connected"，仿佛一个正在运行的 Postgres 实例的心跳灯。

2. 色彩体系与角色

2.1 品牌色（Brand）

注意品牌色阶的构建逻辑：以#3ECF8E为锚点，向上（brand-accent、brand-600）用于交互反馈，向下（brand-500～brand-200）用于把绿色"压暗"成表面色，从而在暗色 UI 里既保留品牌识别、又不喧宾夺主。这与 7.1 节"绿色只是点缀色、不是填充色"的护栏互为表里。

2.2 灰色阶（Dark Mode 核心中性色）

这套 12 级灰阶是 Supabase 暗色 UI 的"骨架"，从背景到文字有 6 个明确的表面层级、4 个前景层级、2 个边框层级。关键纪律：正文主色不是纯白#FFFFFF，而是#ECECEC——纯白在暗色上的对比度过强。

2.3 冷色调中性色（Slate 备选轨道）

灰阶（gray）与冷灰（slate）是两条互斥的中性轨道，规范明确禁止在同一视图中混用（见 7.2 节"Don't"）。选择依据是品牌气质：gray 更中性百搭，slate 带一点蓝冷感、更"科技"。

2.4 语义色（Semantic Colors）

语义色遵循与品牌色相同的策略：每个语义色都配了"深色表面专用"的哑光版本（如destructive-muted #7E2215），确保在暗色背景上可读且不刺眼。

2.5 代码语法 Token（深色）

这是整套系统最具辨识度的部分：代码高亮的"常量/函数"色直接复用品牌绿#3ECF8E，让代码块在视觉上成为品牌的一部分。关键字用紫#BDA4FF、字符串用暖橙#FFCDA1，形成"绿+紫+橙"的语法调色板，近似现代 IDE 深色主题的观感。

3. 排版规则

3.1 字体栈

规范明确说明：Supabase 实际使用通过@font-face加载的专有字体（400 Book 与 500 Medium 两个字重）。复刻建议：正文用最接近的开源替代 Inter，代码用 JetBrains Mono 或 Fira Code。

3.2 字号阶梯（Type Scale）

注意两个细节：展示级字号用了clamp()流式缩放（随视口 5vw 浮动、封顶 4.5rem），保证从手机到超宽屏的 Hero 比例一致；全部层级只用 400/500 两个字重，维持克制的技术感。

3.3 排版纪律

• 正文强调禁用斜体，用字重 500 代替；
• 等宽字体仅用于代码、CLI 命令、API 路径、数据库标识符；
• 代码块背景（#1C1C1C）比页面背景更深一档；
• 标题从不加 letter-spacing；小字号正文最多用0.01em；
• 超过两行的段落禁止居中。

4. 组件样式

4.1 按钮

Primary Button（主按钮） bg: #3ECF8E text: #1C1C1C border-radius: 6px padding: 8px 16px font-weight: 500 font-size: 14px hover: bg #34B97D active: bg #2DA06D, translateY(1px) disabled: bg #2D2D2D, text #6F6F6F Secondary Button（次按钮） bg: #2D2D2D text: #ECECEC border: 1px solid #343434 border-radius: 6px padding: 8px 16px font-weight: 400 hover: bg #343434, border-color #3D3D3D active: bg #3D3D3D disabled: bg #222222, text #6F6F6F, border-color #282828 Ghost Button（幽灵按钮） bg: transparent text: #9F9F9F border: none padding: 8px 12px hover: text #ECECEC, bg rgba(255,255,255,0.05) active: bg rgba(255,255,255,0.08) Destructive Button（危险按钮） bg: #E54D2D text: #FFFFFF border-radius: 6px hover: bg #F0694F active: bg #D13B1C

主按钮是"深色文字 + 品牌绿底"的经典反白设计：绿底上不是白字而是深炭字#1C1C1C，这与品牌绿#3ECF8E的高亮度直接相关，也保证了 WCAG 对比度。active 态加了 1px 下移（translateY）模拟物理按压。

4.2 卡片

Surface Card（普通表面卡） bg: #222222（gray-dark-300） border: 1px solid #343434（gray-dark-600） border-radius: 8px padding: 16px（1rem） hover: border-color #3D3D3D，微光 rgba(62,207,142,0.04) Featured Card（重点卡） bg: #282828（gray-dark-400） border: 1px solid #3D3D3D（gray-dark-700） border-radius: 8px padding: 24px（1.5rem） hover: border-color #3ECF8E at 0.3 opacity Code Card / Terminal Card（代码/终端卡） bg: #1C1C1C（gray-dark-200） border: 1px solid #2D2D2D border-radius: 8px padding: 16px font-family: monospace

卡片的层级靠背景明度差而非阴影区分，hover 时只强化边框色并施加极淡的绿色微光——这是"终端感"的重要来源。

4.3 输入框

Text Input bg: #222222（gray-dark-300） border: 1px solid #343434（gray-dark-600） border-radius: 6px padding: 8px 12px text: #ECECEC placeholder: #6F6F6F height: 36px（默认），28px（紧凑） focus: border-color #3ECF8E，ring rgba(62,207,142,0.3) error: border-color #E54D2D，ring rgba(229,77,45,0.2) disabled: bg #1C1C1C, text #6F6F6F

聚焦态与错误态都用"边框色 + 低透明度 ring"双保险，绿色 ring 0.3 透明度、红色 ring 0.2 透明度，弱化错误感的刺激度。

4.4 导航

Top Nav（顶部导航） bg: rgba(21,21,21,0.8) + backdrop-blur border-bottom: 1px solid #2D2D2D height: 56px text: #9F9F9F active/hover: #ECECEC brand link: #3ECF8E Sidebar Nav（侧边导航） bg: #151515（gray-dark-100） width: 240px（收起 48px） item text: #9F9F9F item hover: bg #222222, text #ECECEC item active: bg #282828, text #3ECF8E, 左边框 2px #3ECF8E section label: #6F6F6F, 大写, 12px, 500 字重, letter-spacing 0.05em Breadcrumb（面包屑） text: #7D7D7D separator: #6F6F6F current: #ECECEC

顶栏的半透明毛玻璃（rgba(21,21,21,0.8)+ backdrop-blur）是典型开发者工具做法；侧边栏激活项用"绿字 + 2px 绿色左描边"双信号标识当前位置。

4.5 徽章 / 标签

Default Badge（默认） bg: #2D2D2D text: #9F9F9F border-radius: 9999px padding: 2px 8px font-size: 12px Brand Badge（品牌） bg: #15593B（brand-500） text: #3ECF8E border-radius: 9999px Destructive Badge（危险） bg: #7E2215 text: #E54D2D border-radius: 9999px

注意品牌徽章用"深绿底（brand-500#15593B）+ 亮绿字（#3ECF8E）"而不是亮绿底——再次印证"绿色是点缀而非填充"。

4.6 数据表格

Table header bg: #1C1C1C row bg: #222222 row alt bg: #1C1C1C row hover bg: #282828 row height: 28px header text: #9F9F9F, 12px, 500 cell text: #ECECEC, 13px cell padding: 8px 水平 border: 1px solid #2D2D2D

28px 行高是 Supabase 表格的签名特征：表格密度向电子表格看齐而非营销站。开发者在仪表盘里扫数据时，这种密度直接转化为信息效率。

5. 布局原则

5.1 间距刻度

5 级间距全部为 4px 基准的倍数，与 SKILL.md 中要求的 CSS token 间距体系（--space-xs: 4px到--space-2xl: 48px）同源，便于直接映射。

5.2 页面布局

最大内容宽度: 1128px（--content-width-screen-xl） 容器最大: 128rem（--container-site） 页面水平内边距: 16px（移动端）/ 24px（平板）/ 32px（桌面） 侧边栏宽度: 240px（展开）/ 48px（收起） 侧边栏与内容间距: 0（侧边栏与内容共用边框）

5.3 网格

• 仪表盘主体用"侧边栏 + 内容"两栏布局，不引入 CSS grid；
• 卡片网格：lg+12 列，移动端 1 列；
• 卡片间隙 16px（md）；
• 营销页特性网格：xl3 列、md2 列、sm1 列。

5.4 内容节奏

• 标题到正文：12px 间隙；
• 正文到下一区块：32px（lg）；
• 卡片内部：16px 内边距、label 与值之间 12px；
• 文档左侧导航项：4px 垂直间隙。

6. 深度与层级（Depth & Elevation）

Supabase 几乎不用阴影。暗色主题的深度完全靠表面色阶推进，这是整套设计最值得抄的机制。

6.1 表面堆叠（暗到亮）

六个表面层级之间相邻色差仅约 3%～8% 的亮度差，肉眼观感是"台阶式"推进，而非生硬的边界。

6.2 阴影（仅作兜底）

/* 极少使用，优先用表面色阶替代 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); /* 品牌辉光——仅用于克制的强调 */ --glow-brand: 0 0 20px rgba(62, 207, 142, 0.15); --glow-brand-strong: 0 0 40px rgba(62, 207, 142, 0.25);

6.3 覆盖层

Backdrop（遮罩）: rgba(0, 0, 0, 0.6) Modal（弹窗）: bg #151515, border 1px solid #2D2D2D Toast: bg #2D2D2D, border 1px solid #3D3D3D, 轻微阴影

7. Do's 与 Don'ts：设计护栏

7.1 Do（应该做）

• 品牌绿#3ECF8E只用于主 CTA、激活导航项、正向状态；
• 任何开发者会在终端里输入/阅读的内容一律用等宽字体；
• 用 gray-dark 色阶推进层级；能用更深的背景步骤就不加阴影；
• 用rgba(62, 207, 142, 0.1)做品牌色微调高亮（闪光动画、悬停点缀）；
• 数据表格保持紧凑（28px 行高），开发者要的是密度；
• 用#BDA4FF做代码关键字、#FFCDA1做字符串，营造语法高亮内容块；
• 圆角控制在 6–8px：0 太生硬，16px 对开发者工具来说太"圆润"。

7.2 Don't（禁止做）

• 禁止把品牌绿当作大面积表面背景——它是点缀色，不是填充色；
• 禁止在暗色背景上用纯白#FFFFFF写正文，用#ECECEC，纯白对比度过强；
• 禁止给卡片加彩色阴影或渐变——Supabase 表面是平的，靠背景明度区分；
• 禁止使用圆润的展示字体或俏皮字体，基调是技术、精确；
• 禁止长文居中，除 Hero 标题与短标语外一律左对齐；
• 禁止单视图使用超过两个字重（400 和 500）；
• 禁止对非徽章/标签/胶囊按钮的物件使用border-radius: 9999px；
• 禁止在同一视图混用 slate 与 gray 两套中性色，只能选一条轨道。

这套护栏回答了复刻时的最常见跑偏点，尤其是"绿色大面积铺底"和"纯白正文"两个高频错误。

8. 响应式行为

8.1 断点

断点体系与 SKILL.md 要求的"响应式（min-width: 768px / 1024px 断点）"完全对应，落地时只需取md与lg两档即可满足技能基线。

8.2 移动端适配

• 侧边栏：lg以下隐藏，换成汉堡菜单 + 滑出抽屉（bg#151515）；
• 数据表格：水平滚动 + 首列 sticky，行高保持 28px 不变；
• 代码块：水平滚动，绝不截断或隐藏代码内容；
• 导航：顶栏折叠为 Logo + 汉堡 + CTA 按钮；
• Hero：标题/正文/CTA 垂直堆叠，sm下 display-xl 降至 2rem；
• 卡片网格：多列收为单列堆叠；
• 内边距：页面水平内边距从 32px 降到 16px（sm）。

8.3 仪表盘专属

• 侧边栏lg收起为 48px（仅图标）、md完全隐藏；
• 面板拖拽条保留 2px 抓取区（--panel）；
• 表格列宽用户可调，最小列宽 80px；
• 移动端仪表盘用底部 Tab 栏替代侧边栏。

9. 落地实践：把规范转成可执行的 CSS Token

design-full技能要求所有 HTML/CSS 产出用 CSS Custom Properties 定义设计 token，严格遵循选定设计系统。把上文规范映射成 token 的模板如下（结合 SKILL.md 的 token 规范）：

:root { /* 语义色彩 —— 取自 Supabase 色板 */ --color-brand: #3ECF8E; --color-brand-hover: #34B97D; --color-surface-0: #151515; --color-surface-1: #1C1C1C; --color-surface-2: #222222; --color-text-primary: #ECECEC; --color-text-muted: #6F6F6F; --color-destructive: #E54D2D; --color-warning: #FFB224; /* 字体层级 */ --text-display: clamp(2.5rem, 5vw, 4.5rem); --text-body: 0.875rem; --text-code: 0.875rem; --font-sans: Inter, system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* 间距系统 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 64px; /* 品牌辉光（克制使用） */ --glow-brand: 0 0 20px rgba(62, 207, 142, 0.15); }

实际执行时，agent 会先经design-full init <任务名>建立design_assets/YYYY-MM-DD-<任务名>/工作区（含 brief.md 模板、source/ 与 output/ 目录，见 init.sh），再在 brief 确认后用design-full pick "<风格描述>"从内置库匹配设计系统，将选定规范写入任务DESIGN.md，之后所有页面均按此 token 编写。素材获取优先走公共pexels-footage/pixabay-footage搜索下载，备选siliconflow-img-gen生成；完成后必须经视觉模型 review（对照 brief + DESIGN.md，最多 3 轮修正）才能交付。

10. 在 xiaobei 中如何选中这套系统

design-full pick的匹配逻辑实现在 pick.sh：脚本读取design-systems/index.json，对查询串与每套系统的keywords + name + category + description做加权打分——关键词命中 +3、品类命中 +2、品牌名命中 +5、通用词命中 +1，按总分排序输出 1–3 套候选并给出推荐首选。

因此，当 brief 中出现"暗色""翡翠绿""代码优先""数据库""开发者"等关键词，或风格描述包含devtools品类，甚至直接提及 "Supabase" 品牌名时，本系统都会获得高分并被推荐。选定后 agent 读取 supabase.md 作为完整规范依据。若内置库覆盖不了需求，SKILL.md 还支持基于用户描述自行构建设计系统（输出同样 8 段结构），或从上游 awesome-design-md 库导入并在 index.json 登记。

11. 适用范围与注意点

• 适用场景：数据库/后端即服务类产品、开源开发者工具、技术产品官网、管理后台/SaaS 面板、文档站。这类产品"生于终端、面向开发者"，与 Supabase 的暗色代码优先美学天然契合。
• 注意点：
  • 本规范默认深色，若需求明确要浅色主站，应优先考虑 Notion、Stripe 等浅色导向系统；
  • 品牌绿是点缀不是填充，落地页想大面积用绿时请先阅读 7.2 节护栏；
  • 复刻专有字体时用 Inter + JetBrains Mono/Fira Code 替代（见 3.1 节），不要伪造@font-face资产；
  • 14 套系统的定位差异可从 index.json 的bestFor字段快速判断，例如同为暗色系的 Vercel 强调黑白极简（见 vercel.md），Supabase 则以翡翠绿语法高亮为签名。

参考文件索引

• 规范本体：supabase.md
• 设计系统索引与元数据：index.json
• 技能工作流与 8 段结构说明：SKILL.md
• 匹配算法实现：pick.sh
• 任务目录与 brief 模板生成：init.sh
• CLI wrapper（design-full init|pick）：design-full.sh
• 内容生产者路由（平面设计入口）：AGENTS.md

• 人工智能
• AI Agent
• 大模型
• AI 应用
• 媒体生成