Aoleme UI

当用户希望构建暗色系、赛博修仙风、霓虹感、玻璃拟态（glassmorphism）或游戏化界面（尤其在 React 与 Tailwind 项目中）时，使用该技能。

该技能提供一整套视觉系统、可复用的组件模式及具体实现指导，最适合用于仪表盘、游戏化页面、会员系统、活动页、状态面板以及沉浸式应用界面。

示例提示词

以下为典型匹配该技能的提示词：

• 使用 React 和 Tailwind 设计一个暗色霓虹风格的修炼进度追踪仪表盘。
• 将当前会员中心重设为赛博修仙风格的玻璃拟态界面。
• 构建一个游戏化个人主页：包含紫色辉光、液态进度条和玻璃质感卡片。
• 在不更改数据结构的前提下，将此普通后台管理页改造成玄幻科幻风格的活动页。
• 创建一个响应式优先的游戏化任务界面：含暗色面板、发光操作按钮及功绩状态指示器。

适用场景

当请求中明确提及以下一项或多项关键词时，请启用该技能：

• cyberpunk、cultivation、xianxia、mystical sci-fi、neon、glassmorphism
• 暗色系游戏化仪表盘或沉浸式活动页面
• 以紫色为主导的视觉系统，含发光表面与液态进度动效
• 需将现有 React 或 Tailwind UI 重构为此美学风格

除非用户明确要求，否则请勿将本技能强加于已有成熟设计系统的项目上。

首要阅读材料

实施变更前，请先检查技能目录下的以下文件：

• {baseDir}/resources/tailwind.config.js
• {baseDir}/resources/global.css

将其作为源参考材料；建议有选择地合并与适配，而非盲目全量复制。

执行流程

应用该技能时，请严格遵循以下顺序：

1. 检查目标项目的前端技术栈，确认其是否使用 Tailwind、React 或纯 CSS。
2. 阅读 {baseDir}/resources/tailwind.config.js，仅将所需的 theme.extend 配置项（如颜色、字体、动画、关键帧）合并至目标项目的 Tailwind 配置中。
3. 阅读 {baseDir}/resources/global.css，仅提取目标 UI 实际需要的 CSS 变量与工具类。
4. 依据本技能所定义的视觉规范与组件模板构建或重构 UI。
5. 完成前务必验证响应式表现、文字对比度、滚动行为及触控目标尺寸。

适配规则

应选择性应用该设计系统，并完整保留宿主应用的原有结构。

• 优先扩展项目现有的设计 Token，而非整体替换。
• 即使项目未使用全部辅助类，也应复用本系统的调色板与动效语言。
• 保持视觉密度的合理性：辉光、毛玻璃模糊与动效仅作点缀，避免滥用。
• 若应用已存在组件，请优先对其重设样式，而非新建抽象组件。

切勿盲目导入 {baseDir}/resources/global.css 中全部全局样式。特别注意：

• 除非产品本身即为全屏体验，否则不得保留 body { overflow: hidden; }
• 除非界面确有需求，否则不得全局禁用文本选中（user-select: none）
• 未经性能评估，不得对大型滚动列表添加高开销的模糊（backdrop-filter: blur()）或滤镜动画效果

视觉语言

采用以下核心视觉线索：

• 背景：极深色、近黑色表面，具备分层纵深感
• 主色调：以玄妙紫（mystical purple）作为主导品牌色
• 强调色：功绩金（merit gold）、生命绿（health green）、危险红（danger red），可选冷调青绿（cool teal）
• 表面处理：半透明玻璃面板、磨砂覆盖层、柔和边框
• 动效：浮游、微光闪烁、扫描、液态流动等克制型动态表现
• 排版：标题采用粗体现代展示字体，正文内容使用清晰易读的常规字体

核心组件模式

优先采用以下基础构建模块：

• 胶囊形/圆角操作按钮，带紫色渐变与辉光效果
• 玻璃质感卡片，具细微边框与状态徽章
• 磨砂质感输入框，具备强聚焦态（focus state）
• 液态进度条，用于能量、成长、状态或完成度计量
• 高亮图标容器，用于呈现统计数据、奖励、状态及修仙隐喻元素

质量基准

所有基于本技能的实现均须保障以下质量要求：

• 暗色背景下的文字具备可读性对比度
• 触控目标尺寸不小于 44×44 像素
• 动画主要基于 opacity 与 transform 属性实现
• 在桌面端与移动端均具备良好响应式表现
• 审慎使用 will-change、重度模糊（blur()）及滤镜动画

输出预期

在代码中应用该技能时，请确保输出包含：

• 简要说明本次实现所采用的视觉系统组成部分
• 明确指出是合并了 Tailwind Token，还是仅借鉴了 CSS 模式
• 注明为适配宿主应用设计系统而做出的任何有意偏离

资源概览

• {baseDir}/resources/tailwind.config.js：定义颜色、字体、动画与关键帧
• {baseDir}/resources/global.css：包含 CSS 变量、玻璃工具类、液态动效、文字辉光及性能优化辅助类

请将本技能视作一套设计系统参考与实施指南，而非用于替代目标项目架构的强制指令。