内容
<p align="center">
<a href="https://veritheme.com">
<img src="https://veritheme.com/og-image.png" alt="Veritheme — Figma、代码和 AI 的统一数据源" width="800">
</a>
</p>
# Veritheme
**66 个精心设计的 UI 组件。** 纯 CSS 实用类、语义化设计令牌、暗黑模式和原生 JavaScript 包 — 无需框架，无需构建步骤。
**[veritheme.com](https://veritheme.com)** · [文档和实时演示](https://veritheme.com) · [主题生成器](https://veritheme.com/themes/)
---
## 什么是 Veritheme？
Veritheme 是一个与框架无关的 UI 组件库，以纯 CSS 和原生 JavaScript 交付。你可以使用 `vt-` 实用类来样式化你的标记，并使用 `data-*` 属性来获得交互行为 — JavaScript 包会自动连接一切。无需 React，无需 Tailwind 运行时，无需构建工具。
它基于一个 **2 层设计令牌系统** （原始调色板 → 语义化令牌），在浅色/深色模式和三个预装主题之间保持颜色、间距、字体和半径的一致性。相同的令牌格式驱动了网站、Figma 插件和导出的自定义主题 — 因此设计和代码永远不会分离。
## 安装
```bash
npm install veritheme
```
或者直接从 CDN 使用，无需安装：
```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/veritheme/veritheme.min.css">
<!-- JS（在 DOMContentLoaded 上自动初始化交互组件） -->
<script src="https://cdn.jsdelivr.net/npm/veritheme/veritheme.min.js"></script>
```
使用构建工具：
```js
import 'veritheme/veritheme.min.css';
import 'veritheme'; // 初始化交互组件
```
## 包内容
| 文件 | 描述 |
|------|-------------|
| `veritheme.min.css` / `veritheme.css` | 所有组件 + vt- 实用类 + 设计令牌（压缩/可读） |
| `veritheme.min.js` / `veritheme.js` | 用于交互组件的原生 JavaScript，零依赖 |
| `themes/*.json` | 主题令牌文件 — `default`、`editorial`、`rounded-sans` |
| `theme-manifest.json` | 可用主题索引（名称、标签、字体、暗黑模式支持） |
包导出：`veritheme/css`、`veritheme/js/unminified`、`veritheme/themes/*`、`veritheme/theme-manifest`。
## 用法
### 实用类
每个实用类都使用 `vt-` 前缀：
```html
<div class="vt-flex vt-items-center vt-gap-4 vt-p-4 vt-rounded-lg vt-bg-neutrals-surface">
<span class="vt-text-fg-primary vt-text-sm vt-font-medium">你好</span>
</div>
```
### 暗黑模式
在 `<html>` 上添加 `.dark`：
```html
<html class="dark">
```
### 主题
在 `<html>` 上添加 `data-theme` — 选择 `default`、`editorial` 或 `rounded-sans`：
```html
<html data-theme="editorial">
```
### 交互组件
标记使用 `data-*` 属性作为钩子；JavaScript 包会自动初始化它们：
```html
<div data-accordion="single">
<div data-accordion-item>
<button data-accordion-trigger>标题</button>
<div data-accordion-content>内容</div>
</div>
</div>
```
## 主题和主题生成器
三个主题随包附带（每个主题都有浅色和深色变体）：
- **默认** — Inter，干净且中性
- **编辑** — Source Serif 4，编辑/长篇
- **圆角无衬线** — Manrope，柔和且友好
想要创建自己的主题？ **[主题生成器](https://veritheme.com/themes/)** 允许你选择颜色（浅色 + 深色）、字体、边框半径、边框宽度和间距比例 — 并实时重新样式化每个组件。导出一个可立即使用的 CSS + JavaScript 包，或下载一个 `theme.json` 文件，直接放入 Figma 插件中，让你的设计文件重新主题以匹配。 一个文件驱动代码和设计。
## Figma 插件
**[Veritheme — 设计令牌和 UI 组件](https://www.figma.com/community/plugin/1610343587499165100)** 是一个用于 Figma 的设计系统生成器。选择你需要的组件，自定义你的主题，并直接在你的文件中生成生产就绪的设计令牌和 UI 组件。
**它能做什么：**
- 生成 Figma 变量 — 颜色、字体、间距、半径、边框、阴影
- 自动创建浅色和深色模式集合
- 包含 45 个 UI 组件：按钮、表单控件、导航、反馈和数据展示
- 允许你在生成前自定义主题 — 品牌颜色、中性色、字体和语义令牌
- 输出一个结构化、基于令牌的组件库，可直接在你的设计中使用
**适用对象：** 希望在不从头开始构建设计系统的情况下，拥有一个一致的、基于令牌的基础的设计师和产品团队。
它与主题生成器共享相同的 `theme.json` 格式，因此在代码中设计的主题会重新主题化你的 Figma 库以匹配。
## 与 AI 代理（MCP）一起使用
Veritheme 附带一个官方 MCP 服务器， **[`@veritheme/mcp-server`](https://www.npmjs.com/package/@veritheme/mcp-server)** — AI 助手（Claude Code、Cursor、任何 MCP 客户端）可以查询真实组件、设计令牌、主题和 HTML 片段，而不是猜测类名：
```bash
# Claude Code
claude mcp add veritheme -- npx -y @veritheme/mcp-server
```
```json
// 任意 MCP 客户端配置
{ "mcpServers": { "veritheme": { "command": "npx", "args": ["-y", "@veritheme/mcp-server"] } } }
```
工具：`list_components`、`get_component`、`get_tokens`、`get_theme`、`get_snippet`、`search`。
该网站还提供 [veritheme.com/llms.txt](https://veritheme.com/llms.txt) — 一个紧凑的、适合 LLM 的库映射，供网络浏览代理使用。
## Veritheme 生态系统
| 包/仓库 | 描述 |
|----------------|-----------|
| [`veritheme`](https://www.npmjs.com/package/veritheme) | 此包 — CSS + JavaScript 分发包 |
| [`@veritheme/mcp-server`](https://www.npmjs.com/package/@veritheme/mcp-server) | 向 AI 代理公开组件/令牌/主题的 MCP 服务器 |
| [Veritheme Figma 插件](https://www.figma.com/community/plugin/1610343587499165100) | 在 Figma 中生成设计令牌 + 45 个 UI 组件 |
| [veritheme.com](https://veritheme.com) | 文档、实时演示和主题生成器 |
## 许可证
MIT © Siarhei Tarasenko
