OpenDesign Trading Terminal 设计系统：Agent 驱动的 Design System 2.0 包契约与使用指南-北京尧图网络

AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本文以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-softstrong用 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 的设计系统工作流中评审者验证一个包是否健康通常检查三件事令牌契约打开 source/token-contract.report.json确认score: 100、recommendRebuild: false、undeclaredReferenced为空组件清单对照 components.manifest.json 的groups与fixture统计确认复用优先、无越界 recipe视觉抽查打开 preview/colors.html、preview/typography.html、preview/spacing.html 人工核对深色底、数据色对比度与间距节奏。同时始终牢记USAGE.md的边界声明该包是基于OpenDesign 策展的内置 fixture的 backfill不主张上游原始抓取证据任何引用都必须保持这一表述口径。掌握以上契约与约束后Agent 即可在 OpenDesign 中稳定产出风格可辨识、令牌可切换、组件可复用的交易终端类界面。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐革命性1-bit语言模型Bonsai-8B-GGUF14.1倍压缩与6.2倍加速的终极AI突破革命性1 bit语言模型Bonsai 8B GGUF14.1倍压缩与6.2倍加速的终极AI突破在当今AI技术飞速发展的时代大语言模型的应用日益广泛但庞大AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Cosmic 设计系统包使用指南Agent 与评审者的 Design System 2.0 契约实操OpenDesign Cosmic 设计系统包使用指南Agent 与评审者的 Design System 2.0 契约实操 Cosmic 是 OpenDesiAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Agentic 设计系统包使用契约USAGE.md 如何指导 Agent 消费 Design System 2.0 包OpenDesign Agentic 设计系统包使用契约USAGE.md 如何指导 Agent 消费 Design System 2.0 包本文以 desiAI 应用人工智能AI 技能设计系统媒体生成上一篇YesPlayMusic高级歌词功能卡拉OK评分和练习模式完全指南下一篇解决API碎片化难题One API网关模式的企业级治理实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

OpenDesign Trading Terminal 设计系统：Agent 驱动的 Design System 2.0 包契约与使用指南

相关推荐

react-admin 软删除数据获取实战：useGetListDeleted Hook 完整指南与源码解析

Argo Workflows 4.1.0 新特性：使用 workflowTemplateRef 提交时自动打上 WorkflowTemplate 名称标签

easy-vibe 安全思维实战：XSS、SQL 注入与 CSRF 的攻防体系及上线前自检指南

更多资讯

vue-router 命名视图（Named Views）完全指南：多视图布局与嵌套命名视图实战

游戏UI动效伪造：付款码梗背后的视觉欺骗原理

@emotion/primitives-core 核心包解析：跨平台 CSS-in-JS 底层架构与版本演进全指南

React Bits 实战：用 Prop 驱动的顺序映射实现多品牌页面区块的 Display Order 变体

Ray on Kubernetes 平台事件（Platform Events）接入指南：从 RBAC 配置到 Dashboard 可视化的完整实践

Harness Engineering 里的 Prompt Chain 跑拆解任务：Key 用 TaoToken

今日更新

OneUptime 自定义探针（Custom Probe）部署实战：私网监控、代理配置与断连排障全指南

大众TL52625前端框架材料要求详解：从性能测试到落地执行

TiXL 浮点运算算子库 Lib.numbers.float 完全指南：44 个算子的参数详解、源码原理与实战串联

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？