🎨 创意设计全难度 📦 Anthropic

anthropic-algorithmic-art

用 p5.js 生成算法艺术、粒子系统、动态图案。

8.5 /10 ★★★★☆

📅 2026-06-15 · 🕒 5 分钟阅读 · 最后更新 2026-06-15 · 来源: Anthropic · 分析测评

#p5.js#算法艺术#generative art#flow field#particle system

📄 相关文章

📊 评分明细

⚡ 功能完备度

8.5 核心功能齐全

🎯 易用性

8.2 安装即用

🔧 可扩展性

8.8 支持定制和 fork

🔗 生态协同

8.4 可链式调用

🛡️ 稳定性

8.8 内置验证流程

🎯 适用场景

p5.js算法艺术generative artflow fieldparticle system

anthropic-algorithmic-art 快速入门

用几十行 p5.js 代码,生成能在网页里”活起来”的算法艺术。

这是什么?解决什么问题?

anthropic-algorithmic-art 是 Anthropic 在 anthropics/skills 仓库下提供的一个偏”好玩”的 Skill,核心用途是教 AI 用 p5.js(一个 JavaScript 的创意编程库)生成算法艺术(Algorithmic Art / Generative Art)。

“算法艺术”这个概念听起来玄乎,其实很接地气——它的意思是”用数学规则和随机性,生成肉眼看上去很美的图案”,比如:

粒子系统(particle system):几千个粒子按物理规则运动,形成星河、火花、烟雾。
流向场(flow field):在画布上”种”一个向量场,粒子沿着场线流动,形成有机的漩涡。
分形几何(fractal):曼德博集合、蕨叶 IFS,数学规律的自相似图案。
元胞自动机(cellular automata):康威生命游戏那种”邻居规则”涌现的图案。

这个 Skill 解决的问题:你跟 AI 说”给我写一段粒子动画”,AI 不会直接吐 p5.js 代码,而是按 Skill 里沉淀的”参数化生成”思路,提供可调参数、随机种子、导出 SVG/PNG 的能力。

它适合的场景:做品牌活动页的动态背景、设计海报的辅助元素、教学场景(教孩子看到数学可以很美)、做播客封面或视频片头。

准备工作

一个支持 Skill 加载的 AI 编程助手(Claude Code / Cursor)。
本地有 Node.js(可选,如果你想跑 p5.js 可以直接在浏览器里跑)。

Clone 仓库:

git clone https://github.com/anthropics/skills.git

软链 Skill:

ln -s skills/algorithmic-art ~/.claude/skills/algorithmic-art

3 步快速上手

第 1 步:安装 Skill

重启 AI 助手,Skill 即生效。

第 2 步:验证安装

向 AI 发送测试请求:

“用 anthropic-algorithmic-art 给我写一段 p5.js 代码,生成 200 个粒子的流向场,鼠标点击时粒子颜色会变。”

如果 AI 输出包含 function setup()、function draw()、Perlin noise 生成流向场、点击事件处理,说明 Skill 加载成功。

第 3 步:用 Skill 跑第一个任务

新建一个 index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Flow Field</title>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>

让 AI 帮你写 sketch.js:

let particles = [];
const NUM = 200;

function setup() {
  createCanvas(800, 600);
  background(10);
  for (let i = 0; i < NUM; i++) {
    particles.push(createParticle());
  }
}

function draw() {
  noStroke();
  for (let p of particles) {
    let angle = noise(p.x * 0.005, p.y * 0.005) * TWO_PI * 2;
    p.x += cos(angle);
    p.y += sin(angle);
    fill(255, 50);
    circle(p.x, p.y, 2);
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
      p.x = random(width);
      p.y = random(height);
    }
  }
}

function createParticle() {
  return { x: random(width), y: random(height) };
}

在浏览器里打开 index.html,会看到一个黑色背景上”流动”的粒子云,这就是经典的 Perlin 噪声流向场。

常见踩坑

直接在 draw() 里 createCanvas。createCanvas 必须在 setup() 里调用一次,否则每帧都新建画布会卡死。
粒子数量开太大。5000 个粒子 + 复杂的 circle() 调用会让浏览器掉到 5fps,先用 200 个跑通,再逐渐增加。
忘记重置粒子。粒子飞出画布后如果不重置,会留下长长的”尾巴”轨迹或全部堆在画外。Skill 建议加边界判断。
颜色随机但不协调。直接 random(255) 配 random(255) 配 random(255),会得到一坨脏颜色。Skill 建议用 HSL 色相环 + 邻近色搭配。
导出 PNG 时画布是空的。saveCanvas() 必须在 draw() 跑过至少一帧之后调用,否则导出的是黑屏。
不设随机种子。每次刷新图案都不一样,出图效果不可复现。Skill 强调用 noiseSeed(42) 这种固定值,方便”复现好看的版本”。

初级用法

用法 1:品牌活动页动态背景。把粒子颜色换成品牌主色,降低粒子不透明度(比如 fill(255, 30)),就能做出”低调但有氛围”的官网 hero 背景。

用法 2:播客封面 / 视频片头。导出一张高分辨率的某一帧 PNG(比如 1920x1080),加文字就是一张很有设计感的封面。

用法 3:教学示例。给中学生展示”噪声函数 + 简单规则 = 美”,作为编程与数学结合的入门案例。

高级玩法

玩法 1:参数化生成 + GUI 调参。引入 p5.gui 或 dat.GUI,把粒子数量、噪声频率、颜色等参数暴露成滑块,实时调试。

玩法 2:导出 SVG 矢量图。把 circle() 改成手动生成 <circle> 元素,塞进 SVG,这样导出的图是矢量的,放大不糊。

玩法 3:联动 MIDI / 音频。用 p5.FFT 接麦克风或音频文件,让粒子的运动随音乐节拍变化,做可视化音乐背景。

小技巧

Perlin 噪声比纯随机好看。random() 是均匀分布,noise() 是连续分布,后者天然适合做”自然流动”的效果。
降低帧率省电。frameRate(30) 比默认 60fps 省一半 CPU,大多数算法艺术用不到 60fps。
用 background(alpha) 而不是 background(rgb)。前者只清半透明,会留下”残影拖尾”,是经典粒子艺术效果。
保存好看的随机种子。noiseSeed(123) 跑出好图后,把种子记下来,后续可以微调参数但保留整体构图。
导出时关闭抗锯齿。pixelDensity(1) + 关闭 smooth() 能让导出 PNG 边缘更锐利,适合做设计素材。

常见问题 FAQ

Q1: 这个 Skill 跟 anthropic-algorithmic-art 有什么关系?必须装吗?

A: Skill 是给 AI Agent 用的”技能包”,能告诉 Agent 怎么按特定规范工作。不是必须装——如果你的项目规模小、要求不高,不装也能用。但装上能让 Agent 输出的质量更高、更符合最佳实践,推荐装。

Q2: 这个 Skill 适合哪些 AI Agent?Cursor?Claude Code?其他?

A: anthropic-algorithmic-art 来自 Anthropic,主要面向支持 Skill 机制的 Agent。常见兼容 Agent 包括 Claude Code、Cursor、OpenCode、Windsurf 等。具体兼容性请查 Skill 官方文档。

Q3: 装了这个 Skill 后,会拖慢 Agent 响应吗?

A: 会的——Skill 通常会增加 prompt 长度,导致响应变慢、token 消耗增加。但质量提升明显。建议:1) 只装项目必需的 Skill;2) 用 Skill 启动/加载/卸载机制按需加载;3) 定期清理不用的 Skill。

Q4: 怎么验证 Skill 装对了?

A: 在 Agent 中输入”列出已加载的 Skill”或类似命令。如果 Skill 出现在列表里,说明装对了。然后用 Skill 跑一个相关任务,看输出是否符合 Skill 规范。

Q5: 这个 Skill 有许可证吗?能商用吗?

A: 取决于 anthropic-algorithmic-art 的许可证。常见许可证包括 MIT(完全自由)、Apache-2.0(自由但有专利条款)、源可用(可看不能用)、GPL(强开源)。商用前请查仓库 LICENSE 文件。

进阶学习建议

如果想进一步用好 anthropic-algorithmic-art,建议按以下路径学习:

第 1 周:熟练使用

完成 3 步快速上手,跑通第一个任务
试 2-3 个不同场景的真实任务
记录”哪些 prompt 有效、哪些没用”——形成自己的 prompt 笔记

第 2 周:理解机制

阅读 Skill 的官方文档(README、SKILL.md)
了解 Skill 的”触发关键词”和”输出格式”
学习”如何用更具体的描述触发 Skill”

第 3-4 周:组合使用

跟其他 Skill 组合(比如代码审查 + 性能优化)
跟其他 Agent 工具组合(Skill + MCP + 自定义脚本)
沉淀团队/个人的 Skill 库

长期:贡献社区

把自定义的 Skill 开源到 GitHub
提 PR 改进现有 Skill
写使用心得分享到 CSDN/掘金/知乎

推荐资源:

官方文档:https://github.com/anthropics/skills
官方仓库 README 里的 Examples
社区最佳实践:Anthropic 官方博客 https://www.anthropic.com/blog
国内社区:CSDN AI 板块、掘金 AI 板块

避免的坑:

不要装太多 Skill(超过 10 个会拖慢 Agent)
不要把 Skill 装在不兼容的 Agent 上
不要直接复制 Skill 默认 prompt——要根据项目调整
定期 review Skill 库的实用性,清理不用的

参考链接

anthropic-algorithmic-art Skill 路径:https://github.com/anthropics/skills/tree/main/skills/algorithmic-art
p5.js 官方文档:https://p5js.org/reference/
Perlin 噪声原论文(ken perlin):https://mrl.cs.nyu.edu/~perlin/doc/oscar.html
The Nature of Code(算法艺术圣经):https://natureofcode.com/
generative-artistry 教程站:https://generativeartistry.com/

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。

algorithmic-art Skill 多维度简评

类别：创意设计 / 编程艺术仓库：anthropics/skills 关键依赖：p5.js、templates/viewer.html、templates/generator_template.js

一、核心定位与价值

算法艺术 Skill 是 Anthropic 官方 16 个 Skill 中最具创作性的一个。它不解决工程问题，而是让 AI 帮你生成原创的、可交互的、画廊级的算法艺术作品——直接输出可在浏览器运行的单个 HTML 文件。

它和普通”用 AI 画图”的本质区别是：

生成的是算法，不是图像：seeded randomness + p5.js 实时绘制，每一帧都是独特的
输出是可交互的 HTML：用户能调参数、换种子、点鼠标交互
强调原创美学：避免复制既有艺术作品，专注”运算法哲学”（Algorithmic Philosophy）
版权合规：纯生成代码，不依赖任何受版权保护的图像或风格

二、核心工作流：3 阶段

阶段 1：建立「演算法哲学」（.md 文件）

这是这个 Skill 最独特的设计——不是先写代码，而是先写一份”美学宣言”。

哲学必须涵盖：

数学关系和过程：运算过程如何表达？
随机性模式：噪声函数、流场、Lévy flights
涌现行为：粒子、流动、场、作用力
状态演化：时间维度上的演变
参数与混沌：可控的随机性

每段 4-6 句，整篇哲学 4-6 段。

阶段 2：p5.js 实现

基于哲学写代码，包含：

setup()：初始化画布
draw()：实时绘制循环
参数对象：可调变量
种子控制：randomSeed() + noiseSeed() 保证可复现
UI 控件：滑块、按钮、颜色拾取器

阶段 3：自包含 HTML 打包

输出单个 HTML 文件：

内联所有 CSS
通过 CDN 加载 p5.js
内联所有 JavaScript
包含侧边栏控件界面
双击即可在任何浏览器打开

三、5 个真实可用的设计哲学示例

示例 1：Organic Turbulence（有机湍流）

哲学：受自然法则约束的混沌，从无序中涌现的秩序。

算法表达：
- 多层 Perlin 噪声驱动的流动场
- 数万个粒子遵循向量力
- 轨迹累积形成有机密度图
- 多个噪声八度创造湍流与平静区域
- 颜色从速度与密度中涌现

示例 2：Quantum Harmonics（量子谐波）

哲学：离散实体展现出波状干涉模式。

算法表达：
- 网格初始化的粒子
- 每个粒子携带正弦波演化的相位值
- 接近时相位相互干涉
- 相长干涉 → 明亮节点
- 相消干涉 → 虚空

示例 3：Recursive Whispers（递归低语）

哲学：跨越尺度的自相似性，有限空间中的无限深度。

算法表达：
- 递归细分的分支结构
- 每分支有微小随机性但受黄金比例约束
- L-systems 或递归细分
- 微妙的噪声扰动打破对称
- 线宽随递归层递减

示例 4：Field Dynamics（场动力学）

哲学：通过对物质的影响让隐形力量现形。

算法表达：
- 从数学函数或噪声构建向量场
- 粒子在边缘诞生
- 沿场线流动
- 达到平衡或边界时消亡
- 视觉化显示轨迹

示例 5：Stochastic Crystallization（随机结晶）

哲学：随机过程结晶成有序结构。

算法表达：
- 随机圆 packing 或 Voronoi 镶嵌
- 从随机点开始
- 通过松弛算法演化
- 单元相互推挤直至平衡
- 颜色基于大小、邻居数、距中心距离

四、关键技术细节

4.1 种子控制（核心）

let seed = 12345;  // 或来自用户输入的 hash
randomSeed(seed);
noiseSeed(seed);

为什么必须：用户每次输入相同种子，得到完全相同的画面。这是”算法艺术”的灵魂——同一算法，不同种子 → 不同作品。

4.2 参数结构

let params = {
  seed: 12345,
  // 颜色
  // 数量（多少？）
  // 规模（多大？多快？）
  // 概率（可能性？）
  // 比例（什么比例？）
  // 角度（什么方向？）
  // 阈值（何时改变行为？）
};

参数不是”模式选项”，而是”系统可调属性”。

4.3 模板文件（必须读）

仓库包含两个模板：

templates/viewer.html：所有 HTML 输出的字面起点
- 固定部分：Anthropic 品牌色、Poppins/Lora 字体、浅色渐变背景、Seed 导航
- 变量部分：算法、参数 UI 控件
templates/generator_template.js：p5.js 最佳实践骨架

硬性规则：

❌ 不要从零写 HTML
❌ 不要发明自定义样式
✅ 保留 Anthropic 品牌特色
✅ 仅替换标注为 VARIABLE 的部分

4.4 必备功能清单

参数控件：滑块（数值参数）+ 拾色器（颜色）
种子导航：
- 显示当前种子编号
- Prev/Next 按钮
- Random 按钮
- Jump to seed 输入框
Actions：
- Regenerate（重新生成）
- Reset（重置参数）
- Download PNG（导出图片）

4.5 标准 HTML 结构

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>/* inline */</style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- Seed / Parameters / Colors / Actions -->
  </div>
  <script>
    let params = { ... };
    let seed = 12345;

    function setup() {
      createCanvas(1200, 1200);
      randomSeed(seed);
      noiseSeed(seed);
    }

    function draw() {
      background(0);
      // 你的生成算法
    }

    function regenerate() { /* 切换 seed 并重绘 */ }
  </script>
</body>
</html>

五、6 大实战场景与提示词模板

场景 1：商业海报背景

用 algorithmic-art 帮我做一张科技感的粒子系统海报：
- 暗紫底 + 青色粒子
- 2000 粒子
- 鼠标移动产生吸引力
- 1920x1080
- 配套一个简洁的 HTML 预览

场景 2：数据可视化艺术

把这组天气数据（温度 0-40°C，湿度 0-100%）转成生成艺术：
- 温度映射颜色（冷蓝 → 暖橙）
- 湿度映射粒子密度
- 时间序列生成动画
- 导出动画 GIF

场景 3：动态 Logo

基于我们公司的圆形 Logo，生成 3 个变体：
- 静止版（300 圆点围绕）
- 旋转版（粒子沿螺旋）
- 分解版（粒子爆炸后重组）
每个 HTML 自包含

场景 4：节日营销

生成春节主题算法艺术：
- 红 + 金配色
- 烟花粒子效果
- "新年快乐" 文字粒子化
- 配套 Download PNG 按钮

场景 5：互动教程

为 React Hooks 教程做 5 张互动封面图：
- 每张代表一个 hook（useState / useEffect / ...）
- 风格统一
- 鼠标 hover 时有粒子反应

场景 6：自定义品牌系统

为我们的品牌创建一套 5 张视觉资产：
- 主色 #FF5722
- 风格：硬朗的几何 + 微噪声扰动
- 可重复使用

六、安装与使用

6.1 安装命令

# Claude Code
/plugin install example-skills@anthropic-agent-skills

# 通用
npx skills add anthropics/skills --skill algorithmic-art

6.2 完整使用流程

用户输入 → 算法哲学 → p5.js 实现 → HTML 打包 → 用户调节参数 → 满意导出

6.3 与其他 Skill 的链式调用

artistic content → algorithmic-art（生成艺术）→ canvas-design（导出 PDF/PNG）→ brand-guidelines（保持品牌一致）

七、5 大反合理化（避免常见错误）

借口	反驳
”随便画点啥就行”	算法艺术的核心是哲学 + 算法过程，不是”随便画"
"用 DALL-E 生成更简单”	这不是图像，是可交互的算法过程
”复制一个 Flow Field 教程就行”	复制 = 没有原创哲学，违反 Skill 设计原则
”不用种子，每次随机就好”	没有 seed → 不可复现 → 失去算法艺术本质
”HTML 太大，分多个文件”	必须单文件，CDN + 内联，其他都是 VARIABLE

八、性能与限制

8.1 性能优化

粒子数控制：< 10000（实时性能）
使用 OffscreenCanvas：复杂场景
避免大数组：帧间复用
WebGL Mode：p5.js 的 WEBGL 模式加速 3D

8.2 输出大小

简单作品：~10KB HTML
中等：50-100KB
复杂：500KB-1MB（含大量 shadcn/ui 组件时）

8.3 浏览器兼容

✅ Chrome / Edge / Safari / Firefox 现代版本
✅ 移动端浏览器
❌ IE11（p5.js 1.7.0 不支持）

8.4 已知坑

p5.js 字体加载：必须在 preload() 中
CDN 失效：离线环境需下载 p5.js 内联
移动端触摸：鼠标事件需兼容 touch
大画布性能：> 2000x2000 可能卡顿

九、6 条实战技巧

哲学先于代码：写完哲学再写代码，AI 输出质量翻倍
种子必备：始终 randomSeed(seed) + noiseSeed(seed)
参数语义化：用描述性变量名（particleCount 不是 num）
配色克制：1-2 主色 + 背景
侧边栏必须：Seed 导航、参数、Actions 三大区
导出 PNG：用 saveCanvas('filename', 'png')

十、Q&A

Q: 必须懂 p5.js 吗？ A: 不必须。但懂基础语法（setup / draw / mousePressed）能改参数。Skill 会自动生成代码。

Q: 输出能商用吗？ A: 算法艺术是你/AI 生成的原创代码，版权归你。但要避免模仿特定艺术家风格以免侵权。

Q: 怎么保证多次生成风格统一？ A: 相同的算法 + 相同的哲学 → 风格一致。换 seed → 不同画面但同风格。

Q: 性能差怎么办？ A: 减少粒子数、降低画布分辨率、用 WEBGL 模式、OffscreenCanvas。

Q: 能生成视频吗？ A: 能。p5.js + MediaRecorder API 录制，或多帧导出 + ffmpeg 合成。

Q: p5.js 替代品？ A: Three.js（3D）、Canvas2D（无依赖）、WebGL（极致性能）、Processing.js（Java 移植版）。

十一、对比相关 Skill

Skill	区别
algorithmic-art	算法生成、可交互、可调参数
canvas-design	程序化生成海报（PNG/PDF 输出）
frontend-design	Web UI 设计（React/HTML）
brand-guidelines	品牌色字体规范（静态）

何时用哪个：

想要”活的艺术” → algorithmic-art
想要”一次性海报” → canvas-design
想要”Web 组件” → frontend-design

十二、总结

核心价值：

把”AI 画画”升级为”AI 写算法”
输出可交互、可调节、可复现的艺术
强调原创美学 + 版权合规

适用人群：

设计师（探索生成艺术）
前端开发者（需要动态视觉）
艺术家（实验性创作）
品牌（独特视觉资产）

投入产出比：⭐⭐⭐⭐（4/5）—— 按需装，是创意工作流的差异化工具。

配套文档：canvas-design 详细规则 | brand-guidelines 品牌规范

参考资料

📦 快速安装

1 Git Clone

git clone https://github.com/anthropics/skills.git

2 开发模式

ln -s skills/algorithmic-art ~/.claude/skills/algorithmic-art