Cyber Fantasy UI 技能

在本仓库的早期版本中，也称为 Aoleme UI 和 Cyber Xianxia UI 技能。

当用户需要深色、赛博幻想风、霓虹感、玻璃拟态（glassmorphism）或游戏化界面（尤其在 React 与 Tailwind 项目中）时，请使用该技能。

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

示例提示词

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

• 为一个奇幻进度追踪器，在 React 和 Tailwind 中设计一个深色霓虹风格的仪表盘。
• 将此会员中心重设为赛博幻想风格的玻璃拟态界面。
• 构建一个游戏化的个人资料页，包含紫色辉光、液态进度条和玻璃质感卡片。
• 在不更改数据结构的前提下，将此普通管理页面转化为神秘科幻风格的活动页。
• 创建一个响应式优先（mobile-first）的游戏化任务界面，含深色面板、发光操作按钮和功绩状态指示器。
• 将此应用重设为修真主题的深色 UI，采用玻璃卡片与发光状态徽章。

适用场景

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

• cyberpunk、cyber fantasy、mystical sci-fi、dark fantasy、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. 完成前须验证响应式表现、文字对比度、滚动行为及点击目标尺寸是否符合标准。

适配规则

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

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

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

• 除非产品本身是全屏体验，否则不得保留 body { overflow: hidden; }
• 除非界面确实需要禁用文本选择，否则不得全局禁用 user-select
• 未经性能评估，不得对大型滚动列表添加高开销的模糊或动画滤镜效果

视觉语言

请遵循以下核心视觉线索：

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

核心组件模式

推荐优先采用以下构建模块：

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

质量基准

所有基于该技能的实现均须满足以下质量要求：

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

输出要求

当您在代码中应用该技能时，请在输出中说明：

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

资源概览

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

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