Sakura Luo
南加州大学 / 游戏互动设计 硕士
艺术中心设计学院 / 交互设计 本科
清华未来实验室 · 严肃游戏研究
世界构建实验室 · VR 界面设计研究
腾讯游戏 · QQ 飞车游戏交互设计
腾讯音乐 · QQ 音乐AI 音乐创作体验设计
从游戏互动 → VR 研究 → 腾讯游戏 → QQ 音乐 AI 体验
音乐 × 游戏 × 界面 × AI Coding
以前 vs 现在
- 画出来 → 解释给开发 → 等待实现 → 再验收
- 设计师的核心能力是「画出一个界面」
- 描述出来 → 立即生成 → 立刻体验 → 继续修正
- 核心能力变成「定义体验系统」
我的 AI Coding 工具箱
Figma Make
从视觉稿、界面想法到可交互页面，快速生成第一版体验。
Codex
直接进入代码文件，修改页面、整理结构、接入视频和素材。
ChatGPT
梳理概念、生成 prompt、解释游戏设计和交互逻辑。
即梦
生成像素角色、背景图、游戏素材等视觉资产。
传统游戏做法 vs AI Coding 做法
差别不是有没有设计，而是把想法推进到 demo 的路径不同。
让 AI 给我一个横版平台游戏策划方案
我先问 AI：请设计一个原创 2D 横版平台跳跃游戏，玩法参考经典横版闯关，但不要使用 Mario 的角色、名称和版权素材。请给我一个游戏策划方案，并输出一个能让 AI 读懂、可以继续生成素材和代码的 prompt。
像素风人物角色设计
先定义角色长什么样
角色不是一张好看的图，而是游戏里可以被控制、被替换、被播放的素材。
先说清楚角色长什么样：外形、比例、颜色、表情、描边、像素质感。
如果不想从零设计，也可以先找一个喜欢的现成角色，再让 AI 帮你放进游戏流程里。
让角色能动起来
和 AI 沟通时，不只说「生成一个角色」，还要说清楚要哪些动作：待机、跑步、跳跃、攻击、受伤等。
这样后面做角色选择时，换的不只是头像，而是一套可以进入游戏的角色动作帧。
进入游戏前，让用户先选角色
上一页讲的是角色要有动作帧；这一页是我偷懒但有效的做法：在 Petdex 上选择现成角色，把它的动作帧放进游戏里，让用户可以选择。
我现在想在用户新进入一个游戏机的时候选角色，让用户选一个角色，第一个是这个兔子（展现兔子的gif） 第二个是这个pepe（https://petdex.crafter.run/pets/apupepe）看看是不是能调用petdex
生成一个横条背景图
说用途，说视觉风格，说构图，说建筑类型，说色彩
生成一张用于横版跑酷游戏的 2D 像素风长条背景图。画面风格为可爱、梦幻、糖果感的 pixel art，整体偏 8bit / 16bit 游戏美术风格。色彩以粉色、奶油白、浅紫、浅蓝和亮黄色为主，统一温柔、高饱和、少女感。
构图为超长横向街景，所有建筑沿同一条地面平台从左到右连续排列，形成适合横版卷轴游戏的场景。不要天空，不要远景，不要人物，背景透明，只保留建筑和底部地面。
场景中包含多个不同但风格统一的像素建筑：音乐商店、唱片店、PHOTO 店、CAFE、可爱服装店、心形喷泉、小拱门、电话亭、灯塔、小城堡、专辑展示馆、甜品店 / 糖果店、可爱小屋。
每个建筑都应具有独立造型和装饰细节，例如心形元素、音符、唱片、花朵、蝴蝶结、麦克风、灯饰、招牌、拱门、窗户、门店陈列等；像素边缘清晰、无模糊、无写实质感，适合作为游戏场景素材。
Jesse Schell says designers should ask: “What will surprise players when they play my game?”
And whether the surprise comes from the story, rules, artwork, technology, or even from players surprising themselves.
中文翻译：Jesse Schell 提出「惊喜之镜」这个概念。他认为，设计师应该问自己：玩家在玩我的游戏时，什么会让他们感到惊喜？
这种惊喜可以来自故事、规则、美术、技术，甚至来自玩家对自己行为的意外发现。
部署项目
- 上传代码：把项目代码推到 GitHub 仓库
- 关联平台：云平台关联这个 GitHub 仓库
- 自动上线：之后每次提交代码到 GitHub，网页都会全自动重新部署上线
- Vercel：部署体验简单，适合快速发布 demo
- Cloudflare Pages：稳定，默认域名通常是 xxx.pages.dev
- 自定义域名：如果想要自己的网址，可以去域名网站购买并绑定