1. 从游戏逻辑到艺术生成Claude Code 在创意编程里的真实工作流创意编程最让人头疼的地方往往不是没有想法而是想法卡在「怎么把它变成能跑的代码」这一步。p5.js 和 Processing 这类工具本身门槛不算高但当你脑子里同时装着碰撞检测、粒子系统、递归分形、色彩映射这些东西时手写代码的速度会严重拖慢试错节奏。Claude Code 能做什么它适合谁简单说它适合那些有明确视觉目标、但不想在语法和 API 细节上反复查文档的人——你负责描述「要什么效果」它负责把 sketch 骨架搭出来你再基于可运行的结果去调参数、改交互。我自己的用法是把它当成一个「能读懂上下文的结对程序员」先让它生成一个最小可运行版本跑起来看到画面再针对具体问题迭代。这篇就按这个思路把 p5.js 游戏逻辑和 Processing 艺术生成两条链路串起来给出可复制的配置骨架、Prompt 模板以及一次从需求到可运行 sketch 的完整验证动作。全程不依赖任何特殊网络环境本地编辑器加一个稳定的模型接入端点就能跑通。2. TaoToken 前置把 Claude Code 接到创意编程工作流里Claude Code 本身是一个命令行形态的编码助手它需要连接到一个兼容 Anthropic 接口的模型服务端点才能工作。TaoToken 在这里扮演的角色就是提供这个接入点——你拿到 API Key 之后把它配置到 Claude Code 的环境变量或 settings.json 里后续所有代码生成请求都会走这个通道。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 。注意 API 地址后面不加任何 UTM 参数保持干净。你需要先在控制台创建一个 API Key然后把它写进配置。这一步不复杂但 Key 的管理要养成习惯不要硬编码在提交到 Git 的脚本里用环境变量或者本地未跟踪的配置文件。对于创意编程这种需要频繁试错的场景建议单独建一个项目目录比如creative-coding-lab在里面放settings.json和你的 sketch 文件。这样 Claude Code 的上下文范围清晰不会把无关文件读进来干扰生成质量。3. 可复制配置settings.json 骨架与 Prompt 工程模板3.1 Claude Code 配置骨架在项目根目录创建.claude/settings.json或按你使用的 Claude Code 版本要求的路径核心是配置模型端点和 API Key。下面是一个可复制的骨架{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-your-taotoken-key-here, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Read, Write, Bash(python:*), Bash(node:*) ] } }把sk-your-taotoken-key-here替换成你在控制台生成的真实 Key。ANTHROPIC_MODEL按你实际可用的模型名填写不同账号可能略有差异。配置完成后在终端里进入项目目录运行claude命令如果能看到交互界面并正常响应说明接入成功。注意如果你在团队环境里使用建议把 Key 放在系统环境变量里settings.json 只引用变量名避免 Key 泄露。3.2 Prompt 工程模板让生成结果可直接运行创意编程的 Prompt 和普通业务代码不一样它需要同时约束「技术正确性」和「视觉可调性」。我总结了一个四段式模板实测下来生成一次就能跑的比例明显更高任务用 [p5.js / Processing Java模式] 实现 [具体效果名称] 技术约束 - 运行环境[p5.js Web Editor / Processing 4.0] - 画布尺寸[宽 x 高] - 帧率要求[如 60fps粒子数不超过 2000] - 不使用外部库仅用核心 API 功能需求 1. [核心交互如方向键控制] 2. [视觉规则如颜色随速度变化] 3. [状态管理如游戏结束重开] 代码结构 - 使用面向对象至少包含 [类名1]、[类名2] - 所有可调参数集中在顶部常量区 - 关键逻辑加中文注释 输出要求 - 只输出完整可运行的单个文件代码 - 不要省略任何函数体这个模板的关键在于「输出要求」那一段。很多人写 Prompt 时只描述功能结果模型给你一个带// ... 省略的片段还得自己补全。明确要求「完整可运行、不省略」能省掉大量来回。4. 验证请求从贪吃蛇逻辑到分形树艺术生成4.1 p5.js 游戏逻辑贪吃蛇最小可运行版先用上面的模板生成一个 p5.js 版本的贪吃蛇验证配置和 Prompt 是否工作正常。把下面这段 Prompt 发给 Claude Code任务用 p5.js 实现贪吃蛇游戏 技术约束 - 运行环境p5.js Web Editor - 画布尺寸400 x 400 - 网格 20x20每格 20px - 帧率随分数递增上限 20 功能需求 1. 方向键控制移动禁止 180 度反向 2. 食物随机生成不落在蛇身上 3. 吃到食物蛇身增长分数 10 4. 撞边界或自身游戏结束按 R 重开 代码结构 - Snake 类管理蛇身数组和方向 - Food 类管理食物位置 - 可调参数集中在顶部 输出要求 - 只输出完整可运行的单个 HTML 文件 - 不要省略任何函数体生成后你会得到一个包含setup()、draw()、keyPressed()和两个类的完整文件。把它粘贴到 p5.js Web Editor 里点运行应该立刻能看到绿色蛇身和红色食物。如果蛇不动检查frameRate()是否被设成了 0如果按键无响应确认keyPressed()里用的是keyCode而不是key。这一步验证通过说明你的 TaoToken 接入和 Claude Code 配置都是通的。接下来进入艺术生成部分。4.2 Processing 艺术生成交互式分形树艺术生成的 Prompt 要更强调「参数化」和「视觉映射」。下面这个模板生成一棵随鼠标变化的分形树任务用 Processing Java 模式实现交互式分形树 技术约束 - Processing 4.0Java 模式 - 画布 800 x 600 - 递归深度不超过 10 层 功能需求 1. 递归绘制分形树树枝长度和粗细逐层递减 2. 鼠标 X 轴控制分支角度10-40 度 3. 鼠标 Y 轴控制分支密度1-3 条额外分支 4. 按 1-4 切换春夏秋冬配色 5. 秋季模式添加落叶粒子受鼠标移动速度影响 代码结构 - Tree 逻辑写在 drawBranch() 递归函数里 - Leaf 类管理落叶粒子和物理 - 季节配色用 switch 集中管理 输出要求 - 只输出完整可运行的单个 .pde 文件 - 不要省略任何函数体生成后保存为fractal_tree.pde用 Processing 打开运行。你会看到一棵从底部中央向上生长的树移动鼠标时树枝角度和密度实时变化按数字键切换季节配色。秋季模式下快速移动鼠标落叶会明显被「吹」向一侧。4.3 从 Processing 到 p5.js 的转换验证创意编程经常需要把本地 sketch 搬到网页上分享。用 Claude Code 做转换时Prompt 要明确「保持功能不变」和「处理平台差异」将以下 Processing Java 代码转换为 p5.js 版本 [粘贴你的 .pde 代码] 转换要求 1. 保持所有交互和视觉效果不变 2. 添加 windowResized() 响应式适配 3. 鼠标滚轮控制画布缩放范围 0.5-2.0 4. 移动端触摸事件模拟鼠标移动 5. 输出完整 HTML 文件可直接在浏览器打开转换后的 p5.js 版本在setup()里用createCanvas(windowWidth, windowHeight)在windowResized()里调resizeCanvas()。触摸交互用touchMoved()返回false阻止页面滚动。这些细节模型通常能处理对但你要在浏览器里实际拖一下窗口、滚一下滚轮确认。5. 本篇常见错排查配置类问题运行claude后提示认证失败先检查ANTHROPIC_BASE_URL是否写成了https://taotoken.net/api不要带末尾斜杠再确认 Key 没有多余空格。如果返回 404多半是模型名写错了去控制台确认当前可用的模型标识。生成代码跑不起来最常见的是模型「偷懒」省略了函数体。解决办法是在 Prompt 的「输出要求」里加一句「如果代码超过 500 行分两次输出但每次都必须完整」。另一个高频问题是 p5.js 和 Processing 的 API 混用比如在 p5.js 里写了ArrayListPVector这时直接让 Claude Code「检查这段代码是否有 Processing 特有语法替换为 p5.js 等价写法」。视觉效果不对分形树画出来是一团乱线通常是递归终止条件写错了。检查drawBranch()里if (length 5)这个阈值太小会导致无限递归太大则树太浅。落叶不显示确认season 3的判断和leaves数组的更新逻辑是否在draw()里被调用。性能问题粒子数超过 5000 时帧率掉到 30 以下让 Claude Code「用对象池复用粒子对象避免每帧 new」。分形树递归层数太深导致卡顿把递归深度限制在 8 层以内或者改用迭代方式绘制。交互无响应p5.js 里鼠标事件没反应检查是否在draw()里用了return false但没在事件函数里返回。Processing 里按键切换季节无效确认keyPressed()里用的是key而不是keyCode数字键的key值是字符1到4。6. 接入与进阶按你的场景选下一步如果你还在配置阶段卡着先去控制台把 API Key 建好然后对照接入文档把 settings.json 写对。文档里有不同操作系统的环境变量设置示例照着改就行。配置通了之后建议先用模型对话快速验证 Prompt 效果——把本文的模板粘进去看生成的代码结构是否符合预期再决定要不要落到本地文件。对于需要长期做创意编程项目的人Coding Plan 更适合因为它能保持多轮对话的上下文你迭代分形树参数时不用每次重新描述需求。创意编程的乐趣在于「看到想法变成画面」的那一刻。Claude Code 把从想法到第一版可运行代码的距离缩短了但真正决定作品好坏的还是你对参数、色彩和交互节奏的判断。跑通贪吃蛇和分形树之后试着把两个链路结合起来——比如用游戏逻辑控制艺术生成的参数让玩家操作直接影响视觉输出。这种交叉玩法才是创意编程最有意思的地方。
