🎨 创意设计 全难度 📦 Anthropic

algorithmic-art

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

8.5 /10 ★★★★☆
#免费#设计#Anthropic
📄 相关文章

📊 评分明细

📦 打包完整度
2.1 2.1 / 2.5
🎯 实用性
2.1 2.1 / 2.5
📖 文档清晰度
1.7 1.7 / 2
👥 社区影响力
1.3 1.3 / 1.5
🔗 集成度
1.3 1.3 / 1.5

🎯 适用场景

免费设计Anthropic

anthropic-algorithmic-art 快速入门

Anthropic 官方算法艺术 Skill，基于 p5.js，让 AI Agent 直接生成参数化的算法艺术作品——从几何图案到粒子系统到分形树。

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

anthropic-algorithmic-art 是 Anthropic 在 anthropics/skills 仓库中维护的算法艺术生成 Skill，基于 p5.js 创意编程框架封装。它解决的问题是：让 AI Agent 不只会”描述”一幅画，而是能”生成”可运行的艺术代码——输出的是 p5.js 草图，用户可以在浏览器中实时看到效果，还能调整参数生成变体。

对设计师和创意开发者来说，这个 Skill 的价值在于：把”我有一个模糊的视觉概念”直接转化为”可运行的参数化艺术作品”。AI 负责写 p5.js 代码，你负责调参数和选方向——像有一个永远不会累的生成艺术助手。

准备工作

  • 支持 Agent：Claude Code（主推）、支持 Skills 协议的 Agent。
  • 运行环境：p5.js Web Editor 或本地 HTML 文件，无需额外依赖（p5.js 通过 CDN 加载）。
  • 目标场景：NFT 生成艺术、海报背景设计、数据可视化、互动装置原型。
  • 浏览器：Chrome/Firefox/Safari 最新版即可。

3 步快速上手

第 1 步：安装 Skill

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/algorithmic-art ~/.claude/skills/

第 2 步：在 Claude Code 中调用

claude

发起任务：

用 algorithmic-art Skill 帮我生成一个流动粒子系统：300 个彩色粒子在画布上移动，彼此靠近时连线，颜色从暖色渐变到冷色。生成一个可以打开浏览器直接看的 HTML 文件。

第 3 步：在浏览器中预览

Agent 会生成包含 p5.js CDN 的完整 HTML 文件。用浏览器打开，实时看到粒子系统效果。需要导出时，p5.js 支持 saveCanvas() 保存为 PNG/SVG。

常见踩坑

  1. p5.js 全局模式 vs 实例模式：全局模式下 createCanvas(400, 400) 直接工作，但在现代前端框架中可能冲突。Skill 默认使用实例模式（new p5(sketch)），兼容性更好。
  2. 性能陷阱：同时渲染 10000 个粒子会让浏览器卡死。Skill 内置性能预算检查，超过 2000 个对象会建议优化。
  3. 随机种子未固定：想让同一个参数生成同样的图案，需要固定 randomSeed()。Skill 默认不固定，每次生成不同效果。
  4. SVG 导出颜色模式：p5.js 的 save() 导出的 SVG 颜色可能和 Canvas 上不一致（RGB vs HSL 转换问题），Skill 会提示用 colorMode(RGB) 固定。
  5. 移动端触摸事件：p5.js 默认鼠标事件在移动端不触发，需要额外添加 touchStarted() 等触摸事件。Skill 提供响应式模板。

初级用法

  • 几何图案生成：描述”圆形排列 + 六边形网格”，Skill 输出可调整的几何图案代码。
  • 粒子系统：重力、斥力、连接线的粒子效果，适合产品展示页面的动态背景。
  • 分形树/L-System：用递归生成自然形态图案，如分形树、蕨类叶片。

高级玩法

  • 参数化导出流水线：用循环改变参数（如颜色、密度、速度），自动生成 100 张变体 → 用 FFmpeg 合成动画。
  • 音频可视化：结合 p5.js 的 p5.FFT 实现实时音频频谱驱动的视觉效果。
  • 互动艺术：鼠标/键盘/摄像头交互，适合创作互动装置和展览作品。

小技巧

  • 在 p5.js Web Editor（editor.p5js.org）中预览和调参，比本地文件更方便。
  • 导出高清图用 saveCanvas('art', 'png') 设置高 DPI 的 Canvas。
  • 复杂图案先生成静态版，确认效果后再加动画。
  • 用 frameRate(30) 限制帧率，减少 CPU 占用，移动端尤其重要。
  • p5.js 的 push()/pop() 用于隔离变换（平移、旋转、缩放），不影响后续绘制。

常见问题 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 文件。

本文基于官方文档和公开资料整理，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 必备功能清单

  1. 参数控件：滑块（数值参数）+ 拾色器（颜色）
  2. 种子导航：
    • 显示当前种子编号
    • Prev/Next 按钮
    • Random 按钮
    • Jump to seed 输入框
  3. 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

基于我们公司的圆形 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 已知坑

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

九、6 条实战技巧

  1. 哲学先于代码：写完哲学再写代码，AI 输出质量翻倍
  2. 种子必备：始终 randomSeed(seed) + noiseSeed(seed)
  3. 参数语义化：用描述性变量名（particleCount 不是 num）
  4. 配色克制：1-2 主色 + 背景
  5. 侧边栏必须：Seed 导航、参数、Actions 三大区
  6. 导出 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-designWeb UI 设计（React/HTML）
brand-guidelines品牌色字体规范（静态）

何时用哪个：

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

十二、总结

核心价值：

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

适用人群：

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

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

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

参考资料

  1. anthropics/skills - algorithmic-art
  2. p5.js 官方文档
  3. The Nature of Code - Daniel Shiffman
  4. Generative Art - Processing/p5.js 教程

📊 评分与标签

评分说明

总分 8.5/10 · P_优选

📊 可观测社区指标（数据核验日期：2026-07-05）

  • GitHub: anthropics/skills ★158k, 🔱18.7k, 282 Issues, 722 PRs, 43 Commits
  • p5.js（核心依赖）: processing/p5.js ★23,770, 🔱3,763, 493 Issues
  • npm: p5 周下载量 121,502（2026-06-28 ~ 2026-07-04）
  • 许可证: Apache 2.0
  • Agent Skills 标准: agentskills.io — algorithmic-art 遵循该开放标准

📦 可安装性 2.0/2.5

  • 安装方式：git clone 仓库后将 skills/algorithmic-art 软链到 ~/.claude/skills/ 或通过 Claude Code 插件 /plugin marketplace add anthropics/skills 一键安装全部 16 个官方 Skill
  • 纯 Markdown + p5.js 脚本格式，无额外依赖（p5.js 通过 CDN 加载），3 分钟内完成部署
  • 对比 canvas-design（同仓库）：安装流程完全相同，均为 anthropics/skills 的子目录，一键安装无差异
  • 对比 frontend-design（同仓库）：frontend-design 仅需 SKILL.md 无额外模板文件，algorithmic-art 附带 templates/ 目录提供可复用代码模板，略微增加安装复杂度但提供更多开箱即用资源

🎯 实用性 2.0/2.5

  • 核心能力：让 AI 用 p5.js 生成可参数化的算法艺术作品，涵盖分形图形、粒子系统、流体模拟、流向场、几何图案 5 种类型
  • 两阶段工作流：先创建”算法哲学”（Algorithmic Philosophy），再通过 p5.js 将其表达为可交互的视觉作品，输出 .md + .html + .js 三个文件
  • 提供 seeded randomness（种子随机性）确保输出可复现，支持实时交互调整参数，输出可在浏览器中直接运行
  • 对比 canvas-design（同仓库）：canvas-design 输出静态 PNG/PDF 设计作品，algorithmic-art 输出动态交互式 HTML/JS 算法艺术，两者定位互补——前者适合海报/印刷品，后者适合网页动效/NFT/数据可视化
  • 对比 slack-gif-creator（同仓库）：slack-gif-creator 专注 Slack GIF 动图生成，algorithmic-art 覆盖更广的算法艺术类型且输出可在任意浏览器运行，通用性更强

📖 文档质量 1.8/2.0

  • SKILL.md 含完整的两阶段指令（Algorithmic Philosophy Creation → p5.js Expression），5 种算法哲学示例（Organic Turbulence / Quantum Harmonics / Recursive Whispers / Field Dynamics / Stochastic Crystallization），每种含具体参数指导
  • templates/ 目录提供可复用的 p5.js 代码模板，LICENSE.txt 明确 Apache 2.0 许可条款
  • 缺少中文翻译版、视频教程和交互式示例画廊，高级参数（噪声八度数、粒子生命周期、颜色映射策略）说明不够详细
  • 对比 canvas-design（同仓库）：两者文档结构类似（SKILL.md + templates），但 algorithmic-art 的哲学示例更丰富（5 种 vs canvas-design 的 3 种设计哲学方向），且附带了具体的 p5.js API 参考
  • 对比 frontend-design（同仓库）：frontend-design 的 SKILL.md 更侧重设计原则和排版指导，文档更长但缺少代码模板；algorithmic-art 提供可执行模板更偏向实操

👥 社区活跃 1.5/1.5

  • 父仓库 anthropics/skills ★158k，Anthropic 官方维护持续更新（43 commits），Issues 282 个（活跃讨论），PRs 722 个（社区贡献活跃）
  • algorithmic-art 是 16 个官方 Skill 中创意设计类的核心 Skill，Reddit/𝕏 等平台有大量用户分享生成作品
  • Apache 2.0 许可证，允许自由商用和二次创作
  • p5.js 核心依赖社区极其活跃：★23,770，npm 周下载 12 万+，493 个开放 Issue 持续迭代
  • 对比 obra/superpowers（★40k+）：anthropics/skills 星数约 4 倍，但 superpowers 更新频率更高（更多 commits）
  • 对比 addyosmani/agent-skills（★37k+）：anthropics/skills 星数约 4.3 倍，均为大厂维护的顶级 Skill 仓库

🔗 兼容性 1.2/1.5

  • 基于 p5.js 库纯前端运行，兼容 Claude Code、Cursor、OpenCode、Windsurf 等所有支持 Agent Skills 标准的工具
  • 输出标准 HTML/JS 文件，可直接在任意浏览器预览，无需任何后端或构建工具
  • Apache 2.0 许可允许自由商用和二次创作，无许可证兼容性顾虑
  • 限制：需 AI Agent 具备代码执行能力（p5.js 环境），纯聊天式 AI（无代码执行）无法使用该 Skill
  • 对比 canvas-design（同仓库）：canvas-design 输出 PNG/PDF，兼容性更广（任何设备可查看），但缺少 algorithmic-art 的实时交互能力
  • 对比 MCP 类 Skill：algorithmic-art 不依赖 MCP 协议，仅依赖 Agent Skills 标准，集成门槛更低但功能边界也更明确

评分依据可追溯至公开来源，每项分数均有明确理由和数据支撑。

🏷️ 标签说明

📋 来源与核验记录

  • ✅ 已核验: anthropics/skills — 页面存在，★158k, 🔱18.7k, 282 Issues, 722 PRs
  • ✅ 已核验: algorithmic-art SKILL.md — 页面存在，含完整两阶段指令和 5 种哲学示例
  • ✅ 已核验: algorithmic-art 目录 — 含 SKILL.md, templates/, LICENSE.txt
  • ✅ curl 已验证: p5.js GitHub API — ★23,770, 🔱3,763, Issues 493
  • ✅ curl 已验证: npm p5 下载量 — 周下载 121,502
  • ✅ 已核验: agentskills.io — Agent Skills 标准官网，页面正常
  • ⚠️ 间接来源: Reddit r/ClaudeAI 社区分享 — 搜索 “algorithmic art” 可见用户作品，但未逐条验证每条帖子内容
  • ❌ 死链: 无