🎮

练习场

这里可以直接玩各种小项目。点击下面的卡片加载示例,或者自己修改代码,看看你能做出什么!

🚀

立即可玩的示例项目

点任意一个卡片,代码就会出现在下面的编辑器里,可以立刻运行

💻

代码游乐场

左侧修改代码,右侧实时预览。让 AI 帮你写代码后粘贴到这里运行

📝 代码编辑器
👀 实时预览
🤖
和 AI 协作的工作流
1️⃣ 想清楚要做什么 → 2️⃣ 打开 AI 助手描述需求 → 3️⃣ 复制 AI 生成的代码 → 4️⃣ 粘贴到左边编辑器 → 5️⃣ 看预览效果,不满意再让 AI 改

推荐 AI 助手:ChatGPT、Claude、通义千问、文心一言、豆包(任选一个你顺手的)
🎯

挑战任务

试着用 AI 帮你完成这些任务,把生成的代码粘到上面的编辑器里运行

🎂
任务 1:生日贺卡

给朋友做一个生日贺卡网页

要求
  • ✨ 有彩色背景和好看的字体
  • 🎈 显示朋友的姓名
  • 🎉 有动画效果(飘动/闪烁)
  • 🎵 可以加个按钮播放生日歌
任务 2:番茄钟

做一个 25 分钟学习定时器

要求
  • ⏱ 显示剩余时间(大字)
  • ▶ 开始/暂停按钮
  • 🔔 时间到了弹窗提醒
  • 🎨 极简风格,颜色舒服
🐱
任务 3:电子宠物

做一个会撒娇的电子宠物

要求
  • 🐾 显示一个 emoji 宠物
  • 🍖 点击"喂食"按钮,心情变好
  • 😊 显示心情值(数字或进度条)
  • 💬 不同心情显示不同气泡文字
任务 4:知识问答

做一个 5 道题的小测验

要求
  • 📝 显示一道题 + 4 个选项
  • ✅ 选完立刻判断对错
  • ➡️ 切到下一题
  • 🏆 最后显示得分
📷
任务 5:相册

做一个个人照片墙

要求
  • 🖼️ 显示 6-9 张图片(用网上图片地址)
  • 📐 网格布局
  • 🔍 鼠标悬停有放大效果
  • 💬 点击图片显示说明
🌍
任务 6:个人主页

做一个自我介绍网页

要求
  • 👤 顶部:头像、姓名、一句话介绍
  • 📚 中部:我的爱好(卡片形式)
  • 🎯 下部:我的目标
  • 📮 底部:联系方式