发现
广场由AI 自主驱动AI代码级安全认证AI 实时算法推荐AI双重算法版权保护
极简热量追踪：管理体重与卡路里
这款基于 SparkVertex 平台构建的极简热量追踪应用，采用单文件、本地优先架构，无需云端依赖。它整合了 React 与 ECharts 实现交互式数据可视化，支持体重、摄入与运动热量的多维度记录与统计分析，所有数据均安全存储于本地。
扫码
扫码体验
80
忍者数据库：忍者数据管理与战力分析平台
NINJA_DB 是一款基于 React 构建的忍者数据管理终端。它提供实时数据统计、多维度筛选（等级/属性）和本地存储功能，并支持深色模式与国际化切换，界面采用毛玻璃与 CRT 扫描线等赛博朋克视觉元素。
10 0
¥10创建一个忍者主题的数据管理面板应用。核心功能是展示、筛选和管理忍者角色卡片，支持新增、删除和搜索忍者条目。
关键交互包括：通过侧边栏按等级和属性筛选忍者；点击“新增忍者”按钮打开表单模态框以创建新条目；在卡片上点击删除按钮可移除忍者。应用支持中英文切换和亮/暗主题切换。
视觉风格采用极客/赛博朋克美学，包含玻璃态面板、CRT扫描线效果、自定义滚动条和打字机光标动画。使用单色代码配色方案（如`geek-accent`、`geek-string`）和等宽字体，营造出终端数据界面的沉浸感。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
80
像素打地鼠游戏：经典街机
这是一款名为《像素打地鼠》的现代网页游戏。它采用React框架构建，实现了像素复古美学与流畅的交互体验。游戏核心亮点包括动态难度系统、合成音效、触觉反馈以及完整的游戏状态管理。其响应式设计确保了跨设备的无缝操作，并利用本地存储记录最高分。
20 0
免费**核心功能 Prompt：**
创建一个复古像素风格的“打地鼠”游戏。核心目标是快速点击随机从洞中出现的动物（地鼠、兔子）来得分，并避开炸弹。游戏包含计时器、分数系统和等级提升机制。
**关键交互逻辑：**
1. 动物和炸弹会随机从3x3的网格洞中弹出，玩家需在它们消失前点击。
2. 点击普通动物（🐹）得10分，稀有动物（🐰）得30分，点击炸弹（💣）则扣分并减少时间。
3. 游戏有30秒倒计时，得分每满100分升一级，难度随之增加（出现更快、停留更短、炸弹概率更高）。
4. 游戏包含开始、暂停、重新开始和返回主菜单的完整流程。
**视觉风格关键词：**
复古像素风、CRT扫描线效果、高对比度霓虹色调（深紫背景、亮色元素）、块状像素阴影、像素字体。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
80
手绘记账本：轻松管理收支与预算
手绘记账本是一款采用 React + ECharts 构建的创意记账应用。它通过拟真手绘 UI 与便签交互，提供直观的消费分类与预算进度可视化。支持移动端自适应，数据实时本地存储，让财务管理兼具趣味与效率。
1 0
免费**核心功能 Prompt：**
创建一个**手绘风格的个人记账应用**，核心目标是让用户以直观、轻松的方式记录和管理日常收支。
**核心功能与目标：**
1. 实现**支出/收入**的快速记录，支持金额、分类、日期和备注。
2. 提供**月度预算设置与进度追踪**，直观显示超支预警。
3. 通过**饼图可视化**展示消费结构，帮助用户分析支出分布。
**关键交互逻辑：**
1. 主界面展示当月收支概览、预算进度和图表。
2. 点击“记一笔”按钮弹出模态框，用户选择类型（支出/收入）、输入金额、选择分类图标并填写信息后保存。
3. 所有交易记录自动保存至本地，并实时更新统计数据和图表。
**视觉风格关键词：**
手绘质感、纸质纹理背景、便利贴卡片、胶带装饰、手写字体、柔和色彩、不规则边框、轻微旋转元素。整体营造出**真实、亲切的纸质笔记本体验**。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
81
交互式元素周期表：探索化学元素属性与数据
这款交互式元素周期表应用基于 React 构建，采用响应式设计，适配移动端。它集成了详尽的元素数据，包括原子质量、电子排布等科学信息，并支持中文显示。应用内置错误边界处理，确保稳定运行，界面采用深色主题与蓝图网格，提供现代、专业的浏览体验。
3 0
免费创建一个交互式元素周期表应用。核心功能是展示所有化学元素，用户点击任一元素卡片即可查看其详细信息（如原子序数、原子量、类别、发现者、中文名及简介）。关键交互逻辑包括：元素卡片网格布局、点击卡片弹出详细信息面板、面板可关闭。视觉风格采用深色主题（slate-900背景）、科技感蓝图网格、等宽字体和现代化卡片设计，整体呈现简洁、专业且具有科技美感的界面。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
81
极简西语记忆：高效背单词与智能复习工具
极简西语记忆是一款基于间隔重复算法的词汇学习应用。它采用智能复习队列，前十个单词随机复习，之后自动触发完整顺序复习。应用支持 CSV/JSON 批量导入，提供实时学习统计，并采用深色主题与毛玻璃设计，确保沉浸式学习体验。
23 0
¥5**核心功能 Prompt：**
创建一个极简、沉浸式的西班牙语单词记忆应用。核心目标是帮助用户通过智能算法高效记忆单词。
**核心功能与目标：**
- 应用采用“新词学习 + 间隔复习”模式。用户首先学习新单词，系统随后根据算法（如前10词随机复习，之后完整顺序复习）自动安排复习。
- 核心交互是“卡片学习”：展示西班牙语单词，用户思考后点击揭示中文/英文释义，然后选择“认识”或“不认识”，系统据此更新单词状态并安排下一次出现。
**关键交互逻辑：**
1. **学习流程**：首页展示今日进度，点击“开始背诵”进入学习会话。展示西语单词 -> 用户点击或等待后揭示释义 -> 用户点击“认识”(✓) 或“不认识”(✗) -> 系统根据当前学习阶段（如新词数量）和用户反馈，动态决定下一个呈现的单词（新词或特定复习词）。
2. **数据管理**：支持通过粘贴 CSV/JSON 格式批量导入单词库（西语、中文、英文、等级）。
3. **视图切换**：底部导航可在“学习主页”、“数据统计”和“设置”间切换。
**视觉风格关键词：**
深色主题、极简主义、毛玻璃效果、大字体聚焦、无干扰界面。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
80
数理宝可梦大乱斗：像素风对战游戏
这是一款基于React开发的数理对战游戏，采用像素风格设计。产品支持暗色模式自适应，集成Tailwind CSS动画系统，提供抖动、闪烁、滑入等流畅特效。具备实时HP状态显示和触摸优化功能，通过数学计算机制实现宝可梦对战策略，为移动端提供沉浸式游戏体验。
5 0
免费# Role (角色设定)
你是一位资深全栈工程师兼游戏UI/UX设计专家，精通React开发、数学游戏设计和像素风格界面实现。你擅长创建响应式、交互丰富的教育游戏应用。
# Project Overview (项目概述)
这是一个结合数学计算与宝可梦战斗的互动教育游戏，玩家通过解答数学题来发动宝可梦技能攻击敌人。
# Core Features (核心功能)
## 用户交互逻辑
- **游戏状态管理**：实现开始界面、战斗界面、数学题界面、胜利/失败界面的完整状态流转
- **点击交互**：
- 开始按钮触发游戏初始化
- 技能按钮点击显示对应难度的数学题
- 数字按钮(0-9)用于输入数学答案
- 提交按钮验证答案正确性
- 重新开始按钮重置游戏状态
- 关闭按钮退出数学题界面
- **战斗动画**：
- 宝可梦攻击时的轻微弹跳动画(bounce-slight)
- 敌人被击中时的震动效果(shake)
- HP减少时的闪烁提示(flash)
- 新敌人入场时的滑入动画(slide-in-right/slide-in-left)
- **实时反馈**：答案正确/错误时的即时视觉反馈
## 数据处理逻辑
- **数学题生成系统**：
- 根据技能难度(easy/medium/hard)生成对应题目
- Easy：个位数加减法，确保减法结果不为负
- Medium：两位数加减法或简单乘法(2-9乘法表)
- Hard：包含乘法的混合运算
- **伤害计算**：
- 正确答案：造成技能基础伤害
- 错误答案：造成1点固定伤害
- 类型相克系统(电克水等)
- **HP管理系统**：
- 实时更新玩家和敌人HP
- HP条颜色动态变化(绿色>黄色>红色)
- HP为0时触发战斗结束逻辑
## 状态管理
- **游戏流程状态**：
- 'start': 初始界面
- 'battle': 战斗进行中
- 'math': 数学题解答界面
- 'victory': 胜利界面
- 'defeat': 失败界面
- **战斗状态**：
- 当前敌人索引管理
- 玩家和敌人HP状态
- 当前选择的技能信息
- **数学题状态**：
- 当前题目和正确答案
- 用户输入答案
- 答题正确性状态
## 具体算法规则
- **敌人轮换系统**：击败一个敌人后自动切换到下一个
- **胜利条件**：击败所有5个敌人
- **失败条件**：玩家HP归零
- **答案验证**：严格比较用户输入与正确答案
- **输入限制**：最大3位数字输入，支持退格删除
# UI/UX Design (界面与体验)
## 布局结构
- **主容器**：全屏深色背景(#0f172a)
- **游戏区域**：居中显示，最大宽度限制
- **战斗界面**：
- 上方：敌人信息(图片、名称、等级、HP条)
- 中央：玩家宝可梦展示
- 下方：技能选择按钮区域
- **数学题界面**：覆盖式弹窗，包含题目显示和数字键盘
## 配色方案
- **主色调**：
- 背景：深蓝(#0f172a)
- 文字：白色
- GBA风格配色：
- 屏幕色：#f8f9fa
- 边框色：#475569
- 功能色：红(#ef4444)、蓝(#3b82f6)、绿(#22c55e)、黄(#eab308)
- 宝可梦主题色：
- 主红：#ff0000
- UI灰：#383838
- 背景灰：#F8F8F8
- **类型颜色**：
- 火系：text-red-500
- 水系：text-blue-500
- 草系：text-green-500
- 妖精：text-pink-400
- 普通：text-yellow-600
## 动画效果
- **自定义动画**：
- bounce-slight：轻微上下浮动，用于攻击动作
- shake：左右震动，用于受击效果
- flash：快速闪烁，用于HP变化提示
- slide-in-right/left：从两侧滑入，用于敌人登场
- **过渡效果**：
- HP条宽度变化：0.5s缓动过渡
- 背景色变化：0.3s缓动过渡
## 组件细节
- **HP进度条**：渐变颜色(绿→黄→红)，圆角设计
- **技能按钮**：图标+文字，hover状态变化
- **数字键盘**：网格布局，按压反馈
- **宝可梦图片**：像素化渲染(image-rendering: pixelated)
- **文字样式**：复古文字阴影(retro-text类)
# Mobile Adaptation (移动端适配)
## Viewport配置
```html
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
```
## 触摸优化
- 禁用文本选择：
```css
body {
-webkit-user-select: none;
user-select: none;
}
```
- 移除点击高亮：
```css
* { -webkit-tap-highlight-color: transparent; }
```
## 滚动处理
- 隐藏滚动条但保持滚动功能：
```css
::-webkit-scrollbar { display: none; }
```
## 响应式布局
- 使用Flexbox实现自适应布局
- 按钮和交互元素最小触摸尺寸：44px
- 使用rem/vw单位而非固定像素
- 图片和容器使用百分比宽度
# Technical Requirements (技术要求)
## 技术栈
- **React 18.2.0**：使用函数组件和Hooks
- **Tailwind CSS**：配置自定义主题和颜色
- **Lucide React**：图标组件库
- **Babel Standalone**：浏览器端JSX转换
- **ESM.sh**：CDN模块加载
## 代码结构
- **模块化导入**：React和相关库通过ESM导入
- **组件化设计**：清晰的函数组件结构
- **数据分离**：宝可梦数据、技能数据独立配置
- **工具函数**：数学题生成、伤害计算等独立函数
## 性能优化
- 图片使用CDN加速
- 动画使用CSS transitions而非JavaScript
- 避免不必要的重渲染
- 使用useRef管理DOM引用
# Constraints (约束条件)
## 功能约束
- 必须支持5个预设敌人的连续战斗
- 数学题难度必须与技能强度对应
- 必须实现完整的类型相克系统
- 游戏状态必须完整保存和恢复
## 技术约束
- 必须使用提供的CDN资源，不依赖本地构建
- 必须兼容移动端Safari和Chrome
- 必须实现像素完美的GBA风格视觉效果
- 所有交互必须有无障碍支持
## 设计约束
- 保持宝可梦官方视觉风格
- 数学题界面必须清晰易读
- 战斗反馈必须即时且明显
- 颜色使用必须符合WCAG可访问性标准
## 代码质量
- 使用语义化的变量命名
- 添加必要的错误边界处理
- 确保代码在严格模式下正常运行
- 提供完整的游戏流程测试用例
这个Prompt包含了所有必要的技术细节、设计规范和业务逻辑，确保生成的代码能够完美复刻原产品的所有功能和用户体验。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
79.6
极简足浴下单：在线预订足疗与按摩服务
这是一款专为足浴服务设计的极简下单应用。它采用现代暗色UI，支持响应式设计，提供清晰的三级项目菜单、实时购物车管理和模拟微信支付流程。应用基于React构建，具备流畅的动画和本地状态管理，专注于提升到店服务的下单效率与体验。
40 0
免费**核心功能 Prompt：**
创建一个极简风格的足浴/按摩服务下单应用。核心功能是让用户浏览分层级服务项目（大类→子类→具体项目），将项目加入购物车并调整数量，最后模拟微信支付完成订单。
**关键交互逻辑：**
1. **四标签导航**：项目浏览、购物车、历史订单、个人中心。
2. **三级菜单浏览**：左侧为服务大类导航，右侧展示选中大类的子类及具体项目卡片（含名称、价格、时长、描述）。
3. **购物车管理**：在购物车页面可增减项目数量、清空购物车。底部固定显示合计金额和醒目的“微信支付”按钮。
4. **模拟支付流程**：点击支付后显示加载状态，成功后生成历史订单并清空购物车，自动跳转至订单页。
**视觉风格关键词：**
深色主题、极简主义、无圆角直角设计、高对比度（黑白为主）、紧凑布局、无干扰沉浸感。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
81
极简待办清单：高效任务管理与时间规划工具
极简待办是一款基于 React 构建的现代化任务管理应用。它采用 Material Design 3 设计语言，支持深色模式自适应与本地数据持久化。应用具备流畅的动画交互、移动端优化的底部操作栏，并提供任务筛选、一键清空等高效功能。
7 0
¥1**核心功能 Prompt：**
创建一个极简待办清单应用。核心功能是让用户**添加、标记完成/未完成、筛选（全部/待办/已完成）和删除任务**。数据需通过本地存储持久化。
关键交互逻辑包括：1) 点击右下角浮动按钮，从底部弹出模态表单添加新任务；2) 点击任务左侧复选框或文本区域切换完成状态；3) 通过底部导航栏在三个筛选视图间切换；4) 在“已完成”视图中提供一键清空所有已完成任务的选项；5) 支持跟随系统或手动切换的深色/浅色主题。
视觉风格采用**Material Design 3 (M3) 设计语言**，强调圆角、层级阴影和流畅的微交互动画。界面整体保持**极简、干净**，使用柔和的配色方案，并确保在移动设备上具有原生般的体验。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
80
喵喵指挥家：乐理术语大挑战，跟着节奏猫咪学音乐
《喵喵指挥家》是一款交互式乐理学习应用，通过游戏化问答帮助用户掌握音乐术语。应用采用响应式设计，支持暗色模式与流畅动画，内置分难度题库与实时计时挑战，结合视觉反馈与粒子特效提升学习沉浸感。
12 0
免费# 1. Role & Goal (角色与目标)
- **专家角色**: 交互式教育游戏前端架构师、动效与游戏化体验设计师、移动端性能优化专家。
- **核心目标**: 创建一个沉浸式、游戏化的乐理术语学习应用。核心体验在于通过“限时答题”机制制造紧张感与成就感，结合精致的视觉反馈（动效、粒子效果）和渐进式难度，将枯燥的乐理知识转化为一场有趣的冒险。最终产品必须达到“移动端原生应用级”的流畅度与交互响应。
# 2. Project Essence (项目本质)
- **一句话概括**: 一款以“节奏猫咪”为主题，通过限时选择题挑战来学习音乐术语的移动端渐进式网页应用。
- **核心价值主张**: 将专业乐理知识（意大利语术语）的解码过程游戏化，通过即时反馈、视觉奖励和难度分级，降低学习门槛，提升记忆乐趣。
# 3. Detailed Features (功能细节 - 核心)
### **交互逻辑**
1. **启动流程**: 用户打开应用 -> 展示带有动画猫咪和音符的启动页 -> 点击“开始冒险”按钮 -> 平滑过渡至主菜单。
2. **主菜单交互**:
- **难度选择**: 点击三个难度卡片之一，被选中的卡片会高亮（粉色边框、阴影、背景色），并显示一个星星图标（使用 `layoutId` 实现平滑移动效果）。
- **开始游戏**: 点击“开始游戏”按钮，应用当前选中的难度，以缩放动画进入游戏界面。
- **打开术语表**: 点击“术语表”按钮，以底部上滑模态（Spring 动画）进入术语表界面。
3. **游戏核心循环**:
- **题目展示**: 进入游戏后，立即根据难度生成一道题目。题目区域（含义）以 `scale` 和 `y` 位移动画出现。
- **选项交互**: 四个选项以网格布局展示。用户点击任一选项：
- **正确**: 选项按钮立即变为绿色背景，播放粒子特效（confetti），得分增加（基础分10 + 连击奖励），连击数+1，显示短暂正确反馈后，题目区域以退出动画消失，新题目以进入动画出现。
- **错误**: 错误选项变红半透明，正确选项高亮为绿色（但半透明），生命值-1，连击数归零。如果生命值>0，1秒后生成新题；如果生命值=0，0.5秒后触发游戏结束。
- **计时器**: 顶部进度条实时递减（每100ms更新一次）。颜色在剩余时间低于30%时变为红色。计时归零自动判为错误答案。
- **暂停**: 点击右上角暂停按钮，游戏计时停止，弹出居中模态框，提供“继续”和“退出”选项。
- **生命值**: 以三个心形图标表示，充满色代表存活，灰色代表失去。
4. **术语表交互**:
- **分类过滤**: 顶部有一排可水平滚动的分类按钮（全部、速度、力度、表情、技法）。点击任一按钮，该按钮变为粉色背景，下方列表立即过滤并展示对应术语。
- **返回**: 点击左上角返回箭头，以向下滑出动画返回主菜单。
5. **结果页交互**:
- 根据得分显示不同徽章（👑, 🌟, 🎵）。
- 点击“再来一次”以相同难度重新开始游戏。
- 点击“返回主页”回到主菜单。
### **数据逻辑**
1. **题库 (`MUSIC_DATA`)**:
- 结构: `{ id, term, meaning, category, level }`。
- 难度分级: `level` 为 1（初级）、2（中级）、3（高级）。
- 出题逻辑: 游戏进行时，只会从 `level <= 当前游戏难度` 的术语中随机抽取题目和干扰项。这确保了难度选择的实际意义。
2. **难度配置 (`LEVEL_CONFIG`)**:
- 包含每级的名称、颜色、背景色和**答题时间（秒）**。时间直接影响计时器的递减速度。
3. **游戏状态与计分**:
- **得分**: 初始为0。每答对一题：`得分 += 10 + (combo * 2)`。连击 (`combo`) 从0开始，答对+1，答错归零。
- **生命值**: 初始为3，答错一题-1，归零则游戏结束。
- **计时器**: 初始值为100（百分比）。每100ms减少 `100 / (LEVEL_CONFIG[level].time * 10)`，确保在配置的时间内从100%减至0%。
4. **视图状态 (`view`)**:
- 控制整个应用界面的状态机：`'splash'` -> `'menu'` -> `('game' | 'dictionary')` -> `'result'` -> `'menu'`。
### **隐性逻辑**
1. **防重复点击**: 在答题后、`feedback` 状态为 `'correct'` 或 `'wrong'` 期间，所有选项按钮被禁用 (`disabled`)，防止用户快速连续点击。
2. **计时器暂停**: 当游戏暂停 (`isPaused`) 或正在显示答题反馈 (`feedback`) 时，计时器间隔被清除，停止倒计时。
3. **选项高亮逻辑**:
- 答错时，不仅错误选项变红，**正确选项也会以绿色半透明形式显示**，起到教学作用。
- 视觉状态通过动态CSS类名管理，确保清晰。
4. **组件卸载清理**: 在 `GameScreen` 的 `useEffect` 中返回清除计时器间隔的函数，防止内存泄漏。
5. **动画协调**: 使用 `AnimatePresence` 的 `mode="wait"` 确保题目切换时，退出动画完成后再播放进入动画。
6. **移动端滚动锁定**: `body` 样式设置 `overscroll-behavior: none` 防止过度滚动带来的背景露出。
### **输入输出**
- **输入**: 用户触摸/点击事件。
- **输出**: 视觉变化（动画、颜色）、状态更新（分数、生命）、声音（无声，但预留了图标）、粒子效果（confetti）。最终输出为游戏得分。
# 4. UI/UX Design System (设计系统)
### **视觉风格**
- **核心风格**: **Neo-glassmorphism with Cute Aesthetics**。深色背景搭配毛玻璃（背景模糊）卡片和半透明边框，营造沉浸感和深度。同时融入明亮、可爱的渐变色和圆润元素（圆角、猫咪emoji），形成专业与趣味的结合。
- **设计原则**: 高对比度确保可读性，大量使用阴影和光晕创造层次感。
### **配色方案**
- **背景与基础**:
- 深色背景: `#0f172a` (Tailwind `slate-900`)
- 卡片背景: `#1e293b` (Tailwind `slate-800`)
- 文字主色: `#f8fafc` (Tailwind `slate-50`)
- 文字副色: `#cbd5e1` (Tailwind `slate-400`)
- **可爱主题色 (在 `tailwind.config` 中扩展)**:
- 粉色: `#fb7185` (`cute-pink`)
- 紫色: `#a78bfa` (`cute-purple`)
- 青色: `#22d3ee` (`cute-cyan`)
- 黄色: `#fde047` (`cute-yellow`)
- 玫瑰红: `#f43f5e` (`cute-rose`)
- **功能色**:
- 正确: `#4ade80` (Tailwind `green-400`)
- 错误: `#f87171` (Tailwind `red-400`)
- 警告/低时间: `#ef4444` (Tailwind `red-500`)
### **动效细节**
1. **微交互**:
- **按钮**: 所有按钮都有 `active:scale-95` 和 `motion.whileTap={{ scale: 0.95 }}` 的按压效果。
- **选项卡片**: 悬停 (`hover:bg-white/10`) 和点击反馈。
2. **页面/模块过渡**:
- 使用 `framer-motion` 的 `motion.div` 配合 `AnimatePresence`。
- **进入游戏**: `initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}`
- **进入术语表**: 从底部滑入 (`initial={{ y: '100%' }}`) 并带有弹簧动画 (`type: "spring"`)。
- **题目切换**: 退出动画 (`exit={{ scale: 0.8, opacity: 0, y: -20 }}`) 和进入动画 (`initial={{ scale: 0.8, opacity: 0, y: 20 }}`)。
3. **持续动画**:
- **启动页猫咪**: 缓慢旋转 `[0, 10, -10, 0]`，周期4秒，无限循环。
- **启动页音符**: 上下浮动 (`y: [0, -20, 0]`)，周期2秒，无限循环。
- **进度条**: 宽度线性减少，通过 `motion.div` 的 `animate` 属性驱动。
- **背景光晕**: 使用 `animate-pulse` 类。
### **布局结构**
- **根容器**: `<div id="root">` 内渲染整个 `App`。
- **App容器**: 固定最大宽度 `max-w-md`，居中 `mx-auto`，全高 `min-h-screen`，深色背景。
- **屏幕容器**: 每个屏幕（Splash, Menu, Game等）都是占据全高度的容器 (`h-full`)，内部使用 Flexbox 进行排版。
- **游戏界面层级**:
1. 顶部状态栏 (Flex, 生命/分数/暂停)
2. 计时条 (绝对定位宽度变化)
3. 主内容区 (Flex-1, 居中)
- 题目卡片 (居中，较大内边距)
- 选项网格 (`grid-cols-2`, `gap-4`)
4. 暂停模态框 (绝对定位，全屏，`z-50`)
# 5. Mobile Experience (移动端极致体验)
### **视口设置**
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
```
- `viewport-fit=cover`: 确保内容覆盖整个屏幕，包括刘海屏区域。
- `user-scalable=no`: 禁用双指缩放，保持游戏界面稳定。
### **触控优化**
- `body { -webkit-user-select: none; user-select: none; }`: 禁止文字长按选中。
- `body { -webkit-tap-highlight-color: transparent; }`: 移除移动端点击时默认的灰色高亮。
- **点击热区**: 所有按钮和可点击选项的尺寸均通过 `padding` 控制，确保高度或最小尺寸 >= 44px。
- **滚动条隐藏**: `::-webkit-scrollbar { display: none; }` 和自定义 `scrollbar-hide` 类。
### **适配策略**
- **布局**: 主要使用 Flexbox 和 CSS Grid (选项的 `grid-cols-2`)。
- **单位**: 主要使用 `rem` (通过Tailwind) 和 `%`、`vw/vh`。关键容器宽度使用 `max-w-md` 限制在大屏手机上的最大宽度。
- **安全区域**: 关键底部按钮容器使用 `pb-safe` 类（需在Tailwind中配置或使用 `padding-bottom: env(safe-area-inset-bottom)`），避免被手机底部指示条遮挡。
- **全屏控制**: 使用 `h-full`、`min-h-screen` 确保内容撑满视口。
# 6. Technical Stack & Constraints (技术栈与约束)
### **核心库**
- **React 18.2.0**: 用于构建组件化UI。
- **React DOM 18.2.0**: 用于渲染。
- **Tailwind CSS 3.x**: 通过CDN引入，用于原子化CSS样式。
- **Lucide React Icons 0.263.1**: 提供一套精致的SVG图标。
### **第三方库 (均通过 esm.sh CDN 导入)**
- **framer-motion 10.16.4**: 提供所有动画和手势支持。
- **canvas-confetti 1.6.0**: 用于答题正确时的粒子庆祝效果。
- **babel-standalone 7.23.5**: 用于在浏览器中直接编译JSX。
### **代码规范**
- **单文件HTML**: 所有代码（HTML, CSS, JS, JSX）集中在一个 `.html` 文件中。
- **无Markdown**: 代码中不包含任何Markdown语法。
- **模块化结构**:
- 配置与数据常量定义在顶部。
- 通用组件 (`Button`) 紧随其后。
- 屏幕组件 (`SplashScreen`, `GameScreen`, `MainMenu`, `Dictionary`, `ResultScreen`) 按逻辑顺序排列。
- 主应用控制器 (`App`) 在最后，负责状态管理和路由。
- **ES Modules**: 使用 `type="text/babel" data-type="module"` 和 `import` 语句管理依赖。
# 7. Edge Cases & Robustness (边界与鲁棒性)
### **网络延迟**
- **依赖加载**: 所有关键库（React, Framer Motion）均从 `esm.sh` CDN 加载，该CDN支持ES模块，并具有良好的全球可用性。但应用本身无加载状态处理，依赖浏览器缓存。
- **数据**: 所有数据（音乐术语）内嵌在JS中，无网络请求，不受延迟影响。
### **非法输入/状态处理**
- **游戏难度**: 通过状态管理，确保 `gameLevel` 始终为 1、2 或 3。
- **题目生成**: `generateQuestion` 函数使用 `useCallback` 记忆化，并确保 `availableTerms` 数组不为空（数据是静态的，所以永远非空）。
- **计时器**: 使用 `useRef` 存储计时器ID，并在组件卸载或依赖变化时严格清理 (`clearInterval`)。
- **暂停状态**: 暂停时，计时器停止，按钮交互依然可用但会导向正确的处理逻辑（继续或退出）。
### **性能优化**
- **防抖/节流**: 用户点击操作无需防抖，因为每次答题后都有明确的反馈状态 (`feedback`) 来阻止快速连续点击。计时器使用 `setInterval`，频率固定为100ms，属于轻量操作。
- **虚拟列表**: 术语表数据量很小（<30条），无需虚拟列表。
- **动画性能**: 使用 `framer-motion` 进行硬件加速的CSS变换（`transform`, `opacity`），避免触发重排或重绘的属性。
- **图片/资源**: 无图片，使用Emoji和SVG图标，体积小，渲染快。
- **代码分割**: 由于是单文件应用，未做代码分割。但所有第三方库都是按需从CDN加载的ES模块。
---
### **终极 Prompt**
你是一位顶尖的交互式教育游戏前端架构师和动效设计师。你的任务是严格遵循以下规格，重新构建一个名为“喵喵指挥家 - 乐理大挑战”的**单文件HTML移动端PWA游戏**。
**核心目标**：创造一个沉浸式、游戏化的乐理学习体验，将意大利语音乐术语的记忆过程转化为一场紧张、有趣、视觉反馈丰富的冒险。最终产品必须在移动端达到原生应用般的流畅度与交互质感。
**项目本质**：一款通过限时选择题挑战来学习音乐术语的移动端渐进式网页应用，主题为“节奏猫咪”。
---
## **详细规格**
### **1. 数据与核心逻辑**
- **题库 (`MUSIC_DATA`)**：一个包含27个术语的数组。每个对象结构为 `{ id, term, meaning, category, level }`。
- `category`: 分为 `"力度"`、`"速度"`、`"表情"`、`"技法"`、`"变化"`。
- `level`: 难度等级 `1` (初级)、`2` (中级)、`3` (高级)。
- **难度配置 (`LEVEL_CONFIG`)**：
```javascript
{
1: { name: "初级学徒", color: "text-green-400", bg: "bg-green-500/20", time: 10 },
2: { name: "乐团乐手", color: "text-blue-400", bg: "bg-blue-500/20", time: 8 },
3: { name: "首席指挥", color: "text-purple-400", bg: "bg-purple-500/20", time: 6 }
}
```
`time` 单位为秒，表示每道题的答题时间。
- **游戏状态**：
- **得分**: 初始0。答对得分公式：`10 + (combo * 2)`。`combo` 连击数从0开始，答对+1，答错归零。
- **生命**: 初始3颗心，答错-1，归零游戏结束。
- **计时器**: 以百分比（100-0）表示，每100ms减少一次，减少量由 `LEVEL_CONFIG[level].time` 计算得出，确保在设定时间内归零。颜色在<30%时变红。
- **出题逻辑**：从 `level <= 当前游戏难度` 的术语中随机选取1个作为正确答案，再从同一池中随机选取3个不同术语作为干扰项，共4个选项随机排序。
### **2. 应用流程与视图 (`view` 状态机)**
- `'splash'` -> `'menu'` -> (`'game'` | `'dictionary'`) -> `'result'` -> `'menu'`。
- 使用 `AnimatePresence` 和 `motion.div` 管理视图切换动画，具体参数见 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
81
AES256 在线加密解密工具
采用AES-256军用级加密算法，提供端到端数据安全保障。支持明暗双色主题切换，配备流畅动画交互与响应式设计。内置实时加密解密功能，采用零数据上传架构确保隐私安全，搭配专业级UI组件与防误触设计，打造极致安全体验。
12 0
免费# Role (角色设定)
资深全栈工程师兼UI/UX设计专家，专注于构建安全、美观且用户体验优秀的Web应用。具备深厚的前端开发经验，特别擅长React框架、现代CSS设计和密码学应用开发。
# Project Overview (项目概述)
这是一个基于AES256算法的专业加密解密工具，提供直观的用户界面和安全的本地数据处理。
# Core Features (核心功能)
## 用户交互逻辑
- **模式切换**: 通过滑动切换按钮在"加密"和"解密"模式间切换，带有流畅的动画过渡效果
- **文本输入**: 提供大型文本区域用于输入待处理内容和显示输出结果
- **密码输入**: 专用密码输入字段，支持实时验证
- **操作按钮**:
- 处理按钮：触发加密/解密操作
- 复制按钮：一键复制输出结果到剪贴板
- 清空按钮：快速清空所有输入和输出内容
- **状态反馈**: 实时错误提示和成功通知（Toast）
## 数据处理逻辑
- **AES256加密**: 使用CryptoJS库实现AES-256算法加密
- **AES256解密**: 使用相同算法进行数据解密
- **输入验证**:
- 检查输入文本是否为空
- 验证密码字段是否填写
- 解密时验证数据格式有效性
- **错误处理**: 捕获并显示加密/解密过程中的所有异常
## 状态管理
- **模式状态**: 当前操作模式（加密/解密）
- **输入状态**: 原始文本内容
- **密码状态**: 加密密钥
- **输出状态**: 处理后的结果
- **错误状态**: 错误消息显示
- **Toast状态**: 成功通知的显示控制
## 业务规则
- 加密模式：将明文转换为AES256加密的密文
- 解密模式：将AES256密文还原为明文
- 所有处理在客户端本地完成，数据不上传服务器
- 密码必须为非空字符串
## 输入输出细节
- **输入**: 纯文本字符串 + 密码字符串
- **输出**: 加密后的Base64字符串 或 解密后的原始文本
- **错误输出**: 具体错误描述信息
# UI/UX Design (界面与体验)
## 布局结构
- 顶部：品牌Logo和应用标题
- 主体：模式切换器 → 输入区域 → 密码区域 → 操作按钮 → 输出区域
- 固定定位的Toast通知组件
## 配色方案
- **主色调**: Emerald绿色 (#10b981 / #059669)
- **深色背景**: Slate 950 (#0f172a)
- **表面颜色**: Slate 800 (#1e293b)
- **边框颜色**: Slate 700 (#334155)
- **文字颜色**: 白色和浅灰色 (#f8fafc / #cbd5e1)
## 动画效果
- **淡入动画**: 0.3s ease-out (用于Toast通知)
- **上滑动画**: 0.4s cubic-bezier(0.16, 1, 0.3, 1) (用于内容加载)
- **切换动画**: 300ms ease-out (模式切换滑块)
- **点击反馈**: 按钮按下时的scale(0.98)效果
## 组件细节
- **玻璃拟态面板**: 半透明背景 + backdrop-filter模糊效果
- **自定义滚动条**: 深色主题适配的细滚动条
- **图标集成**: Lucide React图标库
- **字体系统**:
- 主字体: Inter (400/500/600字重)
- 等宽字体: JetBrains Mono (代码显示)
# Mobile Adaptation (移动端适配)
## Viewport配置
```html
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
```
## 防误触配置
```css
body {
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
```
## 滚动条隐藏
```css
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
```
## 响应式设计
- 使用Flexbox布局确保内容自适应
- 按钮和输入框最小触摸尺寸：44px
- 使用rem/vw单位而非固定像素
- 文本区域在移动端保持合适的行高和间距
# Technical Requirements (技术要求)
## 库和框架
- **React 18.2.0**: 使用ESM CDN导入
- **Tailwind CSS**: 自定义配置深色主题
- **CryptoJS 4.2.0**: AES256加密算法实现
- **Lucide React 0.263.1**: 图标组件库
- **Babel Standalone**: JSX转译
## 代码结构
- 函数式组件 + React Hooks
- 模块化组件设计 (Logo, ToggleMode, Toast, App)
- 清晰的导入导出结构
- 错误边界处理
## 性能优化
- 使用useEffect清理定时器
- 条件渲染避免不必要的DOM操作
- CSS动画使用GPU加速
- 图标按需导入
# Constraints (约束条件)
## 技术要求
- 必须支持现代浏览器 (Chrome, Firefox, Safari, Edge)
- 必须完全在客户端运行，不依赖后端服务
- 必须使用AES256算法标准
- 必须支持中文本地化
## 安全要求
- 密码不在URL或localStorage中存储
- 所有加密操作在内存中完成
- 不记录用户操作历史
## 设计约束
- 严格遵循深色主题设计规范
- 保持玻璃拟态设计风格一致性
- 所有交互必须提供视觉反馈
- 移动端优先的设计理念
## 代码质量
- 使用语义化的HTML结构
- 遵循React最佳实践
- 保持代码可读性和可维护性
- 提供完整的错误处理机制
这个Prompt包含了构建该AES256加密工具所需的所有技术细节、设计规范和业务逻辑，确保生成的代码能够完美复刻原始产品的所有功能和用户体验。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
80
多彩气泡日记：记录心情与想法的在线日记本
多彩气泡日记是一款基于 React 的现代 Web 应用，提供沉浸式日记体验。它采用毛玻璃设计、动态背景动画和本地存储功能，支持五种心情分类记录，并能将日记内容一键生成为精美图片分享。
3 0
免费开发一个名为“多彩气泡日记”的轻量级Web应用。核心功能是让用户通过选择心情（如开心、平静）并输入文字来创建和保存日记条目，所有数据存储在本地。
关键交互包括：一个侧边栏显示所有日记的列表，点击可查看和编辑；主编辑区提供心情选择按钮和一个大型文本输入框；支持将当前日记生成为带有日期、心情和内容的精美图片并下载。
视觉风格采用**毛玻璃拟态**、**柔和渐变背景**与**浮动动画**。整体界面圆润、色彩柔和，并伴有动态的彩色气泡背景，营造出轻盈、治愈的视觉体验。 扫码即刻体验
手机全屏模式运行
扫码
扫码体验
80
全球出行指引系统：签证、安全与实时旅行指南
全球出行指引系统 TRIPGUIDE PRO 整合实时签证政策、海关法规与安全预警，提供交互式地图与动态数据可视化。基于 React 构建的现代化界面支持多端响应，通过卫星级数据流确保信息准确同步，为国际旅行者提供一站式决策支持。
10 0
免费**核心功能 Prompt：**
创建一个**全球出行指引系统**，核心目标是**为旅行者提供实时、全面的目的地信息与决策支持**。
**核心功能与交互：**
1. **国家/城市信息中心**：用户通过搜索栏输入目的地，系统展示该地核心数据（签证、天气、汇率、安全、法律等）。
2. **交互式地图可视化**：抽象地图上动态显示关键地点（酒店、景点、使馆等）的标记点，悬停可查看详情。
3. **结构化信息面板**：将复杂信息（人口、紧急联络、交通、习俗等）分类在玻璃态卡片中清晰呈现。
**关键交互逻辑：**
* **搜索驱动**：用户输入触发数据加载与界面更新。
* **地图探索**：用户可与地图上的标记点（POI）交互，获取地点详情。
* **信息分类浏览**：用户可快速扫描不同类别的旅行须知。
**视觉风格关键词：**
* **深色主题** (Dark Theme)
* **玻璃态/毛玻璃效果** (Glassmorphism)
* **动态渐变背景** (Animated Gradient)
* **科幻/数据可视化** (Sci-fi / Data Visualization)
* **极简现代界面** (Minimalist Modern UI) 扫码即刻体验
手机全屏模式运行