企业官网建设流程全解析

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

本文以design-systems/trading-terminal/目录下的 Trading Terminal Design System 包为对象，面向 OpenDesign 的 Agent 与评审者，系统讲解该设计系统 2.0 包的文件契约、阅读顺序、令牌（Design Token）体系、组件清单与生成约束。读完本文，你将掌握如何基于该包快速落地一个"彭博终端风格"的深色数据密集型界面，并理解令牌命名、组件复用与证据审计在 OpenDesign 设计系统工作流中的完整链路。

一、包结构与契约总览

Trading Terminal 是 OpenDesign 仓库中归类为 "Themed & Unique"（主题化与独特风格）的一个内置设计系统包，其描述为："Bloomberg-style financial trading terminal. Dark-only,>@theme { --color-bg: var(--bg); --color-accent: var(--accent); --font-display: var(--font-display); --font-mono: var(--font-mono); --text-2xl: var(--text-2xl); --spacing-6: var(--space-6); --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); --container-max: var(--container-max); }

注意其命名映射规律：--color-*对应颜色、--font-*对应字体、--text-*对应字号、--spacing-*对应间距（含--spacing-section-*段距与--spacing-container-*容器边距）、--shadow-*对应阴影、--duration-*对应时长。派生规则与 source/evidence.md 一致：design-tokens.json与tailwind-v4.css都是派生输出，应从 report 与令牌样式表重新生成，而非手工编辑。system/tokens.default.json则给出了面向下游系统的最小主题子集（colorPrimary、borderRadius: 8等）。

七、参考组件的实现对照

components.html 是该包的参考实现 fixture，其关键组件样式可作为落地时的直接参照：

• 状态点：.status::before用 8px 圆形 +--success填充表示在线状态，配合大写等宽字体的状态文字。
• 指标网格：.metric-grid三列布局 + 细分割线（--border-soft），strong用 display 字体 28px 展示数字，span用--muted展示标签——典型的"数字大、标签弱"数据层级。
• 面板：.panel用color-mix微透明 surface +--border+--elev-raised大阴影，头部.panel-head以--border-soft分隔。
• 响应式：媒体查询在 860px 以下把 hero、metric-grid、card-row 折叠为单列，与 DESIGN.md 第 8 节"桌面优先（1280px+）、窄屏右向左收列、768px 以下单列 + 横向滚动"的策略一致。

system/目录进一步提供了生成好的系统资产入口 system/index.html（组件 kit、深色 kit、landing/deck/poster/email/form 等 artifact 页面），用于快速预览该风格族在不同制品类型上的表现。

八、Agent Prompt Guide：直接可用的生成提示词

DESIGN.md 第 9 节给出了面向模型的核心生成提示词，可复制进 OpenDesign Agent 的 prompt 中：

• 所有数字数据使用 JetBrains Mono，标签与标题使用 Inter（注：归一化包中对应--font-mono与--font-display/body）；
• 涨跌值始终以等宽字体 + 颜色编码显示（绿#22c55e系、红#ef4444系）；
• 任何元素不使用圆角；
• 价格更新使用 100ms 过渡、悬停 150ms；
• 永不用浅色模式或亮背景；
• 包含水平滚动行情条（ticker bar）持续更新价格；
• 所有数据变化先短暂保留旧值再替换，防止"闪盲"（flash blindness）。

九、验证与审计工作流

最后回到USAGE.md强调的"证据"概念。在 OpenDesign 的设计系统工作流中，评审者验证一个包是否健康，通常检查三件事：

1. 令牌契约：打开 source/token-contract.report.json，确认score: 100、recommendRebuild: false、undeclaredReferenced为空；
2. 组件清单：对照 components.manifest.json 的groups与fixture统计，确认复用优先、无越界 recipe；
3. 视觉抽查：打开 preview/colors.html、preview/typography.html、preview/spacing.html 人工核对深色底、数据色对比度与间距节奏。

同时始终牢记USAGE.md的边界声明：该包是基于OpenDesign 策展的内置 fixture的 backfill，不主张上游原始抓取证据，任何引用都必须保持这一表述口径。掌握以上契约与约束后，Agent 即可在 OpenDesign 中稳定产出风格可辨识、令牌可切换、组件可复用的交易终端类界面。

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