人工智能AI Agent大模型AI 应用媒体生成【免费下载链接】xiaobei为OPC/中小微企业量身打造的自媒体获客智能体项目地址https://gitcode.com/gh_mirrors/wi/xiaobei点击查看免费下载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 段结构Visual Theme Atmosphere视觉主题与氛围Color Palette Roles色彩体系与角色Typography Rules排版规则Component Stylings组件样式Layout Principles布局原则Depth Elevation深度与层级Dos and Donts设计护栏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语义名HexHSL角色brand-primary#3ECF8E153.1° 60.2% 52.7%主操作、链接、激活态brand-accent#34B97D152.9° 56.1% 46.5%悬停/按压的品牌色、强调点缀brand-600#84E0B7153° 59.5% 70%深色表面上的浅品牌色高亮brand-500#15593B153.5° 61.8% 21.6%深色表面上的品牌色哑光绿brand-400#0B3824153.3° 65.2% 13.5%深品牌底色brand-300#062618153.8° 69.6% 9%最深的品牌表面brand-200#041C11152.5° 75% 6.3%近黑色的品牌色调注意品牌色阶的构建逻辑以#3ECF8E为锚点向上brand-accent、brand-600用于交互反馈向下brand-500brand-200用于把绿色压暗成表面色从而在暗色 UI 里既保留品牌识别、又不喧宾夺主。这与 7.1 节绿色只是点缀色、不是填充色的护栏互为表里。2.2 灰色阶Dark Mode 核心中性色语义名Hex角色gray-dark-100#151515最深背景侧边栏、对话框gray-dark-200#1C1C1C默认页面/画布背景gray-dark-300#222222控件背景、surface 100gray-dark-400#282828Surface 200、哑光背景gray-dark-500#2D2D2D按钮默认底、覆盖层默认gray-dark-600#343434默认边框、选中背景gray-dark-700#3D3D3D加强边框、surface 400gray-dark-800#505050按钮悬停边框、更强边框gray-dark-900#6F6F6F哑光前景色gray-dark-1000#7D7D7D较浅前景色gray-dark-1100#9F9F9F浅前景色gray-dark-1200#ECECEC默认前景色正文主色这套 12 级灰阶是 Supabase 暗色 UI 的骨架从背景到文字有 6 个明确的表面层级、4 个前景层级、2 个边框层级。关键纪律正文主色不是纯白#FFFFFF而是#ECECEC——纯白在暗色上的对比度过强。2.3 冷色调中性色Slate 备选轨道语义名Hex角色slate-dark-100#141617冷色深背景slate-dark-200#1A1D1E冷色画布背景slate-dark-300#1F2324冷色表面slate-dark-400#26292B冷色哑光表面slate-dark-500#2A2E30冷色按钮/覆盖层背景slate-dark-600#313538冷色边框slate-dark-700#393E41冷色加强边框slate-dark-800#4C5155冷色悬停边框slate-dark-900#687076冷色哑光前景slate-dark-1000#787E84冷色较浅前景slate-dark-1100#9AA0A5冷色浅前景slate-dark-1200#EBECED冷色正文主色灰阶gray与冷灰slate是两条互斥的中性轨道规范明确禁止在同一视图中混用见 7.2 节Dont。选择依据是品牌气质gray 更中性百搭slate 带一点蓝冷感、更科技。2.4 语义色Semantic Colors语义名Hex角色destructive#E54D2D错误态、删除、危险destructive-hover#F0694F危险悬停/按压destructive-muted#7E2215深色表面上的危险色warning#FFB224警示、待处理态warning-hover#F1A00C警示悬停/按压secondary#FFFFFF白色点缀、次要操作语义色遵循与品牌色相同的策略每个语义色都配了深色表面专用的哑光版本如destructive-muted #7E2215确保在暗色背景上可读且不刺眼。2.5 代码语法 Token深色TokenHex用法code-foreground#FFFFFF默认代码文本code-keyword#BDA4FF语言关键字code-constant#3ECF8E常量、函数、属性与品牌色一致code-string#FFCDA1字符串字面量、表达式code-comment#7E7E7E注释code-highlight#232323激活/高亮行背景这是整套系统最具辨识度的部分代码高亮的常量/函数色直接复用品牌绿#3ECF8E让代码块在视觉上成为品牌的一部分。关键字用紫#BDA4FF、字符串用暖橙#FFCDA1形成绿紫橙的语法调色板近似现代 IDE 深色主题的观感。3. 排版规则3.1 字体栈用途字体回退UI 正文Intersystem-ui, -apple-system, sans-serif代码custom-font等宽ui-monospace, SFMono-Regular, Menlo, monospace展示Displaycustom-font可变Inter, system-ui, sans-serif规范明确说明Supabase 实际使用通过font-face加载的专有字体400 Book 与 500 Medium 两个字重。复刻建议正文用最接近的开源替代 Inter代码用 JetBrains Mono 或 Fira Code。3.2 字号阶梯Type Scale层级字号字重行高用途display-xlclamp(2.5rem, 5vw, 4.5rem)5001.1Hero 主标题display-lgclamp(2rem, 4vw, 3rem)5001.15章节标题h21.875rem30px5001.25子章节标题h31.25rem20px5001.3卡片标题、面板标题body-lg1.125rem18px4001.6Hero 正文、引导段body0.875rem14px4001.5默认正文body-sm0.8125rem13px4001.5次要文本、说明文字code0.875rem14px4001.6行内代码、代码块label0.75rem12px5001.4标签、徽章、标记注意两个细节展示级字号用了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: #222222gray-dark-300 border: 1px solid #343434gray-dark-600 border-radius: 8px padding: 16px1rem hover: border-color #3D3D3D微光 rgba(62,207,142,0.04) Featured Card重点卡 bg: #282828gray-dark-400 border: 1px solid #3D3D3Dgray-dark-700 border-radius: 8px padding: 24px1.5rem hover: border-color #3ECF8E at 0.3 opacity Code Card / Terminal Card代码/终端卡 bg: #1C1C1Cgray-dark-200 border: 1px solid #2D2D2D border-radius: 8px padding: 16px font-family: monospace卡片的层级靠背景明度差而非阴影区分hover 时只强化边框色并施加极淡的绿色微光——这是终端感的重要来源。4.3 输入框Text Input bg: #222222gray-dark-300 border: 1px solid #343434gray-dark-600 border-radius: 6px padding: 8px 12px text: #ECECEC placeholder: #6F6F6F height: 36px默认28px紧凑 focus: border-color #3ECF8Ering rgba(62,207,142,0.3) error: border-color #E54D2Dring 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: #151515gray-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: #15593Bbrand-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 #2D2D2D28px 行高是 Supabase 表格的签名特征表格密度向电子表格看齐而非营销站。开发者在仪表盘里扫数据时这种密度直接转化为信息效率。5. 布局原则5.1 间距刻度Token值用途xs4px行内间隙、图标到文字的间距sm8px紧凑组件内边距md16px默认组件内边距、卡片内槽lg32px区块间距、面板内边距xl64px主要区块分隔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卡片网格lg12 列移动端 1 列卡片间隙 16pxmd营销页特性网格xl3 列、md2 列、sm1 列。5.4 内容节奏标题到正文12px 间隙正文到下一区块32pxlg卡片内部16px 内边距、label 与值之间 12px文档左侧导航项4px 垂直间隙。6. 深度与层级Depth ElevationSupabase 几乎不用阴影。暗色主题的深度完全靠表面色阶推进这是整套设计最值得抄的机制。6.1 表面堆叠暗到亮层级背景色用途0#151515侧边栏、对话框、覆盖层1#1C1C1C画布、页面背景2#222222控件、输入框、卡片基底3#282828悬停态、重点卡片4#2D2D2D按钮默认、抬升背景5#343434激活/悬停按钮、边框六个表面层级之间相邻色差仅约 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. Dos 与 Donts设计护栏7.1 Do应该做品牌绿#3ECF8E只用于主 CTA、激活导航项、正向状态任何开发者会在终端里输入/阅读的内容一律用等宽字体用 gray-dark 色阶推进层级能用更深的背景步骤就不加阴影用rgba(62, 207, 142, 0.1)做品牌色微调高亮闪光动画、悬停点缀数据表格保持紧凑28px 行高开发者要的是密度用#BDA4FF做代码关键字、#FFCDA1做字符串营造语法高亮内容块圆角控制在 6–8px0 太生硬16px 对开发者工具来说太圆润。7.2 Dont禁止做禁止把品牌绿当作大面积表面背景——它是点缀色不是填充色禁止在暗色背景上用纯白#FFFFFF写正文用#ECECEC纯白对比度过强禁止给卡片加彩色阴影或渐变——Supabase 表面是平的靠背景明度区分禁止使用圆润的展示字体或俏皮字体基调是技术、精确禁止长文居中除 Hero 标题与短标语外一律左对齐禁止单视图使用超过两个字重400 和 500禁止对非徽章/标签/胶囊按钮的物件使用border-radius: 9999px禁止在同一视图混用 slate 与 gray 两套中性色只能选一条轨道。这套护栏回答了复刻时的最常见跑偏点尤其是绿色大面积铺底和纯白正文两个高频错误。8. 响应式行为8.1 断点名称最小宽度布局变化sm640px单列、卡片全宽md768px两列卡片网格、侧边栏隐藏lg1024px侧边栏可见收起态、2–3 列网格xl1280px完整侧边栏、最大内容宽度2xl1536px更宽内槽、更多留白断点体系与 SKILL.md 要求的响应式min-width: 768px / 1024px 断点完全对应落地时只需取md与lg两档即可满足技能基线。8.2 移动端适配侧边栏lg以下隐藏换成汉堡菜单 滑出抽屉bg#151515数据表格水平滚动 首列 sticky行高保持 28px 不变代码块水平滚动绝不截断或隐藏代码内容导航顶栏折叠为 Logo 汉堡 CTA 按钮Hero标题/正文/CTA 垂直堆叠sm下 display-xl 降至 2rem卡片网格多列收为单列堆叠内边距页面水平内边距从 32px 降到 16pxsm。8.3 仪表盘专属侧边栏lg收起为 48px仅图标、md完全隐藏面板拖拽条保留 2px 抓取区--panel表格列宽用户可调最小列宽 80px移动端仪表盘用底部 Tab 栏替代侧边栏。9. 落地实践把规范转成可执行的 CSS Tokendesign-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.mdSupabase 则以翡翠绿语法高亮为签名。参考文件索引规范本体supabase.md设计系统索引与元数据index.json技能工作流与 8 段结构说明SKILL.md匹配算法实现pick.sh任务目录与 brief 模板生成init.shCLI wrapperdesign-full init|pickdesign-full.sh内容生产者路由平面设计入口AGENTS.md赞分享人工智能AI Agent大模型AI 应用媒体生成【免费下载链接】xiaobei为OPC/中小微企业量身打造的自媒体获客智能体项目地址https://gitcode.com/gh_mirrors/wi/xiaobei点击查看免费下载相关推荐qm 项目 popular-web-designs 技能解析Supabase 暗色开发者平台设计系统模板实战指南qm 项目 popular web designs 技能解析Supabase 暗色开发者平台设计系统模板实战指南 导读 本文以 qm 仓库 skills se后端人工智能AI Agent前端AI 技能xiaobei 设计系统库实战Linear 的暗色工程美学规范与 design-full 落地指南xiaobei 设计系统库实战Linear 的暗色工程美学规范与 design full 落地指南 导读 本文聚焦 xiaobei 项目中 Content P人工智能AI Agent大模型AI 应用媒体生成OpenDesign 设计系统实战Supabase 暗色终端美学解析与 Token 工程化落地OpenDesign 设计系统实战Supabase 暗色终端美学解析与 Token 工程化落地 本文以 OpenDesign 仓库内置的 Supabase 设AI 应用人工智能AI 技能设计系统媒体生成上一篇SocketRocket URL请求扩展定制WebSocket连接参数下一篇GitHub_Trending/pd/pds时空连续体API设计跨时间的服务接口创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
