企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本文以 OpenDesign 仓库中 design-systems/trading-terminal/DESIGN.md 为主体，系统讲解如何在 AI 编程代理（Agent）驱动下，从零搭建 Bloomberg 风格的深色金融交易终端界面。文章完整保留原文档的色彩令牌、排版规则、组件 CSS 与 Agent 提示词约束，并补充 OpenDesign 仓库中规范化后的 tokens.css、components.html 与设计令牌派生文件作为实现级佐证。读完本文，你将掌握数据密集型深色界面的完整设计契约，并能直接复用该设计系统包生成原型、行情看板与交易监控页面。

1. 设计系统定位：为"两米外可读"的金融终端而生

交易终端设计系统属于 Themed & Unique（主题化与独特风格）类别，其核心视觉目标是复刻 Bloomberg Terminal、Refinitiv Eikon、FactSet、TradingView Pro 等专业金融终端的观感。这些产品共享一组鲜明的风格特征：

• 仅深色界面（dark-only），长时段盯盘时降低眼部疲劳；
• 等宽字体（monospace）承载全部数据数字，保证数字按列对齐；
• 表格化布局，无装饰性留白，面板共享边框而非留出间隙；
• 用颜色编码买卖信号：青色（cyan）表示买入/上涨，珊瑚色（coral）表示卖出/下跌。

在 OpenDesign 中，该包被归类为设计系统包（design-system package），由 manifest.json 声明元数据，DESIGN.md作为 Agent 的设计散文规范。它的典型应用场景包括：交易行情看板、订单簿面板、加密货币/股票盯盘工具、监控大盘与运维指标台——凡是"信息密集、需要同时监控多个市场、2 米外也能一眼读取"的界面都适用。

需要特别说明的是（依据 source/evidence.md），该包是基于 OpenDesign 精选的 bundled fixture 回填生成，并未对上游原始品牌仓库或网站做全新爬取；品牌引用仅为美学灵感，并非对应品牌官方资产（见 design-systems/README.md 的 Attribution 说明）。

2. 色彩体系：深色表面与高对比数据色

交易终端对色彩的要求是"高对比、语义清晰、克制"。DESIGN.md 将颜色划分为两组角色。

2.1 表面色板（Surface Palette）

表面色板负责构建界面层级，全部为近黑色系：

2.2 数据色板（Data Palette）

数据色板负责传达行情语义，是交易终端的信息核心：

2.3 深色模式：唯一模式

交易终端运行在昏暗环境中以保持专注，因此深色是默认且唯一的模式，不允许提供浅色变体。DESIGN.md 给出了可直接复制的 CSS 令牌块：

:root { --color-bg: #0D0D0D; --color-surface: #141414; --color-surface-hover: #1A1A1A; --color-border: #2A2A2A; --color-primary: #00D4AA; --color-gain: #00D4AA; --color-loss: #FF4757; --color-warning: #FFB800; --color-text: #FFFFFF; --color-text-secondary: #AAAAAA; --color-text-tertiary: #828282; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; }

2.4 实现级佐证：OpenDesign 规范化后的 token 绑定

在 OpenDesign 中，设计意图（DESIGN.md）会进一步编译为语义化 token 样式表 tokens.css。从源码可以看到，"cyan 买入/珊瑚卖出"的语义在规范化后映射为独立的语义令牌：--success: #22c55e（成功/买入）、--warn: #f59e0b（警告）、--danger: #ef4444（危险/卖出），并增加了--accent: #38bdf8（主操作色）与--accent-on、--accent-hover（通过color-mix(in oklab, ...)派生）等交互令牌。该 CSS 还定义了完整的间距（--space-1至--space-12）、圆角（--radius-sm/md/lg/pill）、层级（--elev-flat、--elev-ring、--elev-raised）、动效（--motion-fast: 90ms、--motion-base: 160ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)）与容器（--container-max: 1320px）令牌。

派生文件 design-tokens.json 以od-design-tokens/v1格式记录了全部 56 个令牌的分层结构（A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个），令牌契约评分 100（excellent），每个令牌都标注了对应 tokens.css 的声明行号（如--bg对应tokens.css:7）。这为"换肤不破坏契约"提供了机器可校验的保证——components.manifest.json 的 token 审计也确认了"已声明且被引用"与"已声明未使用"（如--danger、--warn、--motion-base）的完整清单，undeclaredReferenced（引用了但未声明）为空，说明令牌契约闭合无漏引。

3. 排版规则：数字用等宽，标签用无衬线

交易终端的排版遵循"数字可对齐、标签可辨识"的原则：所有数值数据使用等宽字体 JetBrains Mono，标题与标签使用 Inter。完整排版阶梯如下：

为保证目录抽取（catalog extraction）的稳定性，DESIGN.md 同时给出了各角色的完整字体栈（font stack），供样式生成时直接套用：

Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif Micro: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace

实现层面的字体令牌见 tokens.css：--font-display/--font-body均为Inter, system-ui, sans-serif，--font-mono为"Roboto Mono", "SF Mono", ui-monospace, Menlo, monospace；字号令牌--text-xs（11px）至--text-4xl（56px）、行高--leading-tight: 1.08与字距--tracking-display: -0.01em一并在其中声明。

4. 核心组件样式

DESIGN.md 给出三个最关键组件的完整 CSS 配方，下面逐一展开，并补充各属性的设计意图。

4.1 订单簿行（Order Book Row）

订单簿一行展示"委托量 / 买价 / 卖价"三列，使用 CSS Grid 三等分、无装饰性内边距，靠border-bottom分隔行：

.order-book-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); } .order-book-size { color: var(--color-text-secondary); text-align: right; } .order-book-bid { color: var(--color-gain); text-align: right; } .order-book-ask { color: var(--color-loss); text-align: right; }

要点：买价（bid）着色为 gain 青色并右对齐，卖价（ask）着色为 loss 珊瑚色并右对齐，委托量使用次级文本色，保证扫读时买卖双方一目了然。

4.2 价格卡片（Price Card）

价格卡片是行情模块的主体，展示"标签 + 大号价格 + 涨跌变化"，涨跌通过.positive/.negative两个修饰类着色：

.price-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .price-card-label { font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.05em; } .price-card-value { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 600; color: var(--color-text); line-height: 1.0; } .price-card-change { font-family: 'JetBrains Mono', monospace; font-size: 14px; } .price-card-change.positive { color: var(--color-gain); } .price-card-change.negative { color: var(--color-loss); }

设计意图：标签大写加字距（letter-spacing 0.05em）强化可辨识度；主价格 28px/600 等高线 1.0 便于快速捕捉数值；涨跌变化紧跟在主价格下方，用颜色区分方向。从仓库中的 components.html 可以看到同类密度处理：.metric strong使用--text-2xl（28px）展示数值、.metric span使用--muted展示指标名，页面标题区域采用--text-4xl（56px）显示，标题以下用--text-3xl/--text-xl逐级收窄。

4.3 行情滚动条（Ticker Bar）

单行水平滚动的行情总览条，用于展示市场概览，是"两米外可读"的典型组件：

.ticker-bar { display: flex; gap: var(--space-6); overflow-x: auto; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }

要点：flex+overflow-x: auto实现单行横向滚动，gap: var(--space-6)（24px）拉开各行情条目间距，底部细边框将其与下方内容区隔。

5. 布局原则：表格化、零圆角、共享边框

DESIGN.md 明确规定了交易终端的布局哲学：

• 网格化高密度布局：多个数据列必须同时可见；
• 面板共享边框而非间隙：用border而非gap分隔面板，消除装饰性留白；
• 零圆角：锐利直角传达"精密仪器"的质感；
• 表格化排列：行是数据行，列是同质数据列。

实现侧 components.html 的.metric-grid使用repeat(3, minmax(0, 1fr))三列等分、单元格间用border-right分隔、.metric:last-child去除右边框，正是"共享边框"原则的直接落地；.card-row双列、.lower三列同样遵循等分网格。

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

交易终端不使用阴影表达层级，而是依赖两个手段：

1. 表面色阶：用 Surface（#141414）相对 Background（#0D0D0D）的亮度差传达"浮起"感；
2. 细边框：用 1px 的#2A2A2A边框勾勒面板边界，不做任何装饰元素。

在规范化 token 中对应为--elev-flat: none（扁平）、--elev-ring: 0 0 0 1px var(--border)（描边式层级）与--elev-raised: 0 24px 80px rgba(0, 0, 0, 0.42)（仅用于局部强调的柔和投影），见 tokens.css。默认状态下保持无阴影，需要突出时优先使用描边环而非投影。

7. 禁区清单（Do's and Don'ts）

DESIGN.md 给出了六条硬性约束，是评估生成结果是否"跑偏"的判据，务必逐条校验：

• 禁止仅用颜色传达买卖信号，必须同时配方向图标或文字标签；
• 禁止对数据值做装饰性动画——交易者需要即时、稳定的读数；
• 禁止使用圆角——只保留锐利精确的美学；
• 禁止使用浅色模式——交易终端运行在昏暗环境；
• 单列最多展示 5 个价格点，超出会造成认知过载、降低决策速度；
• 禁止使用渐变——只允许纯色填充。

USAGE.md（design-systems/trading-terminal/USAGE.md）进一步补充了使用纪律：保留 schema token 名称以保证跨品牌切换可靠；使用--accent表达主操作、链接、聚焦态与唯一的焦点元素；在components.manifest.json已有的组件组之外不要随意发明新控件。

8. 响应式行为

终端布局以桌面优先（1280px+）为目标。DESIGN.md 规定的降级策略为：

• 更窄视口下，列从右往左逐列坍缩，优先保留价格与涨跌数据；
• 低于 768px 时切换为单列堆叠，溢出数据横向滚动；
• 任何断点都不得破坏深色唯一约束。

components.html 的实现提供了可参考的断点做法：@media (max-width: 1023px)时容器内边距从桌面 36px 收窄为 24px、区块纵向留白从 80px 收窄为 60px；@media (max-width: 639px)进一步收窄为 16px/42px（对应--container-gutter-desktop/tablet/phone与--section-y-desktop/tablet/phone令牌）；@media (max-width: 860px)时 hero、三列 lower、指标网格与卡片行全部改为单列，并去掉竖直边框改用底部边框分隔单元格。

9. Agent 提示词指南（Agent Prompt Guide）

当由 Agent 生成交易终端界面时，DESIGN.md 要求向模型注入以下指令，以保证输出符合风格家族：

• 所有数字数据使用 JetBrains Mono，标签与标题使用 Inter；
• 涨跌值始终以等宽字体 + 颜色编码呈现（#00D4AA为涨/买入、#FF4757为跌/卖出）；
• 任何元素都不使用圆角；
• 价格更新过渡使用 100ms，悬停态使用 150ms；
• 绝不使用浅色模式或亮色背景；
• 必须包含一条横向滚动的行情条（ticker bar）；
• 所有数据变化在替换前短暂保留旧值，防止闪盲（flash blindness）。

在 OpenDesign 中，这段提示词并非孤立存在——仓库的 design-systems/README.md 说明：从 Design System 界面选择某个包，或在受支持的项目创建流程中选中它，就会把该包的设计上下文组合进 Agent 的提示词。也就是说，DESIGN.md的以上规则会在运行时被编排进 Agent prompt，成为生成约束的一部分；USAGE.md则定义了 Agent 与审查者的阅读顺序与契约。

10. 实战接入：如何在 OpenDesign 中启用并使用该设计系统包

按照 USAGE.md 的 Read Order，接入流程如下：

1. 先读 USAGE.md，理解包契约；
2. 再读 DESIGN.md，掌握视觉意图、约束与反模式（即本文主体内容）；
3. 将 tokens.css 粘贴进第一个 artifact 的<style>块，再编写组件 CSS——确保所有样式基于同一套语义令牌，避免在:root令牌块之外散落裸 hex 值；
4. 需要组件清单时使用 components.manifest.json（它记录了 8 个组件组：buttons、inputs、cards、badges、links、keyboard、icons、typography、layout，以及 48 个选择器、26 个类、19 个元素）；需要精确选择器或状态时打开 components.html；
5. 需要视觉核对时打开 preview 下的colors.html、typography.html、spacing.html预览页。

包结构遵循 OpenDesign 设计系统包的统一形态（见 design-systems/README.md）：

design-systems/trading-terminal/ ├── manifest.json 稳定发现元数据、来源与路径声明 ├── DESIGN.md Agent 的设计散文规范（本文主体） ├── tokens.css 规范化语义令牌样式表 ├── USAGE.md Agent 阅读顺序与使用纪律 ├── components.html 独立组件 fixture ├── components.manifest.json 派生组件/令牌索引 ├── design-tokens.json 派生 Design Tokens JSON ├── tailwind-v4.css 派生 Tailwind v4 映射 ├── preview/ 索引化预览页（colors / typography / spacing） └── source/ 导入证据、token 契约报告与来源快照

其中manifest.json的source字段记录包来源为OpenDesign curated bundled fixture（type: bundled），craft字段建议附加color与accessibility-baseline两条 craft 准则；design-tokens.json、tailwind-v4.css、components.manifest.json均为派生产物，应按说明从 token 契约报告与令牌样式表重新生成，而非手工编辑（见 source/evidence.md）。

11. 总结

交易终端设计系统回答了"数据密集型金融界面如何保持可读、可扫、不疲劳"这一核心问题：深色唯一表面 + 青色/珊瑚色买卖语义 + 等宽数字字体 + 零圆角表格化布局 + 受限动效。本文已完整覆盖 DESIGN.md 的全部规范（色板、排版、组件 CSS、布局、层级、禁区、响应式、Agent 提示词），并以 tokens.css、components.html、design-tokens.json 与 components.manifest.json 等仓库文件印证了实现细节。将此包接入 OpenDesign 的 Agent 工作流后，即可稳定复现专业交易终端风格的原型、看板与监控界面——这也是它作为 Themed & Unique 类别包被收录进 151 个设计系统目录的价值所在（design-systems/README.md）。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成