Secretmakewomenwomen/auric-ui

选用指南

AI 根据 README 整理 · 2026/10/30 00:12:28

使用方式

通过 npm 安装组件库，并在 React 19 项目中导入使用；也可安装配套 Skill 并通过 Agent 辅助开发。

查看 README 依据

在已有 **React 19 + React DOM 19** 项目中安装： ```bash npm install auricui@next ``` ### 2. 安装 Skill，让 AI 帮你搭建界面 AuricUI 配套提供编程 Agent Skill，包含组件选择、API 查询、主题配置、业务接入指南和可编译示例。安装后，可以直接描述你想要的页面，让 Agent 按组件库的实际接口实现。 Skill 采用按需读取：入口保留关键约束，Agent 先搜索组件，再查询单个组件的参数，需要时才加载一个示例或对应的业务指南。参数优先来自项目实际安装的版本，避免一次把整个组件索引和全部示例放入上下文。 在你的应用项目根目录执行： ```bash npx auricui-skill@latest ``` 默认安装到当前项目的 `.agents/skills/auricui`。如果希望在 Codex 的多个项目中使用，可以选择全局安装： ```bash npx auricui-skill@latest --global ``` 安装后刷新 Agent 的技能列表或新开会话，在对话中使用 `$auricui` 并说明需求，例如： ```text 使用 $auricui，为当前项目搭建一个 AI 助手工作台： 左侧是会话列表，中间是聊天内容，底部是消息输入区。

import { AuricUIProvider, CardButton } from 'auricui'; import 'auricui/styles.css'; export default function App() { const [theme, setTheme] = useState<'dark' | 'light'>('dark'); return ( <AuricUIProvider theme={theme}> <main style={{ minHeight: '100vh', padding: 24, background: 'var(--bg)', color: 'var(--text)', }} > <CardButton weight="primary" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} > 切换到{theme === 'dark' ? '浅色' : '深色'}主题 </CardButton>

部署要求

需要 React 19 和 React DOM 19；源码开发需要 Node.js 22.12+、npm 和 tar，完整验证还需 Python 3。

查看 README 依据

在已有 **React 19 + React DOM 19** 项目中安装： ```bash npm install auricui@next ``` ### 2. 安装 Skill，让 AI 帮你搭建界面 AuricUI 配套提供编程 Agent Skill，包含组件选择、API 查询、主题配置、业务接入指南和可编译示例。安装后，可以直接描述你想要的页面，让 Agent 按组件库的实际接口实现。 Skill 采用按需读取：入口保留关键约束，Agent 先搜索组件，再查询单个组件的参数，需要时才加载一个示例或对应的业务指南。参数优先来自项目实际安装的版本，避免一次把整个组件索引和全部示例放入上下文。 在你的应用项目根目录执行： ```bash npx auricui-skill@latest ``` 默认安装到当前项目的 `.agents/skills/auricui`。如果希望在 Codex 的多个项目中使用，可以选择全局安装： ```bash npx auricui-skill@latest --global ``` 安装后刷新 Agent 的技能列表或新开会话，在对话中使用 `$auricui` 并说明需求，例如： ```text 使用 $auricui，为当前项目搭建一个 AI 助手工作台： 左侧是会话列表，中间是聊天内容，底部是消息输入区。

基础组件与 Agent 组件通过 props 和回调连接业务。部分 Chat / Studio 组合组件需要配置服务适配器，由应用提供模型调用、项目持久化和媒体处理等能力。文档中的完整场景用于展示组合效果，这些服务行为使用本地模拟。 ## 运行文档 文档站提供组件预览、可复制示例、属性说明和主题配置，以及聊天工作台、专业编辑器、项目管理、应用设置、模板与技能库五个完整场景。 克隆仓库后，在根目录执行： ```bash npm ci npm run build npm run dev ``` 打开 **<http://127.0.0.1:5178/#/start>**。 源码开发需要 Node.js 22.12+、npm 和 `tar`；完整验证还需要 Python 3。推荐使用 `.nvmrc` 指定的 Node.js 22。首次构建会自动生成组件库、Skill 安装包及文档下载资源，无需 npm 登录或 Docker。 后续开发可直接运行 `npm run dev`。修改公开 API 或文档示例后，执行 `npm run docs:generate` 更新文档数据。 ## 开发与验证 | 命令 | 用途 | | --- | --- | | `npm run dev` | 启动文档开发服务器 |