跳转到使用指南
algorithmic-art作者 Anthropic

Algorithmic Art Skill.

Claude Code 和 Codex 的图像处理 skill:使用 p5.js 生成算法艺术,支持种子粒子、流场和可调参数。

  • Images & Generative Art
  • 生成艺术
anthropics/skills · skills/algorithmic-art/SKILL.mdSKILL.md
--- name: algorithmic-art description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations. --- ## ALGORITHMIC PHILOSOPHY CREATION ## DEDUCING THE CONCEPTUAL SEED ## P5.JS IMPLEMENTATION ## INTERACTIVE ARTIFACT CREATION ## VARIATIONS & EXPLORATION ## THE CREATIVE PROCESS
正文和章节标题读取自 2026-09-14 的上游文件 · 完整 19,735 字符

01 功能说明

algorithmic-art Skill 在 Claude Code 和 Codex 中做什么

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这个 skill 通过两步流程,用 p5.js 创作原创算法艺术:先定义一个算法哲学(一种计算美学运动,以 markdown 宣言的形式表达),再把它实现为一个自包含的交互式 HTML 产物。每件作品都使用带种子的随机性以保证可复现性,用户可以通过种子控制在不同变体之间切换。

这个 skill 强调涌现行为、数学之美和参数化变体——构建活的算法,而不是静态图像。输出包括一份 4-6 段的哲学文档,以及一个单独的 HTML 文件,内嵌 p5.js 代码、参数滑块和 Anthropic 品牌 UI,可直接在浏览器或 claude.ai artifacts 中运行。

它产出什么

  • 算法哲学,以 markdown 文件呈现,为该运动命名,并用 4-6 段文字阐述它如何通过计算过程体现
  • 单个自包含的 HTML 产物,内嵌 p5.js 算法、参数控制、种子导航和 Anthropic 品牌 UI,可在浏览器或 claude.ai 中直接使用
查看示例提示词 ↗

工作方式

  1. 01
    创建算法哲学

    撰写一份 4-6 段的宣言,为一个生成艺术运动命名,并描述它如何通过计算过程、噪声函数、粒子行为和涌现复杂性体现出来。

  2. 02
    推导概念种子

    在编码之前,从原始需求中找出一个细微的概念线索,作为无形的 DNA 嵌入算法——熟悉的人会凭直觉感受到这种精妙的呼应,而其他人则体验到纯粹的生成之美。

  3. 03
    基于 viewer 模板构建

    阅读 templates/viewer.html,并以它为字面意义上的起点。

  4. 04
    实现带种子的算法

    用 p5.js 代码表达哲学理念,使用带种子的随机性(randomSeed 和 noiseSeed),使同一个种子始终产生完全相同的输出。

  5. 05
    设计可调参数

    创建由算法哲学自然衍生的参数:先问这个系统有哪些特性可以调整——数量、尺度、概率、比例、角度或阈值——而不是按图案类型来思考。

  6. 06
    输出单个产物

    生成一个自包含的 HTML 文件,内联引入来自 CDN 的 p5.js、算法、参数控制和 Anthropic 品牌 UI。

02 找到适合场景

何时使用 algorithmic-art Skill

当工作是此类图像工作时,在 Claude Code 或 Codex 中使用 algorithmic-art Skill。下面的适用范围和限制来自该 Skill 自己的文件。

适合场景

  • 希望用代码创作生成艺术、算法艺术、流场或粒子系统的用户
  • 创建活的算法,通过涌现行为和受控的混沌,让每次运行都产生独特输出
  • 通过交互式控件和种子导航探索参数化变体,发现算法潜力的不同侧面

了解边界

  • 复制现有艺术家的作品,这会侵犯版权
  • 创建静态图像或模板,而非具有涌现行为的计算过程
  • 无法通过种子随机性、噪声场、粒子、流动或数学关系来表达的作品

需要提供的信息

  • 用户请求或指令skill 用作基础的细微输入,不会限制创作自由。

03 Skill 内部

algorithmic-art skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 5 条具体指令、默认值与限制——文件中真正改变结果的那一部分。

  1. 理念驱动实现

    算法理念决定要构建什么。

  2. 从 viewer.html 模板开始

    在编写任何 HTML 之前,先使用 Read 工具读取 templates/viewer.html,并以该文件作为字面上的起点。

  3. 反复强调专家级工艺水准

    理念必须多次强调:最终算法应当显得经过精心打磨、历经无数次迭代精炼,出自该领域绝对顶尖高手之手,体现深厚的计算专业功底。

  4. 巧妙嵌入概念线索

    原始请求中的概念引用必须经过充分提炼,在不自我张扬的前提下增强深度——如同爵士乐手通过算法和声引用另一首曲子。

  5. 四到六段的理念

    算法理念必须为 4-6 段实质内容,阐述该运动如何通过计算过程、噪声函数、粒子行为、时间演化与参数变化得以体现。

04 投入使用

在 Claude Code 或 Codex 中安装 algorithmic-art

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 algorithmic-art 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/anthropics/skills --skill algorithmic-art

skills/algorithmic-art/SKILL.md 的通用 skills CLI 形式;该仓库可能会记录自己的路径。

给 Skill 一个首次图像工作任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Create algorithmic art inspired by the way mycelium networks communicate through chemical signals underground. I want something that feels organic and interconnected, with growth patterns that emerge over time. Use earthy tones and make the parameters tunable so I can explore different colony behaviors.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 通过测试种子导航(上一个/下一个按钮)并确认视觉可复现性,验证同一种子每次都能产生完全相同的输出
  • 确认该 HTML 产物能在 claude.ai 或任何浏览器中立即运行,无需外部文件、额外设置或服务器
  • 检查所有参数滑块是否都会实时更新作品,且重置按钮能恢复默认值
  • 确保产物使用与 templates/viewer.html 完全相同的布局结构、Anthropic 品牌元素(Poppins/Lora 字体、浅色配色、渐变背景)以及侧边栏组织方式
  • 测试种子控件是否正常工作:显示当前种子、上一个/下一个按钮循环切换种子、随机按钮生成新种子、跳转到种子输入框可定位到指定种子
  • 验证算法是在表达理念,而非复制通用图案,其工艺水准应显得经过精心精炼

在 OpenDesign 中 algorithmic-art 已内置:Plugins → Skills,在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Anthropic
Repository
github.com/anthropics/skills 分支 main
Skill 文件
skills/algorithmic-art/SKILL.md 在验证时记录了内容校验和;提交 34040c9
License
Apache-2.0 来自 skills/algorithmic-art/LICENSE.txt;SKILL.md 说明"完整条款见 LICENSE.txt"。
仓库星标数
176,183 GitHub 快照拍摄于 2026-09-14,针对整个 anthropics/skills 仓库,该仓库在此目录中包含 7 个 skills。不是 algorithmic-art 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 算法理念创作关于撰写 4-6 段宣言的说明,用以定义一个具有涌现行为的计算美学运动
  2. 核心认知说明 skill 以用户输入为基础,先创造哲学,再用代码将其以算法方式表达出来
  3. 如何生成一套算法哲学为流派命名,并阐述它如何通过计算过程显现,同时强调工艺性
  4. 哲学示例五个精简示例,展示流派名称及其算法化表达方式:有机湍流、量子谐波、递归低语、场动力学、随机结晶
  5. 核心原则核心理念:过程重于产物、参数化表达、艺术自由、纯粹的生成艺术、专家级工艺
  6. 推导概念种子如何从请求中辨认出一条微妙的概念线索,并将其隐形地嵌入算法
  7. P5.js 实现通过带种子随机的 p5.js 代码并配合参数来表达该哲学的技术说明
  8. 第 0 步:先阅读模板必做步骤:阅读 templates/viewer.html,并在编写 HTML 之前将其作为字面起点
  9. 技术要求种子随机模式、参数结构指南,以及如何让哲学决定算法的选择
  10. 工艺要求最终算法在平衡、色彩和谐、构图、性能与可复现性方面的标准
  11. 输出格式规定将哲学输出为 markdown,并基于模板构建单个自包含 HTML 产物
  12. 交互式产物创建关于模板中哪些部分固定、哪些可变,以及如何构建侧边栏的详细说明
Skill 自身的描述
"使用 p5.js 创建算法艺术,具有种子随机性和交互式参数探索。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此功能。创建原创算法艺术,而不是复制现有艺术家的作品以避免版权侵犯。"

来自 SKILL.md 的前置描述。完整文件约 19,735 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 algorithmic-art skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

这个 skill 会输出什么?

该 skill 输出两个文件:一份包含 4–6 段算法哲学的 markdown 文档,以及一个自包含 HTML 产物,其中内嵌 p5.js 代码、参数控件与 Anthropic 品牌 UI。该 HTML 可直接在 claude.ai 或任何浏览器中运行,无需外部依赖。

Algorithmic Art

在实际图像工作任务上运行 algorithmic-art。

algorithmic-art skill 内置在 OpenDesign 中。下载该应用,在 Plugins → Skills 中选择该 skill,粘贴上面的提示,并在查看结果之前阅读计划。

终端
npx skills add https://github.com/anthropics/skills --skill algorithmic-art