会出现在所有访问 /agents/* 路径的浏览器 Tab 上（React app 启动前的几百毫秒）， 若改成邀请语义会让普通浏览场景（首页/项目/待办）的 Tab 短暂出现邀请文案，语义错配。 og:title 仅外部抓取器读取（企微/微信/Slack 等 IM 卡片），改成邀请文案才是 #49388 的目标。 --> 来自 WorkBuddy 项目的分享

Design Specification — 会出现在所有访问 /agents/* 路径的浏览器 Tab 上（React app 启动前的几百毫秒），

若改成邀请语义会让普通浏览场景（首页/项目/待办）的 Tab 短暂出现邀请文案，语义错配。

og:title 仅外部抓取器读取（企微/微信/Slack 等 IM 卡片），改成邀请文案才是 #49388 的目标。

-->

来自 WorkBuddy 项目的分享

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#00C29A). All type is set in Source Code Pro. Detected font weights: 400, 500, 600, 700. Detected style signatures: soft-ui / layered elevation; gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://static.workbuddy.cn/web/agents/38e1cc7eb1640468090a4241355ae65ae569da48/assets/logo.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%)
• linear-gradient(rgb(240, 253, 244) 0%, rgb(255, 255, 255) 100%)
• linear-gradient(315deg, #3870CD -15.38%, #A57AF9 109.96%)
• linear-gradient(315deg, #60a5fa -15.38%, #c084fc 109.96%)
• linear-gradient(180deg, #f0f0f0 0%, #f5f5f5 100%)
• linear-gradient(180deg, rgba(0, 194, 154, 0) 0%, rgba(0, 194, 154, 1) 50%, rgba(0, 194, 154, 0) 100%)
• linear-gradient(90deg, rgba(0, 194, 154, 0) 0%, rgba(0, 194, 154, 1) 50%, rgba(0, 194, 154, 0) 100%)
• linear-gradient(180deg, #ebebeb 0%, #f5f5f5 100%)
• linear-gradient(180deg, 0%, 100%)
• linear-gradient(to right, 50%, transparent 100%)

> 6 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Source Code Pro — stack: Source Code Pro

Font stacks (most used first)

• Source Code Pro
• KaTeX_Main
• KaTeX_SansSerif
• KaTeX_Caligraphic
• KaTeX_Fraktur
• KaTeX_Math
• KaTeX_Script
• KaTeX_Size1
• KaTeX_Size2
• KaTeX_Size3

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0px 16px 32px -8px rgba(0, 0, 0, .03), 0px 2px 4px -4px rgba(0, 0, 0, .06)
• inset 0 0 0 100vmax color-mix(in srgb, 12%,transparent)
• 0 6px 12px -8px rgba(0, 0, 0, .02), 0 2px 4px -4px rgba(0, 0, 0, .03)
• 0px 16px 32px rgba(0, 0, 0, .04)
• 0px 16px 32px rgba(0, 0, 0, .4)
• inset 0 0 0 100vmax transparent

Layout

Container max-width: 832px

Breakpoints

• 768px

Animation & Motion

Transitions

• opacity .16s ease

Easing curves

• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, 1, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.2, 0, 0, 1)

Keyframes

@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100%{ background-position: 200% 0; } }
@keyframes skeleton-fade-out { 0% { opacity: 1; } 100%{ opacity: 0; } }
@keyframes cr-sub-menu-pop-in { 0%{opacity:0}to{opacity:1} }
@keyframes wb-button-spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes wb-icon-spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes wb-card-skeleton-shimmer { 0%{background-position:200% 0}to{background-position:-200% 0} }
@keyframes wb-loading-rotate { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes wb-popover-fade-in { 0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)} }
@keyframes wb-message-enter { 0%{opacity:0;transform:translateY(var(--wb-message-translate))}to{opacity:1;transform:translateY(0)} }
@keyframes wb-message-spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes wb-switch-spin { to{transform:rotate(360deg)} }
@keyframes wb-tabs-enter-forward { 0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1} }
@keyframes wb-tabs-exit-forward { 0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0} }
@keyframes wb-tabs-enter-backward { 0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1} }
@keyframes wb-tabs-exit-backward { 0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0} }
@keyframes wb-table-tbody-enter { 0%{opacity:0}to{opacity:1} }
@keyframes wb-table-spin { to{transform:rotate(360deg)} }
@keyframes wb-progress-indeterminate { 0%{transform:translate(-100%)}to{transform:translate(400%)} }

Animations

• skeleton-fade-out 0.25s ease-out forwards
• skeleton-shimmer 1.5s infinite
• wb-settings-locate-row-breath 1.4s ease-in-out 3
• none

Source Design Tokens (CSS custom properties)

:root {
  --skeleton-bg: #181818;
  --skeleton-sidebar-bg: #141414;
  --skeleton-border: rgba(255, 255, 255, 0.07);
  --skeleton-shimmer-from: rgba(255, 255, 255, 0.04);
  --skeleton-shimmer-to: rgba(255, 255, 255, 0.08);
  --skeleton-card-bg: rgba(255, 255, 255, 0.04);
  --skeleton-card-border: rgba(255, 255, 255, 0.06);
  --skeleton-input-bg: rgba(255, 255, 255, 0.03);
  --skeleton-input-border: rgba(255, 255, 255, 0.1);
  --skeleton-btn-bg: rgba(255, 255, 255, 0.08);
  --skeleton-search-bg: rgba(255, 255, 255, 0.05);
  --skeleton-text-color: rgba(255, 255, 255, 0.6);
  --cb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --cb-font-family-mono: "Menlo", "Monaco", "Courier New", monospace;
  --cb-spacing-xs: 4px;
  --cb-spacing-sm: 8px;
  --cb-spacing-md: 12px;
  --cb-spacing-lg: 16px;
  --cb-spacing-xl: 20px;
  --cb-spacing-xxl: 24px;
  --cb-border-radius-sm: 4px;
  --cb-border-radius-md: 6px;
  --cb-border-radius-lg: 8px;
  --cb-border-radius-xl: 16px;
  --cb-border-radius-2xl: 24px;
  --cb-transition-fast: .15s ease;
  --cb-transition-base: .2s ease;
  --cb-transition-slow: .3s ease;
  --cb-z-index-dropdown: 100;
  --cb-z-index-modal: 1000;
  --cb-z-index-modal-confirm: 100001;
  --cb-z-index-tooltip: 1100;
  --cb-vscode-editor-background: var(--vscode-editor-background, #ffffff);
  --cb-vscode-sideBar-background: var(--vscode-sideBar-background, #f3f3f3);
  --cb-vscode-input-background: var(--vscode-input-background, #ffffff);
  --cb-vscode-dropdown-background: var(--vscode-dropdown-background, #ffffff);
  --cb-vscode-foreground: var(--vscode-foreground, #333333);
  --cb-vscode-editor-foreground: var(--vscode-editor-foreground, #4c4f69);
  --cb-vscode-titleBar-activeBackground: var(--vscode-titleBar-activeBackground, #dddddd);
  --cb-vscode-titleBar-activeForeground: var(--vscode-titleBar-activeForeground, #333333);
  --cb-vscode-titleBar-inactiveBackground: var(--vscode-titleBar-inactiveBackground, #dddddd);
  --cb-vscode-titleBar-inactiveForeground: var(--vscode-titleBar-inactiveForeground, #666666);
  --cb-titlebar-control-hover-background: rgba(0, 0, 0, .06);
  --cb-vscode-descriptionForeground: var(--vscode-descriptionForeground, #717171);
  --cb-vscode-widget-border: var(--vscode-widget-border, #e1e1e1);
  --cb-vscode-panel-border: var(--vscode-panel-border, #e1e1e1);
  --cb-vscode-list-hoverBackground: var(--vscode-list-hoverBackground, #f0f0f0);
  --cb-vscode-toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground, #f0f0f0);
  --cb-vscode-button-background: var(--vscode-button-background, #007acc);
  --cb-vscode-button-foreground: var(--vscode-button-foreground, #ffffff);
  --cb-vscode-button-hoverBackground: var(--vscode-button-hoverBackground, #0062a3);
  --cb-vscode-scrollbarSlider-background: var(--vscode-scrollbarSlider-background, #c1c1c1);
  --cb-vscode-scrollbarSlider-hoverBackground: var(--vscode-scrollbarSlider-hoverBackground, #a8a8a8);
  --cb-vscode-textLink-foreground: var(--vscode-textLink-foreground, #006ab1);
  --cb-panel-bg-primary: var(--vscode-editor-background, #ffffff);
  --cb-text-primary: #333333;
  --cb-text-secondary: #666666;
  --cb-text-disabled: rgba(0, 0, 0, .3);
  --cb-text-link: #006ab1;
  --cb-stroke-secondary: #d8dee4;
}

Do's and Don'ts

Do

• Do reserve the accent #00C29A for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 600, 700.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #005FB8;
  --color-accent: #00C29A;
  --color-background: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E4E4E4;
  --color-border: #3B3B3B;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F8F8;
  --color-surface-container: #F7F7F7;
  --color-surface-container-high: #F5F5F5;
  --color-surface-container-highest: #F2F2F2;
  --font-sans: Source Code Pro;
  --font-size-body-lg: 18px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 9px;
  --radius-lg: 18px;
  --shadow-sm: 0 6px 12px -8px rgba(0, 0, 0, .02), 0 2px 4px -4px rgba(0, 0, 0, .03);
  --shadow-md: 0px 16px 32px rgba(0, 0, 0, .04);
  --shadow-lg: 0px 16px 32px rgba(0, 0, 0, .4);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --container-max: 832px;
}