Get started

ak-ui separates its Arknights-inspired design language into semantic tokens, CSS Core without a runtime, and Vue adapters you can copy into your project. Start with the AI Skill to choose a path for your project, or select a manual integration below.

AI SKILL / RECOMMENDEDAI-assisted integration

Preserve your brand and interaction foundation while AI selects Core, Registry or a headless adapter.

Agent Skills · any stackInstall the Skill →CSS CORE / UNIVERSALUse CSS directly

Copy example HTML and use the same stable classes in Vue, React or native pages.

0 runtime · CSS / SCSSContinue to installation ↓VUE ADAPTER / SOURCECopy Vue components

Install editable source with props, events and v-model through shadcn-vue Registry.

Vue 3 · editable sourceOpen the Registry →

Choosing a path:Start with the AI Skill. Import tokens.css for the design foundation alone, use full CSS Core for existing modules, or choose Vue Registry for typed interaction wrappers in Vue.

For agent-generated interfaces using structured messages, see the A2UI experiment for protocol adaptation and an interactive demonstration.

Install

The commands below pin the 1.0.0 stable release. Stable releases use npm's latest tag; next is reserved for prereleases.

pnpm

pnpm add @yunyoujun/ak-ui@1.0.0

npm

npm install @yunyoujun/ak-ui@1.0.0

yarn

yarn add @yunyoujun/ak-ui@1.0.0

Import CSS

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

To style existing headless components using only tokens:

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

You can also load CSS directly from a CDN:

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

Use CSS Core

Every module uses HTML classes as its interface. Copy the corresponding example and override --ak-* CSS variables as needed. For custom components, read Design tokens and Adapting headless components.

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>

Browse all modules in the component index, or install editable adapters with Vue Registry for a Vue project.

Unofficial project

ak-ui is an unofficial, hobby-driven design language study with no affiliation to Hypergryph. It does not aim to recreate specific game screens. Game names, images and related assets belong to their respective rights holders.

Language and appearance

The homepage, integration guides, design and development guides, and Registry API have corresponding Chinese and English pages. The language menu opens the corresponding translation when available, or the target language homepage otherwise. Detailed component references and full-screen demos remain in Chinese and are labeled in English navigation.

The docs support light and dark themes and persist your choice. Component demos retain their intended surfaces. The CSS library does not translate product content or manage application themes: supply localized labels through props, slots and your copied source, and adapt product colors through design tokens.