Skip to content

README.md

Latest commit

 

History

History
200 lines (151 loc) · 7.57 KB

README.md

File metadata and controls

200 lines (151 loc) · 7.57 KB
Raw

Libra Design

极致审美的设计语言，专为Go/Rust量身定制。 多语言金融设计系统——一份令牌，全语言消费。

JS/TS 设计系统是红海（50+ 竞品），Go/Rust 领域目前是零。Libra 从这里打进去。

Libra 是一套面向金融数据的多语言设计系统：Go 原生色值引擎 + Rust 原生组件 + React 组件库 + MCP AI 集成。核心资产不是 React 组件——是色值体系 + 双主题混合引擎 + 金融审美，抽离为语言无关的 JSON，从 Go 单点突破。

设计令牌 JSON（语言无关）
    ├── Go  track  → go-tokens / go-templ / go-cli / go-mcp
    ├── Rust track → libra-tokens / libra-leptos（crates.io）
    └── TS  track  → @libra-design/tokens / theme / react / cli

为什么选 Go/Rust 原生？

维度 npm 生态 Libra Go/Rust
语言绑定 仅 JS/TS Go · Rust · TS 三语言
安装方式 npm install（200MB node_modules） go get 零依赖 / cargo add
CLI 体积 Node 运行时 + node_modules 单二进制 3MB（go-cli）或 6.5MB（go-server），无外部依赖
颜色计算 JS 单线程 Go/Rust 原生性能，批量插值零开销
MCP Server npm 包 + npx 启动 Go 单二进制，10ms 冷启动
后端集成 需要 Node 桥接 Go 服务直接 import，同进程零开销
AI Agent 消费 需安装 npm 工具链 MCP Server 单文件部署

核心理念：Go/Rust 开发者不应该为了用一套设计令牌而引入整个 Node 生态。Libra 让你在 main.go 或 lib.rs 里直接 import 色值常量，不需要 npm install。

包矩阵

包 语言 功能 安装
@libra-design/tokens TS CSS 变量 + 类型定义 npm i @libra-design/tokens
@libra-design/theme TS 双主题混合引擎 npm i @libra-design/theme
@libra-design/react TS 64 个 React 金融组件（K线/深度图/订单簿/ConfigurableGrid 列编排表格） npm i @libra-design/react
@libra-design/cli TS libra init/add 命令 npx @libra-design/cli init
@libra-design/mcp-server TS MCP Server for AI npx @libra-design/mcp-server
go-tokens Go 色值常量 + LerpColor + CSS 生成 go get github.com/goodie1972/go-tokens
go-templ Go 40 个金融 templ 组件 go get github.com/goodie1972/go-templ
go-cli Go 单二进制 libra init CLI go install github.com/goodie1972/go-cli/cmd/libra@latest
go-mcp Go MCP Server 单二进制 go install github.com/goodie1972/go-mcp@latest
go-server Go 单二进制金融仪表盘（6.5MB，含 40 组件） git clone → go build
libra-tokens Rust crate 色值+主题+CSS cargo add libra-tokens ✅ crates.io
libra-leptos Rust 20 个 Leptos 组件 cargo add libra-leptos ✅ crates.io

Go 开发者 — 5 秒上手

# 一键安装（独立仓库）
go install github.com/goodie1972/go-cli/cmd/libra@latest
libra init  # → tokens.css

# 在 Go 项目中使用色值常量
go get github.com/goodie1972/go-tokens
import "github.com/goodie1972/go-tokens"

func main() {
    upColor := tokens.ColorUp  // "#ef5350"
    css := tokens.GenerateCSS()
}
// Go templ 金融组件
@components.Button("default", "lg", false, nil) { 买入 }
@components.PriceDisplay(128.50, 2.35, "up")
@components.StockCard("600519", "贵州茅台", 1680.00, 2.15, "1.25B")

Rust 开发者 — 5 秒上手

cargo add libra-tokens
cargo add libra-leptos
use libra_tokens::colors::dark;
use libra_tokens::lerp::lerp_color;

let bg = dark::BG_ROOT;  // "#0c0c0e"
let mid = lerp_color("#0c0c0e", "#ffffff", 0.5);
// → "#858586"

图标系统 — 三叠层策略

不重复造轮子，也不随大流。三层图标库通过统一 <Icon> 组件对 AI 和开发者隐藏底层差异：

import { Icon } from '@libra-design/react';

<Icon name="trend-up" />              // T1 Tabler IconTrendingUp
<Icon name="search" source="lucide" /> // T3 Lucide Search
<Icon name="warning" weight="bold" />  // T2 Phosphor WarningBold
层级 库 职责
T1 主力 Tabler Icons 标准 UI 图标，2px 描边（默认）
T2 辅助 Phosphor Icons 6 种粗细，视觉层级区分
T3 兼容 Lucide 生态迁移适配

60+ 语义别名预置：trend-up、search、close、candle、wallet 等直接可用。

字体系统 — 西文精确 + 中文特色

@libra-design/theme 包定义三个 CSS 变量，字体文件由消费方按需加载：

:root {
  --font-sans: 'Inter', 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --font-kai: 'LXGW WenKai', 'KaiTi', 'STKaiti', serif;
}
字体 用途 来源
Inter UI 正文/标题 @fontsource/inter
JetBrains Mono 数字/代码 @fontsource/jetbrains-mono
Noto Sans SC 中文正文 @fontsource/noto-sans-sc
LXGW WenKai 中文品牌（可选） @fontsource/lxgw-wenkai

设计哲学

原则 含义
一页一主角 每页只有一个视觉重心，K 线页主角是图表
数据优先 装饰服务于数据，不抢戏
间距即语言 4px 为基数，间距大小 = 信息亲密度
减法制造张力 层次靠明度差和间距，不靠颜色多

风格锚定：Linear（暗色体系）+ Stripe（金融排版）+ Bloomberg Terminal（金融数据基因）

色彩系统

A 股惯例 — 红涨绿跌。全界面只有涨（红）和跌（绿）两种有彩色，其余全部中性。

Token 色值 用途
--up #ef5350 涨/阳线/正值
--down #26a69a 跌/阴线/负值
--flat #9e9e9e 平盘

双主题混合

通过 gamma-aware 颜色插值，在暗色和亮色端点之间平滑过渡：

暗色 (t=0)  ──────── 柔光 (t=0.7) ──────── 亮色 (t=1)
#0d0e10      渐进过渡    #f8f9fb      渐进过渡    #ffffff
  • 背景色：gamma-aware 插值（sqrt 加权）
  • 文字色：线性 RGB 插值 + 五次方加速曲线
  • 边框：gamma-aware 插值 + 平方加速曲线

项目结构

libra/
├── tokens/                  # design-tokens.json（语言无关，单一事实源）
├── packages/
│   ├── tokens/              # @libra-design/tokens — CSS 变量 + TS 类型
│   ├── theme/               # @libra-design/theme — 双主题混合引擎
│   ├── react/               # @libra-design/react — 64 个 React 金融组件
│   ├── cli/                 # @libra-design/cli — TS CLI
│   ├── mcp-server/          # @libra-design/mcp-server — TS MCP Server
│   ├── go-tokens/           # Go 原生色值引擎（零 npm 依赖）
│   ├── go-templ/            # Go templ 金融组件（服务器端渲染）
│   ├── go-cli/              # Go 单二进制 CLI（libra init）
│   ├── go-mcp/              # Go 单二进制 MCP Server
│   ├── go-server/           # Go 单二进制金融仪表盘
│   ├── rust-tokens/         # libra-tokens crate（crates.io）
│   └── rust-leptos/         # libra-leptos crate（crates.io）
└── docs/                    # 设计文档

许可

MIT