想用代码做原创纹理、流动线条或可调参数的抽象画面,不必把每一次尝试都写成新的提示词。Anthropic 的 Algorithmic Art Skill 把创作意图、算法实现与交互参数组织成一套流程,适合学习生成艺术以及制作可复现的视觉实验。
本教程以原创“雨后水纹”视觉练习为例,讲清下载、宿主启用、模板依赖、任务描述和输出验收。它不是照片生成模型,也不是安装后立即运行的成品应用。下文是依据固定源码编写的操作方案,本轮未运行包内代码,没有把示意图当作实际生成作品。
一、先弄清包里有什么
这份 Skill 的主要文件是 SKILL.md、LICENSE.txt 和两个模板文件:templates/viewer.html、templates/generator_template.js。前者说明创作流程,后两者提供交互页面与算法组织的参考结构。
官方说明的核心过程是先写算法创作理念,再把理念转成 p5.js 生成逻辑。输出可以包括理念文档与交互式 HTML,画面由代码规则、参数和随机种子共同决定,而不是从一张现成图片随机裁切。
源码包只有约 19KB,不包含大模型权重、完整设计软件或全部浏览器依赖。模板使用外部 p5.js 与字体资源。页面文件能保存到本地,不等于断网后所有功能都能工作;这是首次使用最容易误解的地方。
二、下载版本与目录核对
本站百度网盘包对应官方 commit 2c5958ecac7cee2b583967a2c4981d0f4a75c579,页面简写为 commit 2c5958ecac7c。这是明确的固定版本,不宣称它永远是最新版本。当前按站点安排仅提供已经核验的百度渠道,夸克同步保持暂停。
解压后应看到:
algorithmic-art/
SKILL.md
LICENSE.txt
templates/
viewer.html
generator_template.js
README-来源与安装说明.txt分发保留 Apache-2.0 许可证和来源说明。许可证允许范围与外部素材、字体、品牌标识的使用问题不能混为一谈;使用现成角色、照片或商业字体时,还需要分别核实依据。不能仅凭“AI 生成”就向客户保证一切权利都已解决。
本包 SHA256 为 f66f5fba8ad89ff2d5097ab57ed089258b7474657904500d6e8ad76629887e0b。可用本地文件哈希工具对照下载包,确认没有拿错版本;校验一致也不能代替阅读源码和权限检查。
三、让支持 Skill 的宿主加载指引
先确认自己使用的宿主支持 Skill。普通网页聊天框能够讨论生成艺术,不代表已经安装这份 Skill。不同宿主的导入目录、文件上传入口和账号权限不同,应按宿主官方说明处理,不能随便把某个隐藏文件夹路径复制到所有工具里。
在支持官方插件市场的 Claude Code 会话中,官方仓库提供的示例集合安装方式是:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills这些是宿主会话命令,不是系统终端命令。集合安装可能包含多个示例 Skill,实际取得版本也可能不同于本站固定包;安装后检查插件状态、实际源码与 algorithmic-art 是否可用。
如果你选择手动导入固定包,应保留完整模板目录,让助手能读取相关文件。不要只复制一小段介绍,再声称已经启用完整功能。开始前用一个没有敏感文件的独立练习目录保存输出,不给练习任务额外的账户访问权。
四、把“好看”改写成具体任务
第一次创作不要同时追求动画、复杂粒子、文字排版和多种导出格式。这里先做静态水纹画面,保留种子、密度和线宽三类可解释控制,再逐项扩展。
可以向宿主提交下面的任务:
使用 algorithmic-art,为原创“雨后水纹”设计生成艺术练习。
先给出简短创作理念,说明波纹如何通过数学关系和受控随机变化形成。
读取 Skill 的 viewer.html 与 generator_template.js,再提出实现方案。
保留原模板的交互框架,只替换明确的算法与参数区域。
第一版为静态画面,固定种子 42,画布 1200×1200。
只提供密度、线宽、色彩三个必要控制,不添加账户或上传功能。
支持重新生成、重置和 PNG 下载,并说明外部依赖。
不要模仿具体在世艺术家的标志性风格,不加入第三方角色和商标。
生成文件后先报告文件路径与待验收项目;没有实际打开测试就不能写已通过。这里的尺寸、种子和参数是本例设计选择,不是所有作品必须采用的标准。让工具先解释每个参数影响什么,再实施,避免出现十几个滑块却只有一个真正有效的情况。
五、理解随机种子能保证什么
官方指引要求使用带种子的随机与噪声控制,例如 randomSeed(seed) 与 noiseSeed(seed)。它让你有机会在相同算法、参数和环境下回到某个具体变化,而不是每次刷新都无法复现。
仅记录 seed 不够。还应保留代码版本、参数、依赖版本和渲染阶段。如果算法用了未受控制的 Math.random(),或者动画运行到不同帧再截图,同一个 seed 也未必得到你预期的一模一样画面。
检查种子的方法很简单:保存默认参数,生成 seed 42 的静态结果;切换到 43;再切回 42,比较画面。这个步骤是验收方案,本文没有宣称已经运行并得到两张完全一致的图片。
想做动画时,再增加固定帧或固定时间点的导出约定。不要把“相同随机初始化”宣传成跨浏览器、跨版本的像素级一致保证。
六、打开页面与检查依赖
宿主输出 HTML 后,先查看文件引用了哪些外部脚本和字体,确认它们与预期一致,再在练习环境打开。官方模板引用 CDN 中的 p5.js;网络不可用、浏览器策略或依赖加载失败,都可能导致白屏。
看到白屏先查浏览器控制台的实际错误:找不到脚本、语法错误、画布未创建和参数事件未绑定,需要不同的修复方法。不要通过关闭浏览器安全保护来强行打开,也不要把陌生远程脚本追加进页面碰运气。
如果确实需要离线交付,要求制作者明确列出并处理外部依赖及相关许可,再测试断网后的页面。不能只把 HTML 打包给客户,就默认所有依赖已经离线化。字体替换也可能改变控件宽度和中文显示,需要重新检查布局。
七、逐项验收交互与导出
先验收画面:主体是否可辨、线条是否过密、颜色对比是否合适,有没有超出画布的内容。示例中的“水纹”应通过具体的形状关系呈现,而不是仅仅把标题写成水纹。
再验收控件:密度与线宽是否实际改变画面;重置是否恢复约定的默认值;种子切换是否更新显示并重新初始化;重复生成是否留下旧画布或叠加重复事件。
最后验收 PNG:文件能否打开、尺寸是否符合计划、导出的是否是画布而非网页截图、有无意外的空白边缘。画布尺寸与页面显示尺寸不同,不能只看网页上的方框大小就判断输出分辨率。
八、常见问题与下一步
换种子没有变化:检查参数是否真的传入随机初始化,控件是否只改变了显示数字,没有重新生成。
画面越来越慢:先减少图形数量或分辨率,检查是否每次刷新都启动新的动画循环。先保证小规模稳定,再增加复杂度。
重置后颜色不恢复:检查默认参数是否被修改,以及界面显示与算法内部值是否同时恢复。
下载为空白:核对实际画布是否完成绘制、导出函数是否引用正确对象。不要仅凭下载按钮存在就认定导出可用。
一次完整交付应包含理念文档、可读源码、参数与种子记录、依赖说明及验收结果。先把一种视觉语言做稳定,再扩展海报纹理、网页背景或动态画面。Skill 提供组织方法和模板,真正的作品质量仍取决于设计、实现与检查。

还没有公开评论,欢迎分享你的想法。