# 创意编程与设计 用 AI 制作游戏、网页、动画和工程设计，适合创作者与产品开发者。 - 所属：[AI 编程与创作]() - 网站：[https://oplearnx.com/topics/creative-coding-design]() ## 推荐学习顺序 1. [氛围游戏开发的十月拐点]()（博客 · 入门）：这是一篇博客文章，作者回顾了 2025 年 11 月编程智能体的拐点后，认为 2026 年 10 月在“氛围编程”制作电子游戏上出现了新的拐点。文章称 Claude Opus 5.5 在 3D 建模、音乐生成和游戏设计方面有显著改进，尤其提到在提示“让它更有趣得多”后效果明显，并称近几周以完全不看代码的方式做了四款自己真正喜欢玩的游戏。 2. [使用 Claude Code：HTML 出人意料的有效性]()（博客 · 入门）：Claude Code 团队成员 Thariq Shihipar 撰写的使用心得，讨论团队成员为何以及如何用 HTML 而非 Markdown 产出更丰富、更易读、便于分享的结果。文中提到 Markdown 虽已成为智能体与人类交流的主流格式，但随智能体能力增强，在生成长文档、可视化、颜色和图表方面显得受限。文章包含缘起、入门、用例和常见问题等部分。 3. [oil-oil/oil-ui]()（项目 · 入门）：面向 Claude Code、Codex 等 AI Agent 的 UI 设计 Skill，可让 Agent 探索多个不同的设计方向、并排比较，并依据真实截图进行迭代。适用于网站、应用、仪表盘和组件等界面设计场景，仓库提供英文与中文两种 README。 4. [人们是怎么用 Claude 做出我在 Instagram 上不断看到的那种炫酷动效视频的？]()（帖子 · 入门）：Reddit r/ClaudeAI 上的社区帖子。发帖者称在 Instagram 上看到许多高水准动效视频都声称用 Claude 制作，但自己让 Claude 生成同类视频时效果不如这些作品，于是询问具体做法，并提到看到一条标注“Claude \+ Katana”（Katana 来自 higgsfields）的视频，询问这是否是可行路径。帖子下附带自动生成的讨论摘要。适合对用 Claude 制作动效/视频内容、并关注他人工作流的人关注。 5. [那些画面精致、全凭 vibe coding 做出的游戏，人们到底是怎么做的？]()（帖子 · 入门）：r/ClaudeAI 的社区帖子，作者称自己用 Opus 5.5，做低多边形或仿 N64 风格还行，但再进一步就不理想；让它在 Blender 里做东西效果不好，用 Tripo 订阅服务时给参考图后总有小错误（如脚趾变形、蜥蜴战士尾巴被截断），自己没能力修改，而 Tripo 只能重新生成，交给 Claude 修也不够好。作者想了解他人如何仅靠向 Claude 打字就做出画面精良的类魂游戏、罗马步行模拟和恐龙开放世界战斗游戏，并问是否应改用 Claude Code，以及相比 Cowork 提升多大。适合用 AI 做游戏美术与建模、关心 vibe coding 工作流程的人阅读。 6. [alchaincyf/huashu-motion]()（项目 · 入门）：这是一个 GitHub 仓库，提供一套可供编码智能体（如 Claude Code、Codex）使用的技能，用于生成产品宣传片：据描述，智能体会先阅读产品信息并给出三个方向，再撰写整支片子、自行作曲配乐，并在浏览器中打开编辑器，用户可在画面上点击指定要修改的位置。仓库标注 MIT 许可证，并给出 npx 安装命令、效果展示与结构说明。适合使用这类智能体工具制作用于推广的视频内容的用户参考。 7. [音乐人自己编写 AI]()（书籍 · 入门）：这是一本由 Taylor & Francis 出版的开放获取图书，作者为 Basica, Constantin 与 Zhu, Julie，出版信息只给到 2026 年。书中结合学术研究与音乐人实际经验，讨论音乐与 AI 的交汇，由新兴的“编程音乐人”作者撰写各自的艺术实践与研究，内容涉及算法作曲、共创系统、神经网络与 AI 伦理，并收录对已将 AI 用于创作的音乐人的访谈。 8. [AirsupHQ/machine-skill]()（项目 · 入门）：一个面向 Claude Code 的开源技能（skill）项目：用户用一句话描述任意机械装置，Claude 便生成一个包含逼真、基于物理的交互式 3D 模拟的 HTML 文件，并附带可用于发布的短片。README 称其兼容 Agent Skills，采用 MIT 许可，标签涉及 Three.js、WebGL、工程、物理与剖视图等。 9. [blendi-remade/dioramas（三维网站框架）]()（项目 · 入门）：一个免费开源框架，用于制作电影感、可交互的 3D 网页，其中 3D 场景本身即页面内容。资产由 AI 生成：先用 Nano Banana 2 生成产品图，再用 Meshy 7.1 转为 3D 模型，并由脚本进行优化。仓库附带 20 个完整示例网站，无需付费、账号或安装 CLI。 10. [我是图像型思考者，所以我让 Claude Code 在终端里画 mermaid 图]()（项目 · 进阶）：这是一条 Reddit r/ClaudeAI 社区帖子。作者自述习惯先做设计、画时序图、活动流、状态机乃至 C4 图再写代码，且设计工作通过 CLI 中的 Claude 完成，成图存入 Obsidian 库。因为 Claude Code 能写 mermaid 但无法直接展示，作者做了 merman——一个在终端中实时渲染 mermaid 的 Claude Code 模组，请求时序图时图表直接出现在回复里，改动会即时重绘，支持流程图、时序、状态、类、ER 图以及柱状、折线、饼图和甘特图，表格也带配色；帖子还给出渲染约 2 ms、16 套配色主题、约 355 tokens 一次会话等参数说明。适合在终端中用 Claude Code 做设计并需要可视化图表的人阅读。 11. [我用 Claude Code 做了一个激光干射击游戏：摄像头看着你的显示器并给激光命中计分（开源、免费）]()（项目 · 进阶）：Reddit r/ClaudeAI 上的社区帖子。作者称用约两周时间以 Claude Code 做出 ScreenPlink：以显示器为靶，用激光训练手枪或激光弹壳射击，显示器旁的摄像头拍摄屏幕并计算命中像素、打出弹孔并让靶倒下。功能包括九种训练、十五个带计分环的人形靶、17 发弹匣和同屏双人；摄像头可斜置，应用通过拍摄屏幕上的标记自行标定。作者说明代码基本全部由 Claude Code 编写，自己负责设计与验收，难点在于让无法看到屏幕、无法扣扳机的智能体调试一个测量物理世界的程序，为此使用了进程内 MCP 服务器等做法。适合用 Claude Code 做图像/硬件相关项目开发的人阅读。 12. [我用 Claude 做了一个把《英灵神殿》变成城市建造游戏的模组，在 r/valheim 登上第一]()（帖子 · 进阶）：r/ClaudeAI 的社区帖子，作者介绍按 F7 就能把 Valheim 变成城市建造玩法的模组：维京人迁入、纳税、需要食物和蜜酒，得不到就离开；首领住在营地，玩家带自己的军队攻打，每个首领开启一个拥有独立建筑风格的新时代。帖子称 Claude 编写了大部分 C\# 代码（BepInEx 与 Harmony 补丁、定居者 AI、经济系统、由游戏内建筑部件逐块自建的房屋），还能通过远程命令文件控制游戏，自己建城、截图检查并修正；并提到 Claude 定位并修复了测试者反馈的问题，以及写入游戏内基准测试，测得合并已建成房屋用于渲染带来最大帧率提升（36 到 56 fps），设计与测试由作者完成。模组在 Nexus 和 Thunderstore 免费发布。适合对 Valheim 模组开发或用 Claude 写游戏代码感兴趣的人阅读。 13. [我用 Claude Code 逆向复刻了老式翻页机场航班牌，你甚至可以把它拆开看]()（帖子 · 进阶）：这是一条 Reddit r/ClaudeAI 社区帖子。作者受已基本消失的 Solari 机场翻页出发牌启发，做了 analogflightboard.com，免费、无需注册、支持手机，展示 48 个机场的真实出发信息，字符逐个翻动动画，还可以把牌面拆解查看各个部件。作者描述工作流：先基于 Solari 1984 年维修手册、专利和拆解资料做研究，用自定义 research 技能给 Claude 提供真实机械规格，再用开源 anatomy 技能做出首个翻页模块并扩展为整块牌面，流程为研究→构建→浏览器中查看→具体反馈→测试→重复；作者主要负责审阅与把控翻页节奏、镜头角度、滚动和声音等细节，并让 Claude 编写点击界面的浏览器测试。适合对 Claude Code 项目工作流、逆向工程和网页交互动效感兴趣的人阅读。 14. [lovisdotio/motion2code]()（项目 · 进阶）：这是一个面向编码智能体的技能（skill）仓库，教智能体把动效设计视频重建为内联 SVG 形状加单一 GSAP 时间线的可编辑代码，可逐帧定位、无缝循环，并与原始视频并排比对。对于网站和应用的屏幕录制，它进一步用 GSAP ScrollTrigger 构建可交互的真实页面。仓库说明其兼容 Claude Code、Codex、Cursor、Copilot、Gemini 等工具，并提供多个示例页面及其体积、时长说明。 15. [shinshin86/mesh-avatar-studio]()（项目 · 进阶）：一个把单张插画转成可动画 2D 网格化身（VTuber 风格）的工具：编码智能体从图片准备化身，用户在本地编辑器中带实时预览微调，化身可眨眼、说话、转头、呼吸和摆发。需要 Node.js 22.17\+ 与 Git，可用 npx create-mesh-avatar-studio 试用，另有网页版 Player 用摄像头和麦克风驱动。仓库提供日文和简体中文 README。 16. [liyupi/ai-promo-video-maker（AI 产品宣传片制作器）]()（项目 · 进阶）：一个开源仓库，提供由 AI 编程工具（如 Cursor、Claude Code、Codex）驱动的产品宣传片制作流程。用户给出产品名或网址后，工具会调研产品、生成多风格样图、截取 4K 页面、按音乐节拍剪辑、生成并校验 AI 旁白、自动审图，最终输出 4K 视频和网页版。项目基于 Remotion 与 ElevenLabs，采用 MIT 许可。 17. [gatewai-dev/framefields]()（项目 · 进阶）：一个以代码优先方式制作视频与图像的开源项目，基于 WebGPU 原生渲染。README 说明其把合成、动态图形与 3D 能力打包为一个 npm 包，面向由 AI 智能体用代码驱动的视频工作流，提供文档、示例与模型页面，许可证为 Apache-2.0，状态标注为 beta。 18. [patch-gg/trompe（用图像模型为关卡贴图）]()（项目 · 进阶）：一个开源项目，用于从灰色灰模关卡生成完整贴图：规划玩家视角相机、由图像模型绘制各视角画面、将画面投影回关卡并烘焙成一张贴图。贴图在阴天光照下生成，作为反照率贴图，再由游戏引擎投射真实阴影。相机规划、投影与烘焙在浏览器 GPU 上运行，图像模型运行于 fal，输出 glTF 格式。 19. [daveebbelaar/bama]()（项目 · 进阶）：BAMA 全称 Build Any Mac App，是一套面向 AI 编码智能体的技能集合，用于考察、克隆、设计、构建、优化和测试基于 Swift 与 SwiftUI 的原生 macOS 应用。仓库说明称其目标是让用户看到喜欢的应用后，用智能体把它重建为自己的原生 Mac 应用，使用本地数据、无需 Xcode 图形界面，要求 macOS 26\+ 与 Swift 6.2，提供 21 项技能并可作为 Claude Code 插件使用。 20. [Show HN：SolidCraft——用 Rust 编写的开源参数化 CAD（支持 MCP）]()（项目 · 进阶）：一个用纯 Rust 编写的开源参数化 3D CAD 应用，支持草图、约束和带参数化特征时间轴的实体建模，改动尺寸后模型会重新构建。可在桌面端、浏览器中运行，并内置 MCP 服务器供 AI 智能体进行建模。README 提供 Windows、macOS、Linux 与 Snap 下载入口及网页版试用链接。 21. [用本地 LLM 做关卡设计时，你用什么方法来保证几何形状的遵循度？]()（帖子 · 进阶）：一篇 r/LocalLLaMA 社区帖子，作者在用本地模型（Q3.8-FN-NVFP4，基于 Ninfer-v3 的分支）辅助设计 Halo Infinite Forge 地图，并征询如何保证模型输出在几何上符合关卡设计。帖子介绍了背景：Forge 只能通过节点图脚本、无法输入代码，地图保存为 MVAR 文件，反作弊机制阻止直接推送修改后的文件，因此开发需在游戏内手动完成；作者用 harness 建立专门的项目文件夹让代理参与制作。适合关注本地 LLM 在游戏关卡设计与代理工具链中应用的人阅读。 22. [4B 3D 编码模型更新：一次性生成效果与画面质量明显提升]()（帖子 · 进阶）：这是一篇 Reddit r/LocalLLaMA 社区帖子，作者发布其 4B 3D 场景编码模型的新版本，包括完整 FP16 权重，并公开了训练数据集 CCORE Three.js 3D Scenes（4146 个场景示例，3933 训练 / 213 验证，含提示、完整思考轨迹、HTML/JavaScript 响应、复杂度等级和可选渲染参考图，MIT 许可）。帖中给出 Q8 的推荐参数（temperature 0.6、top-k 20、top-p 0.95），说明 Q4 已发布但本版未测试，并提醒在 LM Studio 中关闭 MTP、重新下载同名文件。适合用本地小模型生成 Three.js 3D 场景、或想用其数据集训练模型的人阅读。 23. [scikit-learn 入门指南]()（教程 · 进阶）：这是 scikit-learn 官方文档的入门页面，介绍这一开源机器学习库的主要功能，包括监督学习与无监督学习，以及模型拟合、数据预处理、模型选择与评估等工具。页面包含拟合与预测的基本示例，如用 fit 方法训练 RandomForestClassifier，并说明了输入样本矩阵的形状约定。页面说明本指南假定读者具备机器学习实践的基础知识，如模型拟合、预测和交叉验证。 24. [AlphaEvolve：我们的 Gemini 驱动编程智能体如何扩大跨领域影响]()（博客 · 进阶）：这篇文章由 AlphaEvolve 团队在 Google DeepMind 博客发布，日期为 2026 年 5 月 7 日。文章回顾了一年前推出的、基于 Gemini 的算法设计编程智能体 AlphaEvolve，并汇总其在数学、计算机科学、Google 基础设施、自然世界物理解释、电网和计算基础设施等领域已产生的影响，其中提到它在基因组学中用于改进 DeepConsensus 模型。文章面向关注 AI for Science 与算法应用的读者。 --- 中文标题与摘要由模型根据原文生成，以原文为准。 来源：LearnMap · 学径（https://oplearnx.com）