手动接入 ak-ui

ak-ui 把受《明日方舟》启发的设计语言拆成语义 Token、无运行时 CSS Core，以及可以直接复制进项目的 Vue Adapter。推荐先让 AI Skill 根据项目选择接入路径，也可以手动选择下面任一通道。

AI SKILL / RECOMMENDED智能接入与编排

保留现有品牌和交互基础，由 AI 选择 Core、Registry 或 headless 适配。

Agent Skills · any stack安装 Skill →CSS CORE / UNIVERSAL直接接入样式

复制示例 HTML，在 Vue、React 或原生页面中使用同一套稳定类名。

0 runtime · CSS / SCSS继续安装 ↓VUE ADAPTER / SOURCE复制 Vue 组件

通过 shadcn-vue Registry 安装带属性、事件和 v-model 的可编辑源码。

Vue 3 · editable source打开 Registry →

选择建议：优先使用 AI Skill；只需要设计基础时引入 tokens.css；复用现有模块时使用完整 CSS Core；Vue 项目需要类型和交互封装时选择 Vue Registry。

需要由 Agent 通过结构化消息生成界面时，可查看 A2UI（实验），了解协议适配与交互演示。

安装

以下命令固定为 1.0.0 正式版，使用 npm 的 latest 标签。next 保留给预发布版本。

pnpm

pnpm add @yunyoujun/[email protected]

npm

npm install @yunyoujun/[email protected]

yarn

yarn add @yunyoujun/[email protected]

引入 CSS

import '@yunyoujun/ak-ui/style.css'

如果只需要 Token 为现有 headless 组件换肤：

import '@yunyoujun/ak-ui/tokens.css'

也可以直接通过 CDN 引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yunyoujun/[email protected]/dist/ak-ui.min.css">

使用 CSS Core

所有模块都以 HTML 类名作为 interface。复制对应示例，然后按需覆盖 --ak-* CSS variables。自定义组件请先阅读设计 Token与 Headless 适配协议。

PREVIEW / BUTTON/BASEBase button

SOURCE / HTML

<button class="ak-button ak-font-serif">开始唤醒</button>
<button class="ak-button ak-button--outline">开始唤醒</button>
<button class="ak-button ak-button--action">开始行动</button>

前往组件索引查看全部模块；Vue 项目也可以继续使用 Vue Registry 安装可编辑 Adapter。

非官方项目

ak-ui 是非官方、兴趣驱动的设计语言研究，与鹰角网络没有关联。项目不以复刻具体游戏页面为目标；游戏名称、图像及相关素材的权利归原权利人所有。

语言与明暗主题

首页、接入指南、设计与开发指南及 Registry API 均有中文与 English 对应页面。语言菜单优先打开当前页面的译文；尚无译文时返回目标语言首页。详细组件参考和全屏演示仍以中文为准，英文导航会标明这些中文入口。

文档支持明暗主题并保存你的选择，组件演示保留各自的展示底色。CSS 库不会自动翻译业务内容或接管应用主题：请通过组件属性、插槽和消费项目中的源码提供本地化标签，通过设计 Token 适配产品配色。