ak-ui

ak-ui

使用 ak-ui 的工业几何、战术信息层级和终端式反馈，构建原创界面。将 ak-ui 视为一套设计规范和 CSS 基础，而不是复刻特定《明日方舟》页面的要求。

阅读相关参考资料

• 在做出视觉设计决策之前，务必阅读 references/design-language.md 和 references/tokens.md。
• 对于《明日方舟》官方网站、其导航／新闻布局或提取审查，请阅读 references/official-site.md。区分观察到的源值、ak-ui 适配和未实现的模式。
• 对于入场、交错、计数递增、媒体或视差效果，请阅读 references/motion.md。
• 对于可运行的组件组合和控制器设置，请阅读 references/examples.md。
• 对于整页导航、移动端菜单、档案／媒体选择器、真实资源进度或 ak-ui >=1.1.0 中的粒子场，请阅读 references/site.md。使用公开的 /site 控制器或 Registry site；不要凭空编造官方着色器，也不要假设仅靠 CSS 就能安装交互。
• 在适配原生控件或任何无样式／无头库时，请阅读 references/headless-components.md。
• 如果项目使用 Reka UI 或需要 Vue 无头基础组件，也请阅读 references/reka-ui.md。
• 在宣布工作完成之前，请阅读 references/quality-checklist.md。

更改前先检查

尽可能通过项目本身确定以下信息，而不是询问用户：

1. 框架、包管理器、样式系统和现有设计令牌。
2. 现有的无障碍基础组件、无头库和 ak-ui 安装情况。
3. 涉及范围内的组件或页面及其交互状态。
4. 值得保留的现有品牌颜色、字体、间距和内容层级。

只有当缺失的产品选择会对结果产生实质影响时才询问。不要仅为使用文档中的示例而替换现有的无头库。

选择样式强度

遵循明确指定的模式：

• accent：保留当前品牌和布局；添加 ak-ui 字体排印、信号、焦点样式和克制的几何元素。
• system：将完整的设计语言应用于表面、层级、密度、几何元素和状态。默认使用此模式。
• terminal：加入沉浸式构图、不对称命令平面、遥测、纵深感和更强的动态效果。仅在用户要求或明确暗示时使用，因为它可能改变页面构图。

在实现摘要中注明所选模式。不要将模式理解为配色主题。

选择最精简的集成路径

按以下顺序操作：

1. 在适用时复用现有的 ak-ui CSS 类和组件。
2. 对于自定义或仅使用无头组件的界面，导入 @yunyoujun/ak-ui/tokens.css，并使用语义令牌为现有行为添加样式。
3. 对于 ak-ui Registry 中已有的 Vue 组件，优先使用可编辑的 Registry 适配器。
4. 对于缺失的行为，优先使用项目现有的无头基础组件，其次使用浏览器原生语义。
5. 仅当 Vue 交互需要 Reka UI 的无障碍功能和状态管理机制时才添加 Reka UI。不要为仅用于呈现的元素添加它。

使用项目的包管理器。所有样式都必须通过 .ak-*、项目自有的组件类或 data-ak-ui 启用；不要添加全局重置样式，也不要覆盖无关元素。

实施设计契约

• 将现有品牌值映射到语义化的 --ak-* 令牌，再考虑创建新配色，以保留用户的品牌风格。
• 对重复使用的设计决策，使用公开的 ak-ui 令牌。不要到处散落硬编码的颜色、间距、时长或切角尺寸。
• 将行为、焦点管理、键盘导航、ARIA 和状态保留在原生／无头原语中。将这些原语渲染出的部分及状态属性映射到 ak-ui 样式。
• 优先采用一个鲜明的几何设计元素和清晰的信息层级，而非装饰每一处边缘。
• 保持状态颜色具备明确功能且易于区分。绝不要只用颜色表示状态。
• 使用原创或用户提供的图像。不要获取、复制或仿制游戏素材、徽标、角色美术或特定屏幕构图。
• 除非用户明确要求进行破坏性重设计，否则保留现有的公共 API。

执行所请求的工作流

集成

安装 CSS 包或 Registry 适配器，添加范围最小的导入，渲染一个有代表性的组件，并在实际构建中验证该导入。

构建

首先确立层级和响应式布局。组合现有原语，添加项目内容，然后应用选定的样式强度。避免使用演示式占位遥测数据，除非它能传达真实的产品信息。

扩展

在编写样式之前，先编写组件契约：组成部分、状态、键盘行为、焦点归属和响应式约束。复用或封装现有原语；将呈现与行为分开。

审查

报告设计契约的具体违规项；如有文件位置，也请一并指出。只有用户要求实施时，才修复问题。优先处理语义、交互缺失、令牌偏差、层级可读性差和移动端溢出问题，而非外观差异。

验证

运行项目相关的 lint、类型检查、构建和测试。如果可以使用浏览器工具，请检查桌面端和移动端布局，以及适用状态下的键盘焦点、打开／关闭、选中、禁用、无效、加载和减少动态效果。

不要仅凭编译通过就声称视觉效果已完成。如果无法进行浏览器检查，请说明这一限制，并列出质量检查清单中剩余的检查项。