用 AI 在浏览器里搞生成艺术？这个 Skill 让代码变成画笔

用 AI 在浏览器里搞生成艺术？这个 Skill 让代码变成画笔 🎨

说实话，第一次看到有人用几行 p5.js 代码跑出一整幅粒子风暴时，我愣了足足十秒——那不是”画”，是算法在呼吸。

今天要介绍的这个 Skill，叫 p5js，来自 Hermes Agent 体系（没错，就是那个在 GitHub 拿了 23.4k Stars 的 Nous Research 作品），专门把 AI 和 p5.js 绑定在一起，让生成艺术变得人人可搞。

它能做什么？

简单说：你在对话框里描述一个画面，它给你生成一段 p5.js 代码，运行出来就是一张图、一段动画，甚至一段视频。

具体支持这几种模式：
– 生成艺术：输入概念/参数，输出程序化视觉构图（静态或动态）
– 数据可视化：接 API 或数据集，生成交互式图表
– 交互体验：鼠标/键盘/触屏驱动的可交互 sketch
– 动效/Motion Graphics：时间轴驱动，生成动态序列、动态字体
– 3D 场景：WebGL 渲染 3D 几何、光照、相机
– 图像处理：像素操作、滤镜、马赛克、点画法
– 声音响应：麦克风或音频文件驱动实时生成

输出格式也很全：HTML（直接浏览器打开）、PNG（按 S 键保存）、GIF（按 G 键）、MP4（ffmpeg 合成）、SVG（矢量输出）。

怎么用？

零配置，单 HTML 文件，不需要构建工具。内置 p5.js 1.11.3 CDN，打开就能跑。进阶玩法（高清渲染、批量导出 MP4）需要 Node.js + Puppeteer + ffmpeg。

整个 pipeline 走的是：CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY，六步走完出成品。

我的感受

我最喜欢它的”第一帧原则”——Skill 明确要求输出的第一帧必须”视觉震撼”，不是那种”教程级示例图”。它要求在代码跑出来之前先想清楚”这张画要传达什么情绪”，然后用算法去实现它。

对比传统的”AI 生图”，它最大的区别是可控性：你可以精确控制每一个粒子的运动轨迹、颜色过渡节奏、噪声场的频率参数。出来的不是随机抽卡，而是一件真正可复现的艺术品。

调参的过程本身也是创作的一部分。

GitHub 链接：
https://github.com/nousresearch/hermes-agent/tree/main/skills/creative/p5js

如果你对生成艺术、创意编程感兴趣，这个 Skill 值得上手试试。#生成艺术 #p5js #AI创意 #编程艺术 #交互设计

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