让 AI 写出真正的生成艺术代码！这个 p5js Skill 让我惊艳到了

让 AI 帮你写生成艺术代码——p5.js Skill 测评

我一直在找一个能真正帮我「创作」而不是「执行命令」的 AI coding skill。找了一圈下来，这个来自 Hermes Agent 生态的 p5js Skill 让我眼前一亮。它不是一个简单的代码生成器，而是一套完整的生成艺术（Generative Art）生产流水线——从概念构思到最终导出 HTML/GIF/MP4，全流程覆盖。

简单说：你给一个创意描述，AI 帮你写出完整的 p5.js 生成艺术代码，浏览器里直接跑。支持 2D/3D 渲染、粒子系统、流场、Shader 效果、数据可视化、音频可视化、交互体验……而且导出格式随便挑（PNG、GIF、MP4、SVG 都可以）。

为什么这个 Skill 值得收藏

普通的「AI 写代码」做生成艺术，往往出来的是教学级别的演示代码——白色背景、简单图形、平平无奇。这个 Skill 的核心设计逻辑是：First-render excellence（首帧即精品）。它在 SKILL.md 里写死了明确要求：出来的作品必须「视觉上第一眼就惊艳」，不能像 tutorial 示例，不能有 AI 生成感。

它还要求：

• 创作前先构思「这个作品要传达什么」，而不是直接开写
• 每个像素都要有存在理由——层次、色彩温度、构图、呼吸感
• 主动加上用户没要求但「会喜欢」的细节
• 统一美学语言，不能堆砌十个不相关的效果

实际用起来怎么样

我试了一个概念：「赛博朋克城市雨夜，霓虹灯在积水中倒影，颗粒感噪点」。

Skill 给我生成了：一个完整的 p5.js WebGL 项目——雨滴粒子系统、流动的灯光反射、后期胶片颗粒处理、镜头轻微晃动。整套代码在单个 HTML 文件里，浏览器直接打开就能跑，还能导出 GIF。

重点是：这个输出不是「AI 帮你写代码」那种机械拼接感，而是真正有艺术构思的东西。代码本身结构很干净，p5.js 1.11.3 + p5.sound 架构，无构建步骤。

适合谁

独立创作者 / 数字艺术家：快速把创意变成可交互的视觉作品
设计师：生成艺术风格的素材、动画、海报
AI 爱好者：探索 AI + 代码的创意边界
开发者：快速原型化视觉效果，不用从零搭环境

怎么安装

在 Claude Code 或 Codex 里加载 Hermes Agent，然后激活 creative/p5js skill。也可以直接去 GitHub 看 SKILL.md 了解详细用法：

https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/p5js

GitHub: https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/p5js