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点击查看免费下载本文以 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表面色板负责构建界面层级全部为近黑色系TokenHex用途Background#0D0D0D主画布Surface#141414抬升面板、卡片Surface Hover#1A1A1A面板悬停态Border#2A2A2A面板分隔线2.2 数据色板Data Palette数据色板负责传达行情语义是交易终端的信息核心TokenHex用途Primary#00D4AA正值、买入信号、成功Gain#00D4AA价格上涨Loss#FF4757价格下跌Warning#FFB800风险警示、保证金预警Neutral#808086无变化、次级数据Text Primary#FFFFFF高对比主文本Text Secondary#AAAAAA标签、元数据Text Tertiary#828282时间戳、网格标签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 个令牌契约评分 100excellent每个令牌都标注了对应 tokens.css 的声明行号如--bg对应tokens.css:7。这为换肤不破坏契约提供了机器可校验的保证——components.manifest.json 的 token 审计也确认了已声明且被引用与已声明未使用如--danger、--warn、--motion-base的完整清单undeclaredReferenced引用了但未声明为空说明令牌契约闭合无漏引。3. 排版规则数字用等宽标签用无衬线交易终端的排版遵循数字可对齐、标签可辨识的原则所有数值数据使用等宽字体 JetBrains Mono标题与标签使用 Inter。完整排版阶梯如下角色字号字重行高字体Display28px6001.0JetBrains MonoHeading16px6001.2InterBody14px4001.3JetBrains MonoLabel12px5001.0Inter大写Micro10px4001.0JetBrains Mono为保证目录抽取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-xs11px至--text-4xl56px、行高--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-2xl28px展示数值、.metric span使用--muted展示指标名页面标题区域采用--text-4xl56px显示标题以下用--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); }要点flexoverflow-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交易终端不使用阴影表达层级而是依赖两个手段表面色阶用 Surface#141414相对 Background#0D0D0D的亮度差传达浮起感细边框用 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. 禁区清单Dos and DontsDESIGN.md 给出了六条硬性约束是评估生成结果是否跑偏的判据务必逐条校验禁止仅用颜色传达买卖信号必须同时配方向图标或文字标签禁止对数据值做装饰性动画——交易者需要即时、稳定的读数禁止使用圆角——只保留锐利精确的美学禁止使用浅色模式——交易终端运行在昏暗环境单列最多展示 5 个价格点超出会造成认知过载、降低决策速度禁止使用渐变——只允许纯色填充。USAGE.mddesign-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 收窄为 60pxmedia (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接入流程如下先读 USAGE.md理解包契约再读 DESIGN.md掌握视觉意图、约束与反模式即本文主体内容将 tokens.css 粘贴进第一个 artifact 的style块再编写组件 CSS——确保所有样式基于同一套语义令牌避免在:root令牌块之外散落裸 hex 值需要组件清单时使用 components.manifest.json它记录了 8 个组件组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout以及 48 个选择器、26 个类、19 个元素需要精确选择器或状态时打开 components.html需要视觉核对时打开 preview 下的colors.html、typography.html、spacing.html预览页。包结构遵循 OpenDesign 设计系统包的统一形态见 design-systems/README.mddesign-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 fixturetype: bundledcraft字段建议附加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 技能设计系统媒体生成【免费下载链接】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点击查看免费下载相关推荐OpenDesign 中的 Nike 风格设计系统指南单色零售界面、排版层级与 Agent 提示词规范OpenDesign 中的 Nike 风格设计系统指南单色零售界面、排版层级与 Agent 提示词规范 本指南以仓库 design systems/nike/AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Kraken 设计系统实战指南紫罗兰金融暗色界面的视觉规范与 Token 落地OpenDesign 中的 Kraken 设计系统实战指南紫罗兰金融暗色界面的视觉规范与 Token 落地 本指南以 design systems/krakeAI 应用人工智能AI 技能设计系统媒体生成Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南 本文以 Open Design 仓AI 应用人工智能AI 技能设计系统媒体生成上一篇RetinaFace部署指南如何在生产环境中稳定运行人脸检测服务下一篇H3框架核心API详解构建现代化Node.js服务端应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考