内容
# Intelli UI
[](./LICENSE)
[](https://github.com/IntelliHelper/IntelliHelper-UI/actions/workflows/ci.yml)
[](https://ui.intellihelper.in)
[](https://www.npmjs.com/package/@intellihelper/cli)
**适用于 React 和 Next.js 的 Liquid Glass 组件库** — 复制并粘贴 Tailwind 组件，您拥有所有权，通过 CLI 安装，并通过 MCP 连接到 AI 编码代理。
## 关于
**Intelli UI**（由 [IntelliHelper](https://github.com/IntelliHelper) 提供）是一个开源的 **Liquid Glass** 设计系统：磨砂铬、富有表现力的内容面板和类似 shadcn 的工作流，以便组件能够出现在 *您的* 仓库中。交互式基元建立在 **[Radix UI](https://www.radix-ui.com/)** 之上，以实现无障碍和行为；Liquid Glass 样式、主题和所有权则归您所有。将其用于使用 Next.js + Tailwind 构建产品 UI，或通过官方 CLI、插件和 MCP 服务器驱动编码代理的安装。
| | |
| --- | --- |
| **文档和游乐场** | [ui.intellihelper.in](https://ui.intellihelper.in) |
| **快速入门** | [ui.intellihelper.in/getting-started](https://ui.intellihelper.in/getting-started) |
| **注册表** | [ui.intellihelper.in/r/registry.json](https://ui.intellihelper.in/r/registry.json) |
| **CLI** | [`@intellihelper/cli`](./packages/cli) |
| **SEO 攻略手册** | [docs/SEO-PLAYBOOK.md](./docs/SEO-PLAYBOOK.md) |
| **仓库** | [github.com/IntelliHelper/IntelliHelper-UI](https://github.com/IntelliHelper/IntelliHelper-UI) |
| **许可证** | [MIT](./LICENSE) |
| **贡献指南** | [CONTRIBUTING.md](./CONTRIBUTING.md) |
| **安全** | [SECURITY.md](./SECURITY.md) |
| **行为准则** | [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) |
| **支持** | [SUPPORT.md](./SUPPORT.md) |
---
## 什么是 Intelli UI？
Intelli UI（由 **IntelliHelper** 提供）是一个 **Liquid Glass** 设计系统和组件库：
- **80+ 个 React 组件**，使用 TypeScript 和 Tailwind CSS 构建
- **Radix UI** 作为底层，提供对话框、菜单、选项卡等可访问的基元
- **复制粘贴工作流** — 组件出现在 *您的* 代码库中（类似 shadcn 的所有权）
- **CLI** — `npx @intellihelper/cli` 初始化、添加、更新和列出组件
- **代理插件** ([IntelliHelper/agent-skills](https://github.com/IntelliHelper/agent-skills)) — 技能 + MCP + 斜杠命令，用于 Claude、Grok、Codex、Gemini
- **MCP 服务器** (`intellihelper-ui`) — Cursor、Claude Code、VS Code、Codex、OpenCode、Grok
- **实时游乐场** — 预览、源码和安装命令，位于 [ui.intellihelper.in](https://ui.intellihelper.in)
- **主题** — 单色、极光、日落、磨砂、海洋
---
## 快速开始（使用者）
在任何 React + Tailwind 项目中使用（推荐 Next.js App Router）：
```bash
npx @intellihelper/cli@latest init
npx @intellihelper/cli@latest add button card dialog
```
```tsx
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Hello</CardTitle>
</CardHeader>
<Button>继续</Button>
</Card>
);
}
```
**代理插件（推荐用于编码代理）：**
```bash
claude plugin marketplace add IntelliHelper/agent-skills
claude plugin install intellihelper-ui@intellihelper
grok plugin install IntelliHelper/agent-skills --trust
```
**仅限 MCP：**
```bash
npx @intellihelper/cli@latest mcp init --client cursor
# 或：claude | vscode | codex | opencode
```
插件：[IntelliHelper/agent-skills](https://github.com/IntelliHelper/agent-skills) · CLI 文档：[packages/cli/README.md](./packages/cli/README.md)
---
## 仓库结构
该仓库是一个 **pnpm + Turborepo** 工作区。
```
apps/
playground/ # Next.js 文档站点和组件注册表主机（ui.intellihelper.in）
native-playground/ # React Native 游乐场，用于 @intelli/ui-native
registry/ # 注册表元数据打包
packages/
ui/ # Web React 组件（@intelli/ui）
ui-native/ # React Native 组件（@intelli/ui-native）
cli/ # @intellihelper/cli + MCP 服务器
themes/ # 主题 CSS + ThemeProvider
tokens/ # 设计令牌
animations/ # 共享动画实用程序
utils/ # 共享实用程序（cn, focus-ring, …）
config/ # 共享 PostCSS / 全局 CSS 入口
eslint-config/ # 共享 ESLint 配置
typescript-config/ # 共享 TSConfigs
docs/
SEO-PLAYBOOK.md # 关键词映射、内容日历、技术 SEO 操作
```
### 应用
| 应用 | 包名 | 描述 |
| --- | --- | --- |
| **游乐场** | `playground` | 公共文档、演示、OG 图片、站点地图、`llms.txt`、RSS、`/r/*` 注册表 |
| **原生游乐场** | `native-playground` | Expo 风格的原生组件游乐场 |
| **注册表** | — | 注册表源 / 打包助手 |
### 包
| 包 | 角色 |
| --- | --- |
| `@intelli/ui` | Liquid Glass 网络组件 |
| `@intelli/ui-native` | 原生组件集 |
| `@intellihelper/cli` | 安装 CLI + MCP（`intellihelper-ui`） |
| `@intelli/themes` | 主题样式和提供者 |
| `@intelli/tokens` | 设计令牌 |
| `@intelli/utils` | 共享实用程序 |
| `@intelli/config` | 共享前端配置 |
| `@intelli/animations` | 动画 CSS |
---
## 开发此仓库
### 要求
- **Node.js** ≥ 18
- **pnpm** 9 (`packageManager`: `pnpm@9.0.0`)
### 安装
```bash
pnpm install
```
### 脚本（根目录）
```bash
pnpm dev # turbo dev（所有具有 dev 任务的包）
pnpm build # turbo build
pnpm lint # turbo lint
pnpm check-types # turbo typecheck
pnpm format # prettier write
pnpm native # 原生游乐场仅限
```
### 游乐场（文档站点）
```bash
pnpm --filter playground dev # http://localhost:3000
pnpm --filter playground build
pnpm --filter playground check-types
```
游乐场的 `prebuild` 步骤将公共注册表打包到 `apps/playground/public/r/`。
### CLI（本地）
```bash
pnpm --filter @intellihelper/cli build
# 然后通过 node packages/cli/dist/index.js 练习 … 或发布的 npx 包
```
---
## 公共 SEO 和发现端点
由游乐场应用（生产环境：`https://ui.intellihelper.in`）提供：
| 端点 | 目的 |
| --- | --- |
| `/sitemap.xml` | 机器站点地图 |
| `/sitemap` | HTML 站点地图 |
| `/robots.txt` | 爬虫规则 |
| `/llms.txt` | AI / LLM 站点摘要 |
| `/rss.xml` | 组件和文档馈送 |
| `/manifest.webmanifest` | PWA 清单 |
| `/r/registry.json` | 组件注册表 |
| `/categories/{category}` | 类别登陆页面 |
| `/components/{slug}` | 组件文档 |
策略、关键词映射和 12 周内容日历： **[docs/SEO-PLAYBOOK.md](./docs/SEO-PLAYBOOK.md)**。
---
## 主题
Intelli UI 提供多个 Liquid Glass 主题（例如 **mono**、**aurora**、**sunset**、**frost**、**ocean**）。主题 CSS 和 React `ThemeProvider` 位于 [`packages/themes`](./packages/themes)。游乐场公开了一个主题切换器，用于实时预览。
---
## 技术栈
| 层 | 堆栈 |
| --- | --- |
| **UI 组件** | React 19、TypeScript、Tailwind CSS 4 |
| **基元** | [Radix UI](https://www.radix-ui.com/) (`@radix-ui/react-*`) 用于无障碍、焦点和交互 |
| **样式系统** | Liquid Glass 令牌 + 主题（`@intelli/themes`、`@intelli/tokens`） |
| **文档/游乐场** | Next.js 16 |
| **工具** | Turborepo、pnpm 工作区、 `@intellihelper/cli`、MCP |
交互式组件（对话框、选择、下拉菜单、选项卡、折叠面板等）封装了 Radix 基元，并在其上层叠加了 Liquid Glass 样式/内容样式。某些表面（玻璃条、Markdown、数据表、AI 聊天等）是使用 Radix 以外的自定义构建的。
当您 `npx @intellihelper/cli add …` 时，注册表将安装匹配的 `@radix-ui/*` 包到 **您的** 项目中，连同组件源代码。
---
## 致谢
Intelli UI 建立在优秀的开源工作基础上：
- **[Radix UI](https://www.radix-ui.com/)** ([radix-ui/primitives](https://github.com/radix-ui/primitives)) — 无样式、可访问的 React 基元（MIT）。许多组件的行为和 ARIA 模式来自这些包；视觉设计是 IntelliHelper Liquid Glass。
- **[shadcn/ui](https://ui.shadcn.com/)** — 复制粘贴注册表 / CLI 所有权模型的灵感（不是其组件源代码的分支）。
- **React**、**Next.js**、**Tailwind CSS** 和 JS 工具生态系统的其余部分。
第三方包保留其自己的许可证；它们在每个包的 `package.json` 中声明，并通过 npm 提供。该仓库的自己的代码是 MIT — 请参阅 [License](#license)。
---
## 贡献
我们欢迎问题和拉取请求。请阅读：
- **[CONTRIBUTING.md](./CONTRIBUTING.md)** — 设置、工作流、组件检查清单
- **[CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md)** — 社区标准
- **[SECURITY.md](./SECURITY.md)** — 私人漏洞报告
贡献者的快速入门：
```bash
pnpm install
pnpm --filter playground dev
```
1. 从 `main` 分支
2. 在添加 UI 时保持组件目录 + 注册表同步
3. 新的公共组件应包含：目录条目、示例、安装路径和（对于文档）FAQ/相关链接
4. 在打开拉取请求前运行 `pnpm lint` 和 `pnpm check-types`
有关 CLI 行为的详细信息，请参阅 [packages/cli/README.md](./packages/cli/README.md)。支持选项：[SUPPORT.md](./SUPPORT.md)。
---
## 许可证
该项目根据 **[MIT License](./LICENSE)** 许可。
版权所有 © 2025–2026 IntelliHelper。
发布的包（包括 `@intellihelper/cli`）使用相同的 MIT 条款，除非包文件另有说明。
---
## 链接
- [文档](https://ui.intellihelper.in)
- [快速入门](https://ui.intellihelper.in/getting-started)
- [SEO 攻略手册](./docs/SEO-PLAYBOOK.md)
- [CLI 包](./packages/cli)
- [代理技能](https://github.com/IntelliHelper/agent-skills)
- [Radix UI](https://www.radix-ui.com/)
- [GitHub](https://github.com/IntelliHelper/IntelliHelper-UI)
- [问题](https://github.com/IntelliHelper/IntelliHelper-UI/issues)
- [安全建议](https://github.com/IntelliHelper/IntelliHelper-UI/security)
