组件与 Playground

在同一个入口中查找可复用的 CSS 模块，或体验 ak-ui 的完整界面。接入项目请从 AI Skill、CSS Core、Vue Registry 或 A2UI（实验）开始。

完整演示

TERMINAL / INTERACTIVE主终端 Playground

切换职业立绘、配色与精英装饰，调节景深和透视，体验档案、资源浮层与任务弹窗。

打开主终端 →FULLSCREEN / TERMINAL全屏终端

进入完整画布，体验主界面构图与交互。手机请横屏浏览。

进入全屏 →FULLSCREEN / LOADING全屏加载演示

单独查看启动加载画面、进度轨道与状态过渡。

体验加载 →

交互实验	可以体验什么
景深动画播放器	播放、暂停、拖动与循环分层动画，并切回指针控制
Vue Registry 交互	按钮事件、数值输入、进度联动、Tabs 和 Segmented
A2UI 实验	逐条接收消息、修改指挥代号、回传操作并更新界面；本地模拟，不执行真实部署

这里汇集已有的可交互示例，暂不提供在线代码编辑器。主终端素材的来源与许可见素材说明。

组件索引

按用途浏览组件预览并复制对应 HTML 源码；色彩与字体规范见本页下方。

分组	组件
基础规范	色彩与字体 · 辅助类 · 图标
操作与导航	按钮 · 按钮组 · 表单 · 滑块 · 链接导航 · 终端导航 · 分页
布局与容器	卡片 · 面板 · 分割线
数据与状态	新闻列表 · 计数器 · 进度与仪表 · 理智 · 状态标记 · 关卡
反馈与浮层	对话框 · 浮层与提示 · 战术通知 · 加载
视觉与媒体	图像与视频 · 效果 · 物体

Color 色彩

色彩层级参考游戏中的道具稀有度，并同时导出为 --ak-color-* CSS variables。

LOW#9c9c9c

BASIC#d8dd5a

PRIMARY#4aabea

SECONDARY#cfc2d1

ADVANCED#f1c644

SOURCE / HTML

html

<div class="ak-color-grid">
  <div class="ak-color-swatch bg-low"><strong>LOW</strong><code>#9c9c9c</code></div>
  <div class="ak-color-swatch bg-basic"><strong>BASIC</strong><code>#d8dd5a</code></div>
  <div class="ak-color-swatch bg-primary"><strong>PRIMARY</strong><code>#4aabea</code></div>
  <div class="ak-color-swatch bg-secondary"><strong>SECONDARY</strong><code>#cfc2d1</code></div>
  <div class="ak-color-swatch bg-advanced"><strong>ADVANCED</strong><code>#f1c644</code></div>
</div>

<style>
  .ak-color-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    width: min(720px, 100%);
    gap: 4px;
  }

  .ak-color-swatch {
    display: flex;
    min-height: 140px;
    padding: 18px;
    color: #111315;
    flex-direction: column;
    justify-content: space-between;
  }

  .ak-color-swatch strong {
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.12em;
  }

  .ak-color-grid .ak-color-swatch > code {
    width: fit-content;
    padding: 4px 6px;
    color: #111315;
    background: rgb(243 244 239 / 72%);
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  @media (max-width: 620px) {
    .ak-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak-color-swatch { min-height: 0; padding: 8px 10px; gap: 4px; }
    .ak-color-grid .ak-color-swatch > code { padding: 2px 4px; font-size: 0.625rem; }
    .ak-color-swatch:last-child { grid-column: 1 / -1; }
  }
</style>

Variable	Value
`--ak-color-low`	`#9c9c9c`
`--ak-color-basic`	`#d8dd5a`
`--ak-color-primary`	`#4aabea`
`--ak-color-secondary`	`#cfc2d1`
`--ak-color-advanced`	`#f1c644`

Typography 字体

标题与正文分别提供衬线和无衬线辅助类。

明日方舟

罗德岛战术界面 / RHODES ISLAND

行动开始

保持通讯，等待下一条指令。

SOURCE / HTML

html

<div>
  <div class="ak-font-serif ak-text--title">明日方舟</div>
  <p class="ak-font-serif">罗德岛战术界面 / RHODES ISLAND</p>
  <div class="ak-font-sans-serif ak-text--title">行动开始</div>
  <p class="ak-font-sans-serif">保持通讯，等待下一条指令。</p>
</div>

css

.ak-font-serif {
  font-family: "Noto Serif SC", serif;
}

.ak-font-sans-serif {
  font-family: "Noto Sans SC", Roboto, Arial, sans-serif;
}

道具色彩参考

组件与 Playground ​

完整演示 ​

组件索引 ​

Color 色彩 ​

Typography 字体 ​

道具色彩参考 ​