前言¶

生成艺术（Generative Art）在开发者社区里一直是个热门话题：用代码画出一幅幅「每次运行都不完全相同、却又可复现」的作品，既考验算法设计，也考验参数调优与交互体验。自己搭 p5.js 项目、写种子随机、做侧边栏滑块，往往要重复很多样板代码；若把审美方向、技术约束和 UI 规范写成文档，每次又要重新向 AI 解释一遍。

Anthropic 在官方 Skills 仓库里提供了一个创意向示例 Skill——algorithmic-art。它把「算法哲学 → p5.js 实现 → 可交互 HTML 成品」整条链路封装成可复用的 Agent 指令，并内置 templates/viewer.html 等模板资源。本文基于官方资料核实后，介绍它是什么、如何安装，以及典型用法。

这是什么¶

algorithmic-art 是 Anthropic 维护的 Agent Skill，位于 anthropics/skills 仓库的 skills/algorithmic-art 目录。Skill 采用通用的 SKILL.md 格式：YAML 前置元数据（name、description）加上 Markdown 正文指令，可被 Cursor、Claude Code、Claude.ai 等支持 Agent Skills 的工具按需加载。

官方 description 概括其用途：用 p5.js 创作算法艺术，支持种子随机（seeded randomness）与交互式参数探索；当用户请求「用代码做艺术、生成艺术、流场、粒子系统」等任务时触发。Skill 强调创作原创算法艺术，而非复制已有艺术家作品，以避免版权风险。

与多数「写业务代码」的 Skill 不同，algorithmic-art 展示的是 Agent Skills 的另一种可能：把领域方法论（生成美学 + 工程规范）打包成 Agent 可执行的流程，而不只是补全几行函数。

核心功能与亮点¶

根据官方 SKILL.md，该 Skill 的工作流分为两大阶段：

1. 算法哲学（Algorithmic Philosophy）¶

Agent 先输出一份 4–6 段的「算法哲学」文档（.md），相当于生成艺术运动的宣言：命名美学运动、阐述计算过程、噪声与随机性、粒子/场/力、参数化变化与受控混沌等。哲学强调过程重于成品——美来自算法执行，而非静态帧。

Skill 还包含「概念种子（Conceptual Seed）」步骤：从用户原始需求中提炼一条 subtle 的概念线索，嵌入参数与行为，供熟悉主题的读者隐约感知，而不必字面化表达。

2. p5.js 交互式成品（HTML Artifact）¶

哲学确定后，Agent 基于 bundled 的 templates/viewer.html 模板实现算法，输出单文件、自包含的 HTML：内联样式与脚本，p5.js 从 CDN 加载，浏览器或 Claude Artifacts 中可直接打开。

技术要点（官方明确要求）：

• 种子随机：遵循 Art Blocks 式可复现模式，使用 randomSeed(seed) 与 noiseSeed(seed)，同一 seed 必须产生相同画面。
• 参数对象：params 含 seed 及与算法哲学对应的可调项（数量、尺度、概率、比例、角度、阈值等）。
• 固定 UI 骨架：保留 Anthropic 品牌色、Poppins/Lora 字体、侧边栏布局；Seed 区（显示、Prev/Next、Random、Jump）与 Actions 区（Regenerate、Reset、Download PNG）不可改。
• 可变部分：p5.js 算法、Parameters 滑块/颜色选择器、以及可选的 Colors 区——每件作品应有自己的参数集与算法逻辑。
• 画布：典型 createCanvas(1200, 1200)，可静态（noLoop()）或动画。

Skill 目录还附带 templates/generator_template.js，供参考参数组织与 seeded randomness 写法；最终算法应内联进 HTML，而非单独 .js 文件。

安装与启用¶

Skill 是一个文件夹（含 SKILL.md 与 templates/ 等），需整目录安装，不能只复制单个 Markdown 文件。

Cursor¶

Cursor 在启动时会扫描 .cursor/skills/、~/.cursor/skills/ 等路径。将官方目录复制到项目中即可：

# 在项目根目录执行
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropics-skills
mkdir -p .cursor/skills
cp -r /tmp/anthropics-skills/skills/algorithmic-art .cursor/skills/

文件夹名应与 Skill 的 name 字段一致（algorithmic-art）。重启 Cursor 或重新打开项目后，Agent 会根据 description 自动匹配相关任务；也可在对话中显式提及该 Skill。

也可通过 Cursor Customize → Rules → Add Rule → Remote Rule (Github) 引用 GitHub 仓库，具体以 Cursor Skills 文档 为准。

Claude Code¶

官方 README 说明可通过 Plugin 市场安装示例 Skill 集：

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

algorithmic-art 属于仓库中的创意/设计类示例，安装 example-skills 插件后即可在对话中提及使用。

Claude.ai¶

官方说明：该仓库中的示例 Skill 已对 Claude.ai 付费计划用户开放；自定义 Skill 的上传与启用方式见 Using skills in Claude。

其他工具¶

Agent Skills 已作为开放标准发布（见 Anthropic 工程文与 agentskills.io）。Codex CLI、Claude Agent SDK 等若支持 .agents/skills/ 或等效目录，可将同一文件夹放入对应路径；各工具细节以各自官方文档为准。

典型用法示例¶

安装并启用后，用自然语言描述审美目标即可，无需手写 p5.js 脚手架。官方 description 中的触发场景包括：generative art、algorithmic art、flow fields、particle systems 等。

示例提示词：

用 algorithmic-art 的风格，做一幅「有机湍流」主题的生成艺术：
多层 Perlin 噪声流场 + 粒子轨迹，seed 可切换，侧边栏能调粒子数量和噪声尺度。

帮我写一段算法哲学，并实现成可交互 HTML：主题是「随机过程结晶成有序结构」，
参考 Voronoi/圆填充松弛算法，要支持 seed 1–100 快速浏览变体。

Agent 按 Skill 指令通常会依次产出：

1. 算法哲学 Markdown（命名运动 + 4–6 段阐述）；
2. 基于 templates/viewer.html 的单文件 HTML（含 p5.js 算法与参数 UI）。

种子与参数相关的核心代码模式（摘自官方 SKILL.md）：

let params = {
  seed: 12345,
  // 依算法哲学添加：particleCount, noiseScale, flowSpeed 等
};

function initializeSystem() {
  randomSeed(params.seed);
  noiseSeed(params.seed);
  // 重建粒子/场并重绘
}

打开 HTML 后，可用 Prev/Next/Random/Jump 探索 seed 空间，用滑块实时改参，Reset 恢复默认，Download 导出 PNG。

适用场景与注意事项¶

适合谁、什么场景：

• 想快速验证生成艺术创意，又不想每次从零搭 p5.js + 控件 UI；
• 教学或分享：需要可复现 seed 与可调参数的演示作品；
• 探索 Agent Skills 在「创意/设计」而不仅是「CRUD/测试」上的用法；
• 作为编写自定义 Skill 的参考——尤其是「主文档 + 模板资源 + 渐进式加载」的结构。

限制与注意：

• 官方 README 声明：仓库 Skill 仅供演示与教育，Claude 实际行为可能与 Skill 文本不完全一致，关键用途需自行充分测试。
• 仅安装受信任来源的 Skill；algorithmic-art 会指导 Agent 读取本地模板、生成 HTML，使用前建议浏览 SKILL.md 与 templates/ 内容。
• Skill 要求基于模板修改 UI，不要从零写 HTML 或改掉 Seed/Actions 固定区，否则与规范不一致。
• 输出强调原创生成算法；勿用于模仿特定艺术家可识别风格以规避版权争议。
• 大型动画需注意性能；Skill 要求复杂而不噪、可实时时保持流畅。

小结¶

algorithmic-art 把「算法美学宣言 + p5.js 工程规范 + 交互查看器模板」打包成一个 Agent Skill，让 AI 编程助手能稳定地产出可探索、可复现的生成艺术作品。它适合作为入门示例，也适合作为你自建「设计类 Skill」的结构范本。

官方地址：https://github.com/anthropics/skills/tree/main/skills/algorithmic-art

更多关于 Agent Skills 设计理念，可参考 Anthropic 工程文章：Equipping agents for the real world with Agent Skills。