如何用游戏化设计让 AI 编程变得更好玩
其实传统的 AI 编程工具功能挺强大的，就是少了点温度。我们在做 HagiCode 的时候就想，既然都要写代码，为什么不把它变成一场游戏呢？
背景
用过 AI 编程助手的朋友应该都有这种体验：刚开始觉得挺新鲜，用着用着就感觉少了点什么。工具本身功能很强大，代码生成、自动补全、Bug 修复样样都能做，只是……没什么温度，用久了会觉得有些单调乏味。
这也罢了，毕竟谁愿意每天对着冷冰冰的工具呢。
这就好比打游戏，如果只是单纯地完成任务列表，没有角色成长、没有成就感解锁、没有团队配合，那很快就会觉得没意思。美的事物或人，不一定要占有，只是她还是美的，自己好好看着她的美就好了。可编程工具连这种美都没有，难免让人心灰意冷。
我们在开发 HagiCode 的过程中就遇到了这个问题。HagiCode 作为一个多 AI 助手协作平台，需要让用户长期保持使用热情。但现实是，再好的工具，如果缺乏情感连接，用户也很难坚持下去。
为了解决这个痛点，我们做了一个大胆的决定：把编程变成一场游戏。不是那种简单的积分排行榜，而是真正的角色扮演式的游戏化体验。这个决定带来的变化，可能比你想象的还要大。
毕竟，人嘛，总是需要点仪式感的。
关于 HagiCode
本文分享的方案来自我们在 HagiCode 项目中的实践经验。HagiCode 是一个多 AI 助手协作平台，支持 Claude Code、Codex、Copilot、OpenCode 等多种 AI 助手协同工作。
其实也没什么特别的，只是我们把编程变成了一场冒险而已。
为什么选择游戏化
游戏化的本质不是"加个积分榜"，而是建立一套完整的激励体系，让用户在做任务的过程中体验到成长感、成就感和社交认同。
HagiCode 的游戏化设计围绕一个核心概念展开：每个 AI 助手都是一名"英雄"，用户就是这支英雄团队的队长。你带领这些英雄去征服各种"地牢"（编程任务），在这个过程中，英雄会获得经验、升级解锁能力，你和你的团队也会获得各种成就。
这不是什么噱头，而是基于人类行为心理学的精心设计。当任务被赋予意义和进度反馈时，人的投入度和坚持程度会显著提升。
就像古人说的，“此情可待成追忆，只是当时已惘然”。我们把这种情感体验融入到工具中，让编程不再只是敲代码，而是一段值得回忆的旅程。
Hero 角色系统
Hero 是 HagiCode 游化系统的核心概念。每个 Hero 代表一个 AI 助手，比如 Claude Code 是一个 Hero，Codex 也是一个 Hero。
Hero 的三大槽位
Hero 有三个装备槽位，这个设计其实还挺巧妙的：
CLI 槽位（主要职业）：决定 Hero 的基础能力，比如是 Claude Code 还是 Codex
Model 槽位（次要职业）：决定使用的模型，比如 Claude 4.5 还是 Claude 4.6
Style 槽位（风格）：决定 Hero 的行事风格，比如是"风落策略家"还是"其他风格"
三个槽位的组合可以创造出独特的 Hero 配置。就像游戏里配装一样，你需要根据任务特点选择合适的搭配。毕竟适合自己的才是最好的，这和生活选路差不多，条条大路通罗马，只是有的路好走一点，有的路稍微曲折一点罢了。
Hero 的成长系统
每个 Hero 都有自己的 XP（经验值）和等级：
typescript
type HeroProgressionSnapshot = {
currentLevel: number; // 当前等级
totalExperience: number; // 总经验值
currentLevelStartExperience: number; // 当前等级起始经验
nextLevelExperience: number; // 下一等级所需经验
experienceProgressPercent: number; // 进度百分比
remainingExperienceToNextLevel: number; // 距离下一级还需要多少经验
lastExperienceGain: number; // 最近一次获得的经验
lastExperienceGainAtUtc?: string | null; // 获得经验的时间
};
等级分为四个阶段，每个阶段的命名都很有代入感：
typescript
export const resolveHeroProgressionStage = (level?: number | null): HeroProgressionStage => {
const normalizedLevel = Math.max(1, level ?? 1);
if (normalizedLevel <= 100) return'rookieSprint'; // 新人冲刺
if (normalizedLevel <= 300) return'growthRun'; // 成长跑
if (normalizedLevel <= 700) return'veteranClimb'; // 老兵攀登
return'legendMarathon'; // 传奇马拉松
};
从"新人"到"传奇"，这个成长路径让用户有明确的目标感和成就感。就像人生的成长，总要经历从懵懂到成熟的过程，只是这里把这种过程具象化了而已。
创建自定义 Hero
创建 Hero 时需要配置三个槽位：
typescript
const heroDraft: HeroDraft = {
name: 'Athena',
icon: 'hero-avatar:storm-03',
description: '智谋过人的策略家',
executorType: AIProviderType.CLAUDE_CODE_CLI,
slots: {
cli: {
id: 'profession-claude-code',
parameters: { /* CLI 相关参数 */ }
},
model: {
id: 'secondary-claude-4-sonnet',
parameters: { /* 模型相关参数 */ }
},
style: {
id: 'fengluo-strategist',
parameters: { /* 风格相关参数 */ }
}
}
};
每个 Hero 都有独特的头像、描述和专业定位，这让冰冷的 AI 助手变得有个性、有温度。毕竟谁愿意跟没有性格的工具打交道呢？
Dungeon 地牢系统
"地牢"是游戏中的经典概念，代表着需要组队攻略的挑战。在 HagiCode 中，每个工作流程就是一个 Dungeon。
Dungeon 的组织方式
Dungeon 将工作流程组织成不同的"地牢"：
提案生成地牢：负责生成技术提案
提案执行地牢：负责执行提案中的任务
提案归档地牢：负责整理和归档完成的提案
每个地牢都有自己的 Captain（队长）Hero，队长自动从启用的 Hero 中选择第一个。
其实这就像生活中的分工，每个人都有自己的角色，只是这里把这种分工变成了游戏机制而已。
团队协作机制
你可以为不同的地牢配置不同的 Hero 小队：
typescript
const dungeonRoster: HeroDungeonRoster = {
scriptKey: 'proposal.generate',
displayName: '提案生成',
members: [
{ heroId: 'hero-1', name: 'Athena', executorType: 'ClaudeCode' },
{ heroId: 'hero-2', name: 'Apollo', executorType: 'Codex' }
]
};
比如生成提案时用 Athena（擅长策略），执行代码时用 Apollo（擅长实现），这样每个英雄都能发挥自己的专长。就像组建一支乐队，每个人都有自己的乐器，合起来才能奏出动听的旋律。
Dungeon 流程控制
Dungeon 使用固定的 scriptKey 来标识不同的流程：
typescript
// 脚本键值对应不同的工作流程
const dungeonScripts = {
'proposal.generate': '提案生成',
'proposal.execute': '提案执行',
'proposal.archive': '提案归档'
};
任务状态流转是：queued（排队中）→ dispatching（分发中）→ dispatched（已分发）。整个过程自动化，不需要手动干预。这也是我们偷懒的小心思，毕竟谁愿意手动管这些事呢。
XP 和等级系统
XP（经验值）是游戏化系统中最核心的反馈机制。用户通过完成任务获得 XP，XP 让英雄升级，升级解锁新的能力，形成正向循环。
XP 获取方式
在 HagiCode 中，XP 可以通过以下活动获得：
代码执行完成
工具调用成功
提案生成
会话管理操作
项目操作
每完成一次有效操作，对应的 Hero 就会获得 XP。就像生活中的成长，每一步都算数，只是这里把这种成长量化了而已。
实时进度可视化
XP 和等级的进度是实时可视化的：
typescript
type HeroDungeonMember = {
heroId: string;
name: string;
icon?: string | null;
executorType: PCode_Models_AIProviderType;
currentLevel?: number; // 当前等级
totalExperience?: number; // 总经验值
experienceProgressPercent?: number; // 进度百分比
};
用户可以随时看到每个 Hero 的等级和进度，这种即时反馈是游戏化设计的关键。毕竟人总是需要点反馈，不然怎么知道自己进步了呢？
成就系统
成就是游戏化中的另一个重要元素，它提供了长期目标和里程碑式的成就感。
成就类型
HagiCode 支持多种成就类型：
代码生成类：生成 X 行代码、生成 Y 个文件
会话管理类：完成 Z 次对话
项目操作类：在 W 个项目中工作过
其实这些成就就像人生中的里程碑，只是我们把它们变成了一种游戏机制而已。
成就状态
成就有三种状态：
typescript
type AchievementStatus = 'unlocked' | 'in-progress' | 'locked';
三种状态有明显的视觉区分：
已解锁：金色渐变 + 光晕效果
进行中：蓝色脉冲动画
未解锁：灰色，显示解锁条件
每个成就都清晰展示触发条件，让用户知道下一步该做什么。毕竟迷茫的时候，有个指引总是好的。
解锁时的庆祝效果
当成就解锁时，会触发庆祝动画。这种正向强化会让用户产生"我做到了"的满足感，激励他们继续前进。就像生活中小小的奖励，虽然不大，却能让人开心很久。
Battle Report 每日战斗报告
Battle Report 是 HagiCode 的一个特色功能，每天结束时生成一份全屏展示的战斗风格报告。
报告内容
Battle Report 显示以下信息：
typescript
type HeroBattleReport = {
reportDate: string;
summary: {
totalHeroCount: number; // 总英雄数
activeHeroCount: number; // 活跃英雄数
totalBattleScore: number; // 总战斗分数
mvp: HeroBattleHero; // 最有价值英雄
};
heroes: HeroBattleHero[]; // 所有英雄的详细数据
};
队伍总分数
活跃 Hero 数量
工具调用次数
总工作时长
MVP（最有价值英雄）
每个 Hero 的详细卡片
MVP 高亮展示
MVP 是当天表现最好的 Hero，会在报告中高亮显示。这不仅是数据统计，更是一种荣誉认可。毕竟谁不希望自己被认可呢？
Hero 详细卡片
每个 Hero 的卡片包含：
等级进度
XP 获得量
执行次数
使用时长
这些数据让用户清楚地了解团队的工作状态。毕竟了解自己的努力成果，也是一种满足感。
技术实现
HagiCode 的游戏化系统采用了现代化的技术栈和设计模式。其实也没什么特别的，只是选了一些趁手的工具而已。
技术栈选择
typescript
// 前端使用 React + TypeScript
importReactfrom'react';
// 动画使用 Framer Motion
import { AnimatePresence, motion } from'framer-motion';
// 状态管理使用 Redux Toolkit
import { useAppDispatch, useAppSelector } from'@/store';
// UI 组件使用 shadcn/ui
import { Dialog, DialogContent } from'@/components/ui/dialog';
Framer Motion 负责所有动画效果，shadcn/ui 提供基础的 UI 组件，Redux Toolkit 管理复杂的游戏化状态。毕竟工欲善其事，必先利其器。
游戏化 UI 设计系统
HagiCode 采用了 Glassmorphism + Tech Dark 的设计风格：
css
/* 主渐变色 */
background: linear-gradient(135deg, #22C55E 0%, #25c2a0 50%, #06b6d4 100%);
/* 玻璃态效果 */
backdrop-filter: blur(12px);
/* 光辉效果 */
background: radial-gradient(circle at center, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
绿色系的渐变配合玻璃态效果，营造出科技感和未来感。毕竟视觉上的美感，也是用户体验的一部分。
动画效果实现
使用 Framer Motion 实现流畅的进场动画：
typescript
<motion