SuperAPI AI 工具集

openbb-design

设计与创作

查看项目

更新于 10-27 00:42

技能介绍

OpenBB Design 是 OpenBB Workspace 的前端界面设计技能,目标是产出功能完整、视觉精致、面向金融专业用户的生产级界面。其核心用途是指导在 OpenBB Workspace 这一金融数据平台中构建符合既有设计体系的 UI,而不是从零发明通用风格。

设计定位方面,资料明确受众为量化分析师、交易员等金融专业人士,用途是数据可视化、分析与决策,语气要求专业且独特、有高级感,美学为深色优先、信息丰富、精确排版、留白有目的。设计前需考虑该界面服务的金融工作流与决策、数据密度与清晰度的平衡、视觉层级以及和 OpenBB 设计系统的一致性。

主要能力包括:提供设计原则,如每个像素都要有存在价值、数据是主角、精确优先于个性、深色模式默认、性能即体验;列出需避免的通用 AI 审美,如硬编码十六进制颜色、随机字体、过度留白的卡片布局、拖慢数据消费的动画、过度圆角和不一致间距。技能还规定了构建前的强制检索顺序:先查 src/components/ds/,再查 src/components/ui/,只有不存在相似组件时才新建。

使用方式上,技能要求使用语义化颜色令牌而非 dark: 前缀,并提供两层色彩架构:静态原始色与随主题切换的语义令牌,后者覆盖背景、边框、文本、按钮、提示、链接、输入、下拉、标签页、标签、表格、滚动条等。强制浅色场景需改用静态原始色类。样式上要求仅用 Tailwind、用 cn() 处理条件类、使用预定义排版类,禁止内联样式,并优先复用 index.css 中已有的 obb-* 工具类。图标通过 Icon 组件以 id 引用,新增图标需经 SVGO 优化、转换为 symbol、插入 sprite 并重新生成类型。

适用场景为 OpenBB Workspace 内的金融数据界面开发、组件复用与 UI 审计。限制方面,资料未提供定价、安装方式、独立运行步骤或效果保证;该技能依赖特定项目目录结构与设计系统文件,脱离该环境无法直接套用。