@design-os/react-antd

Design OS → Ant Design ThemeConfig 桥接 — 30 行脚本，零运行时

安装

npm install @design-os/react-antd

使用

将 Design OS design.spec.yml 转换为 Ant Design 5.x ThemeConfig：

import { themeFromSpec } from '@design-os/react-antd';
import { ConfigProvider } from 'antd';

// 运行时读取 DSL
const antdTheme = themeFromSpec('./design.spec.yml');

// 或使用预生成的 JSON
import tokens from '@design-os/tokens/json';
const antdTheme = themeFromSpec(tokens);

function App() {
  return (
    <ConfigProvider theme={antdTheme}>
      {/* Ant Design 组件自动使用 Design OS 品牌色 */}
      <Button type="primary">提交</Button>
    </ConfigProvider>
  );
}

映射表

| Design OS Token | Ant Design ThemeConfig | |------|------| | tokens.color.primary[500] | token.colorPrimary | | tokens.color.semantic.success | token.colorSuccess | | tokens.radius.md | token.borderRadius | | tokens.spacing.xl | token.controlHeight | | tokens.typography.fontFamily.sans | token.fontFamily |

典型场景

CRM+Grow：theme.ts 中手工定义的值由 Design OS DSL 驱动，品牌色变更只需改 design.spec.yml → 重新生成 → 整个 CRM 界面自动变色。

License

MIT