algorithmic-art 技能实操：一个文件把 Claude 变成生成艺术工作室

「用代码画一张流场艺术」这件事，大模型单独也能做，但结果往往是一次性的：换个参数就要重写整段代码，换个随机数整张图就不可复现。anthropics/skills 仓库里的 algorithmic-art（Apache-2.0）用一份 19,769 字节的 SKILL.md 加两个模板文件，把「生成一件可交互、可复现、可探索的算法艺术作品」固化成了一套流程。这篇按 SKILL.md 的原文把这套流程拆开：先写宣言，再推「概念种子」，最后照模板产出单文件交互作品。文末附一次照此流程真实跑出来的成品截图。更多 AI 工具实操收录在站点总纲，姊妹篇 academy-guide 拆解同仓另一个技能。

两步走：先哲学，后代码

SKILL.md 开篇定义了它的产出物：算法哲学（.md 文件）、交互查看器（.html 文件）、生成算法（.js 文件），分两步完成——第一步创建「算法哲学」，第二步用 p5.js 把它表达成代码。所谓算法哲学，原文的解释是「计算性的美学运动」，要通过这些手段表达：计算过程与涌现行为、数学之美、种子化随机与噪声场、粒子/流/场/力、参数化变化与受控混沌。

听起来玄，官方给了五个可以直接参考的范例，整理成对照表：

五个范例全部译自 SKILL.md「PHILOSOPHY EXAMPLES」一节，文档注明这是缩略示例

本篇实测选的是第一个「Organic Turbulence」：分层 Perlin 噪声驱动的流场，数千粒子沿向量力运动，轨迹累积成有机密度图，多倍频噪声制造湍流区与平静区，颜色出自速度与密度——快粒子亮，慢粒子淡。

宣言本身有明确的格式要求：先给运动命名（1~2 个词），再写 4~6 段哲学正文，说明它如何通过计算过程与数学关系、噪声函数与随机模式、粒子行为与场动力学、时间演化与系统状态、参数化变化与涌现复杂度来呈现。SKILL.md 同时给了一条反直觉的写作指令：宣言必须反复强调最终算法「像是打磨了无数小时的产物、出自计算美学顶级专家之手」——这类措辞会被下一阶段的实现认真对待，直接影响代码的完成度。

概念种子：藏起来的那条线

流程的第二环节叫「DEDUCING THE CONCEPTUAL SEED」，SKILL.md 标注为关键步骤：在写算法之前，从原始请求里识别出那条微妙的概念线索。它的原则原文是：概念是「嵌在算法内部的微妙、小众的引用——不总直白，但始终精致」，熟悉主题的人能凭直觉感受到，其他人则只看到一件出色的生成作品。文档打了个比方：像爵士乐手借和声引用另一首歌——听得懂的人自然会心，听不懂的人也照样欣赏音乐。

落到实现上，这意味着参数、行为、涌现模式里都埋着与请求相关的暗线，但不明说。这一步没有代码可抄，完全是提示词工程——也是这个技能区别于「帮我随机画个图」的核心差异。SKILL.md 的原话值得原样读一遍：

Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.（像爵士乐手借算法和声引用另一首歌那样思考——听得懂的人自然会心，其他人欣赏的照样是生成之美。）——SKILL.md「DEDUCING THE CONCEPTUAL SEED」

模板：不许你从零写 HTML

第三环节是 p5.js 实现。SKILL.md 在这一节开头放了全篇唯一的强制阅读项（原文大写标注「STEP 0: READ THE TEMPLATE FIRST」）：写任何 HTML 之前，先用 Read 工具读 templates/viewer.html，以它为字面意义上的起点，而不仅是参考。

模板里固定不许动的部分：整体布局（页头、侧栏、主画布区）、Anthropic 品牌样式（Poppins/Lora 字体、浅色系、渐变背景）、侧栏的 Seed 区（种子显示、Prev/Next 按钮、Random 按钮、跳转输入框）、Actions 区的按钮。可以改的部分只有：p5.js 算法本体、参数对象、侧栏 Parameters 区的滑杆定义。要避免的坑也列得清楚：不许从零造 HTML、不许自创配色或暗色主题、不许改侧栏结构。

另一个模板 templates/generator_template.js（7,826 字节）是代码组织参考：参数怎么建、种子随机怎么用、类怎么拆。SKILL.md 特意强调它「不是模式菜单」，别从里面挑图案，学的是结构原则。

照流程真实跑一遍

这两个模板是公开可取的。我把 viewer.html 原样取回（只把 CDN 的 p5.js 1.7.0 换成本地文件以便离线渲染），按「Organic Turbulence」哲学范例补全模板中标注 // fill this in 的算法段：流场用 Perlin 噪声生成角度矩阵，5,000 个粒子沿场推进，轨迹以细线累积，颜色按流场角度在三色调色板间插值、按速度调透明度。跑起来的完整界面长这样：

官方 viewer.html 模板 + 按 SKILL.md 哲学范例补全的流场算法，本地渲染实拍（seed=12345，粒子 5000）

侧栏的每个控件都对应模板里写死的一块功能：Seed 区的 Prev/Next 逐个遍历种子，Random 跳到 1~999,999 的随机值，输入框可以直接跳转；四个滑杆是模板的 Parameters 骨架（Particle Count 1000~10000、Flow Speed 0.1~2.0、Noise Scale 0.001~0.02、Trail Length 2~20）；三个取色器直接改调色板。

SKILL.md 对种子这件事有专门的技术要求，即 Art Blocks 模式的可复现性——同一段代码、同一个种子，输出永远一致，这是「同一块版画印出不同印张」的基础：

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

同一段代码、同一个种子，输出永远一致。换个种子看效果：

同一算法两个种子的输出对比：构图、漩涡位置、色彩分布完全不同，但算法一字未改

单文件交互作品的硬性清单

最终产出物是一份自包含的 HTML：p5.js 从 CDN 引入，算法、参数控制、UI 全部内联，不依赖外部文件，在 claude.ai 的 artifacts 里或任意浏览器中直接可用。SKILL.md 给这份作品列了必须齐备的功能：数值参数用滑杆、颜色用取色器、参数变化实时生效、Reset 恢复默认值；种子导航四件套（显示、前进后退、随机、跳转）必须能用；被要求时生成 100 个变体（种子 1~100）。探索变化一节还给了两个进阶玩法：给特定种子做预设按钮（「Variation 1: Seed 42」），或做「画廊模式」把多个种子的缩略图并排展示。

版权立场与安装路径

这个技能的 description 末尾有一句立场声明：创作原创算法艺术，避免复制现有艺术家的作品以免侵犯版权。SKILL.md 正文没有展开解释，但把它写进触发描述里意味着每次激活都会被读到——生成艺术圈著名的「风格抄袭」争议，这里用一行触发词划了线。

安装与姊妹篇 academy-guide 完全同路径：Claude Code 里 /plugin marketplace add anthropics/skills 后装 example-skills@anthropic-agent-skills；Claude.ai 付费版开箱即用；API 走 Skills API。触发词包括「用代码创作艺术」「generative art」「algorithmic art」「流场」「粒子系统」。想手动魔改的话，整个技能就两个文件（SKILL.md + templates/），clone 仓库后整目录拷走即可——templates 缺一个，STEP 0 就过不去。

实测中遇到的三个坑

照流程跑的过程中有三件事值得记录。其一，模板的算法段是空壳：generateFlowField()、draw()、Particle 类里全是 // fill this in 占位——模板只交付 UI 骨架与品牌样式，算法完全按哲学现场写，这正对应 SKILL.md「90% 算法生成、10% 关键参数」的定位。其二，p5.js 1.7.0 的 stroke() 对颜色参数极其严格，混色计算里一旦混进非字符串/非颜色对象就会抛「not a valid color representation」并中断 draw 循环，画布停在撒点状态——用 lerpColor 算好颜色再传给 stroke() 就稳定了。其三，无头浏览器截动画首帧只有一帧的轨迹量，想让流线铺满画布得让 draw 循环多跑步数，正常浏览器里不受此影响。

本文依据 anthropics/skills 仓 README、skills/algorithmic-art/SKILL.md 及 templates/ 目录（viewer.html、generator_template.js）整理并实测，模板与文档版权归原作者所有。