★ FEATURED ARTICLE 人工智能AI 技能AI 评测【免费下载链接】skillsPublic repository for Agent Skills项目地址https://gitcode.com/GitHub_Trending/skills3/skills点击查看免费下载本文围绕开源仓库中algorithmic-art这一 Agent Skill 展开系统讲解如何通过「算法哲学创作 p5.js 生成艺术实现」两阶段流水线产出 90% 由算法生成、10% 由关键参数控制的交互式生成艺术品。读完本文你将掌握种子随机性Seeded Randomness、噪声场、粒子系统与流场的建模思路以及如何基于 viewer.html 模板 构建自包含、可实时调参、可复现的单个 HTML 交互作品。algorithmic-art Skill 是什么algorithmic-art是仓库中面向「代码生成艺术」场景的 Agent Skill其 SKILL.md 描述了一个明确的能力边界当用户请求创作生成艺术、算法艺术、流场flow fields或粒子系统时Skill 会引导 Claude 完成一次完整的创作闭环。它的产出物固定为三类文件.md文件记录「算法哲学」Algorithmic Philosophy——一种计算美学流派的宣言.html文件一个可直接运行的交互式查看器.js文件承载生成算法的核心逻辑。整个创作被拆分为两个严格有序的阶段算法哲学创作先以文字定义一个生成美学运动计算过程、涌现行为、数学之美、种子化变化p5.js 生成艺术表达再把这个哲学翻译成可运行代码产出交互式 HTML 作品。这一设计把「思考」与「实现」解耦先明确计算世界观再让代码去表达它从而避免生成千篇一律的「带随机数的静态图」。第一阶段算法哲学创作关键理解Skill 强调一个核心心智模型用来界定输入、创作物与下一步的关系收到什么用户的输入只是「地基」subtle input不应约束创作自由度创作什么一个算法哲学 / 生成美学运动接下来发生什么同一版本接收哲学后用代码表达它——产出 90% 算法生成、10% 关键参数的 p5.js 草图。因此哲学必须反复强调五个关键词算法表达Algorithmic expression、涌现行为Emergent behavior、计算之美Computational beauty、种子化变化Seeded variation。如何生成算法哲学第一步为运动命名1~2 个词。例如 Organic Turbulence有机湍流、Quantum Harmonics量子谐波、Emergent Stillness涌现的静止。第二步写出 4~6 段完整但凝练的哲学宣言。宣言需要回答这个哲学如何通过以下维度显现计算过程与数学关系噪声函数与随机模式粒子行为与场动力学时间演化与系统状态参数变化与涌现复杂度第三条关键准则Skill 用了整整一节来强调避免冗余每个算法面向只出现一次不要重复叙述噪声理论、粒子动力学或数学原理除非是在补充新的深度反复强调工艺水准哲学必须多次强调最终算法应当看起来「经过无数小时打磨、被悉心雕琢、出自顶尖领域专家之手」——这是 Skill 明确要求重复出现的框架建议使用诸如 meticulously crafted algorithm精心雕琢的算法、the product of deep computational expertise深厚计算专业知识的产物、painstaking optimization煞费苦心的优化、master-level implementation大师级实现之类的措辞留下创作空间算法方向要具体但也要足够精炼给实现者留出高层次解释性选择的空间。五个哲学示例SKILL.md 给出了五个经过压缩的示例完整哲学实际应为 4~6 段。这五个示例同时也是算法的雏形值得逐一拆解运动名称哲学Philosophy算法表达Algorithmic ExpressionOrganic Turbulence 有机湍流被自然法则约束的混沌秩序从无序中涌现多层 Perlin 噪声驱动的流场数千粒子沿矢量力运动轨迹累积成有机密度图多倍频噪声制造湍流区与平静区颜色由速度与密度决定——快粒子燃烧发亮慢粒子淡入阴影算法运行直至平衡Quantum Harmonics 量子谐波离散实体表现出类波干涉图样粒子在网格上初始化各携带随正弦波演化的相位值邻近粒子的相位相互干涉——相长干涉形成亮节点相消干涉形成空洞简谐运动生成复杂涌现曼陀罗Recursive Whispers 递归低语跨尺度的自相似性有限空间中的无限深度递归细分的分支结构每根分支略微随机化但受黄金比例约束L 系统或递归细分生成既数学又有机的树状形态细微噪声扰动打破完美对称线宽随递归层级递减Field Dynamics 场动力学通过物质效应让不可见的力量可见由数学函数或噪声构造矢量场粒子从边缘诞生、沿场线流动到达平衡或边界时消亡多个场可吸引、排斥或旋转粒子画面只展示轨迹——不可见力量的幽灵证据Stochastic Crystallization 随机结晶随机过程结晶为有序结构随机圆填充或 Voronoi 镶嵌从随机点出发经松弛算法演化细胞相互推开直至平衡颜色由细胞大小、邻居数或到中心距离决定每个种子都产生独一无二的晶体之美六大核心原则SKILL.md 用「ESSENTIAL PRINCIPLES」一节锁定了哲学的基调算法哲学创作一个将要由代码表达的计算世界观过程重于产物始终强调美来自算法执行过程每次运行都是独一无二的参数化表达思想通过数学关系、力、行为来传达而非静态构图艺术自由下一个 Claude 将按算法方式诠释哲学——要为实现留出创作余地纯粹生成艺术目标是「活的算法」而非「带随机性的静态图像」专家工艺反复强调最终算法必须显得被精心雕琢、历经无数次迭代、出自计算美学顶级专家之手。哲学宣言最终应以.md文件形式输出篇幅 4~6 段充满诗意但逻辑严谨且不重复相同论点。推断概念种子Conceptual Seed在动手写算法之前Skill 插入了一个关键步骤从原始请求中识别一条微妙的、概念性的线索。这条线索的定位非常特殊概念是嵌入算法内部的、微妙的、小众的引用subtle, niche reference embedded within the algorithm itself——不总是字面化的但始终是精巧的。熟悉该主题的人应当凭直觉感受到它其他人则只体验到一个大师级的生成作品。算法哲学提供的是计算语言而推断出的概念提供的是灵魂——一种悄悄编织进参数、行为和涌现模式中的「概念 DNA」。Skill 用了一个传神的类比就像爵士乐手通过和声即兴引用另一首歌只有懂的人能捕捉到但所有人都能欣赏那份生成之美。这一步骤保证了作品有「安静的深度」参考如此精炼以至于它提升作品深度却不自我宣告。第二阶段p5.js 实现⚠️ STEP 0先读模板再写任何 HTML这是全篇最重要的一条硬性纪律。在写任何 HTML 之前用 Read 工具读取 templates/viewer.html研究其精确的结构、样式与 Anthropic 品牌标识把该文件当作字面起点LITERAL STARTING POINT而非灵感来源固定部分原样保留头部header、侧边栏结构、Anthropic 配色/字体、种子控件、操作按钮只替换可变部分文件注释中标注的算法、参数、参数 UI 控件。同时明确列出应避免的做法❌ 从零手写 HTML❌ 自创自定义样式或配色方案❌ 使用系统字体或深色主题❌ 改动侧边栏结构。以及必须遵循的实践✅ 复制模板的精确 HTML 结构✅ 保留 Anthropic 品牌标识Poppins/Lora 字体、浅色系、渐变背景✅ 维持侧边栏布局Seed → Parameters → Colors? → Actions✅ 只替换 p5.js 算法与参数控件。从源码看viewer.html 文件头部的注释直接写明了这套「保留 / 创造性编辑」的边界即保留整体结构、Anthropic 品牌标识、种子导航区、自包含结构创造性编辑 p5.js 算法、参数定义与 UI 控件。技术需求1. 种子随机性Art Blocks 模式可复现性是整个 Skill 的技术基石同一个种子必须永远产生相同的输出。规范要求始终显式使用种子// ALWAYS use a seed for reproducibility let seed 12345; // or hash from user input randomSeed(seed); noiseSeed(seed);在 generator_template.js 中这一逻辑被封装为initializeSeed(seed)函数并注明调用后所有random()与noise()调用都会变成确定性的。也就是说只要在setup()中先执行种子初始化粒子的初始位置、噪声场的取值、分支的角度——一切随机量都会随种子复现。2. 参数结构追随哲学设计参数时要问的问题是「这个系统有哪些可调节的品质」而不是「我要哪种图案类型」。参数对象的基本骨架如下let params { seed: 12345, // Always include seed for reproducibility // colors // Add parameters that control YOUR algorithm: // - Quantities (how many?) // - Scales (how big? how fast?) // - Probabilities (how likely?) // - Ratios (what proportions?) // - Angles (what direction?) // - Thresholds (when does behavior change?) };模板源码进一步揭示了参数对象的设计动机generator_template.js 注释说明把所有可调参数集中在一个对象中可以方便地连接到 UI 控件、重置为默认值、序列化保存配置。而 viewer.html 则用let defaultParams {...params};保存一份默认参数快照供 Reset 按钮恢复——这解释了「一个参数对象」在工程上的实际收益。3. 核心算法让哲学决定建造什么Skill 反复强调避免思考「该用哪种图案」转而思考「如何用代码表达这个哲学」。文档给出了三条哲学→算法映射线索若哲学关于有机涌现考虑随时间累积/生长的元素、受自然规则约束的随机过程、反馈回路与相互作用若哲学关于数学之美考虑几何关系与比例、三角函数与谐波、由精确计算产生意外图案若哲学关于受控混沌考虑严格边界内的随机变化、分岔与相变、从无序中涌现秩序。算法从哲学中流出而非从选项菜单中挑选。模板文件的generateFlowField()、draw()与Particle类均留空并标注 fill this in正是为了强制实现者用自己的哲学去填空而不是照抄一个现成流场算法。4. Canvas 标准结构function setup() { createCanvas(1200, 1200); // Initialize your system } function draw() { // Your generative algorithm // Can be static (noLoop) or animated }viewer.html 中的实际setup()还展示了模板约定createCanvas(1200, 1200)后通过canvas.parent(canvas-container)把画布挂载到主区域并隐藏加载提示。工艺要求CRAFTSMANSHIPSkill 对「大师级」给出了可操作的定义算法必须让人觉得经过了无数次的迭代打磨每一个参数都被精心调校每一个图案都带着目的涌现。这不是随机噪声而是经过深度专业打磨的受控混沌。五个可验证的标准平衡复杂但不视觉嘈杂有序但不僵硬色彩和谐深思熟虑的调色板而非随机 RGB 值构图即使在随机中也保持视觉层次与流动性能平滑执行若为动画则针对实时渲染优化可复现性同一种子始终产生完全一致的输出。创建交互式 Artifact固定 vs 可变唯一的创作边界viewer.html是全部作品的地基。Skill 用一节专门厘清哪些东西永远不动、哪些东西可以自由发挥FIXED永远原样包含布局结构header、sidebar、主画布区Anthropic 品牌标识UI 颜色、字体、渐变侧边栏 Seed 区块种子显示、Prev/Next 按钮、Random 按钮、跳转种子输入框 Go 按钮侧边栏 Actions 区块Regenerate 按钮、Reset 按钮。VARIABLE每件作品按需定制整个 p5.js 算法setup/draw/类参数对象定义这件作品需要什么侧边栏 Parameters 区块控件数量、参数名、滑杆 min/max/step、控件类型滑杆、输入框等Colors 区块可选有些作品需要取色器有些用固定色有些是单色的——按需决定。每一件作品都必须拥有独一无二的参数和算法。固定部分提供一致的 UX其余一切都表达这件作品独有的视野。必备特性1. 参数控件数值参数使用滑杆粒子数、噪声尺度、速度等调色板颜色使用取色器参数变化时实时更新Reset 按钮恢复默认值。从 viewer.html 可看到标准的控件 HTML 模式每个control-group包含一个label、一个input[typerange]带 min/max/step/value/oninput和一个value-display数值回显。模板默认给出四个示例滑杆Particle Count1000~10000step 500默认 5000、Flow Speed0.1~2.0step 0.1默认 0.5、Noise Scale0.001~0.02step 0.001默认 0.005、Trail Length2~20step 1默认 8——它们本身就是一个流场粒子系统的最小参数集。2. 种子导航显示当前种子号Previous/Next 按钮循环切换种子Random 按钮生成随机种子输入框可跳转到任意种子用户要求时生成 100 个变体种子 1~100。viewer.html 中的种子控制函数实现了这套完整逻辑updateSeed()校验正整数输入、previousSeed()用Math.max(1, params.seed - 1)保证种子最小为 1、nextSeed()递增、randomSeedAndUpdate()在 1~999999 之间随机取种。每次种子变化都会重新调用initializeSystem()完成系统重建。3. 单文件 Artifact 结构!DOCTYPE html html head !-- p5.js from CDN - always available -- script srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js/script style /* All styling inline - clean, minimal */ /* Canvas on top, controls below */ /style /head body div idcanvas-container/div div idcontrols !-- All parameter controls -- /div script // ALL p5.js code inline here // Parameter objects, classes, functions // setup() and draw() // UI handlers // Everything self-contained /script /body /html这是一个单一 artifact除 p5.js CDN 外无任何外部文件、无 import一切内联。4. 侧边栏构建侧边栏四个区块的骨架在模板中已经固化SeedFIXED——种子显示 Prev/Next/Random/Jump 按钮ParametersVARIABLE——每个参数一个控件组div classcontrol-group labelParameter Name/label input typerange idparam min... max... step... value... oninputupdateParam(param, this.value) span classvalue-display idparam-value.../span /divColorsOPTIONAL/VARIABLE——作品需要可调色才加取色器固定色或单色则整段删去ActionsFIXED——Regenerate 按钮、Reset 按钮、Download PNG 按钮。硬性验收标准种子控件必须全部可用prev/next/random/jump/display所有参数必须有 UI 控件Regenerate、Reset、Download 按钮必须生效保留 Anthropic 品牌标识指 UI 样式而非作品配色。使用 artifactHTML artifact 生成后立即可用零配置在 claude.ai作为交互式 artifact 展示立即运行作为文件保存后在任意浏览器打开——无需服务器分享直接发送这个 HTML 文件——它完全自包含。变体与探索模板默认内置种子导航prev/next/random 按钮用户无需创建多个文件即可探索变体。若用户需要高亮特定变体Skill 提供了两种可选增强种子预设按钮如 Variation 1: Seed 42、Variation 2: Seed 127Gallery Mode在同一个 artifact 内并排展示多个种子的缩略图。Skill 用了一个精妙的比喻这就像从同一块印版印制一系列版画——算法保持一致但每个种子都揭示出该算法潜力的不同侧面。交互性让用户通过探索种子空间自己发现最爱的那一版。创作流程全景Skill 把整个流程压缩成一条链用户请求 → 算法哲学 → 实现每一步都有明确任务解读用户意图——用户寻求的是什么美学创作算法哲学4~6 段——描述计算路径用代码实现——构建表达该哲学的算法设计合适参数——哪些品质应该可调构建匹配的 UI 控件——为这些参数制作滑杆/输入框。常量Anthropic 品牌标识颜色、字体、布局、种子导航始终存在、自包含 HTML artifact。其余一切皆可变算法本身、参数、UI 控件、视觉结果。模板与源码深度解析viewer.html唯一合法的起点viewer.html 是全套作品唯一允许的骨架来源。从源码可以提炼出它的四层构成品牌层:root变量定义 Anthropic 品牌色板——暗色#141413、浅色#faf9f5、中灰#b0aea5、浅灰#e8e6dc、橙#d97757、蓝#6a9bcc、绿#788c5d。字体方面引入 Poppins正文无衬线 Lora标题衬线正文区使用浅色线性渐变背景。这些 CSS 变量构成所有作品的「品牌常量」viewer.html 中可见其完整定义。布局层flex 双栏布局——左侧 320px 侧边栏半透明磨砂背景、圆角、阴影、可滚动右侧主画布区。#canvas-container限宽 1000px 并圆角包裹画布移动端max-width: 600px自动切换为纵向堆叠viewer.html 中可见响应式处理。控件层滑杆使用橙色圆形滑块hover 时放大并加深按钮分三级主橙 / 次蓝 / 三绿button-row让多个按钮等宽并排。交互层resetParameters()用defaultParams快照恢复所有滑杆、取色器与种子显示再调用initializeSystem()重建系统窗口load事件触发updateSeedDisplay()完成 UI 初始化。种子控制逻辑对非法输入做了防御——updateSeed()中若输入不是有效正整数则回退显示当前种子。generator_template.jsp5.js 最佳实践清单generator_template.js 不是图案菜单而是结构与原则的参考实现。它明确声明不要复制流场示例去构建哲学要求的东西。其核心工程建议包括参数组织所有可调参数收敛到单一params对象便于连接 UI、重置、序列化种子初始化initializeSeed()同时调用randomSeed()与noiseSeed()保证random()与noise()全部确定性生命周期三模式静态生成setup 中完成 noLoop()、动画生成逐帧更新、用户触发再生成默认noLoop()参数变化时redraw()类结构涉及多实体粒子、代理、细胞、节点时用类封装且明确要求update()状态与display()渲染分离性能大量元素时预计算、用空间哈希做简单碰撞检测、减少 sqrt/三角等昂贵运算动画目标 60fps工具函数hexToRgb、colorFromPalette按索引取调色板色、mapRange、easeInOutCubic、wrapAround越界回绕常用模式fadeBackground(opacity)用带透明度的背景矩形实现轨迹/淡出效果填充色即 Anthropic 浅色250, 249, 245getNoiseValue()封装噪声取值vectorFromAngle()从角度构造向量导出exportImage()调用saveCanvas(generative-art- params.seed, png)文件名天然包含种子号便于按种子归档作品。模板的结尾提醒值得每一位实现者铭记这些是工具与原则不是配方。算法哲学应该指导你创造什么这套结构帮助你把它创造得更好。适用前提与边界需要说明几点适用前提本文描述的工作流依赖浏览器端的 p5.js 1.7.0 CDN见 viewer.htmlHTML 作品需要联网加载 p5.js 与 Google FontsPoppins/Lora在 claude.ai 中作为 artifact 展示、在任意浏览器中打开、或直接分享自包含 HTML 文件均可。仓库同时提供 LICENSE.txtApache 2.0说明分发与使用的许可边界。Skill 本身是演示与教育性质的实现实际使用的效果会因 Agent 与运行环境而异建议在依赖其产出物前先在自己的环境中充分测试。对希望深入研究的读者本仓库中与本 Skill 直接相关的三个文件是最佳入口SKILL.md流程定义、viewer.html唯一合法的交互骨架、generator_template.jsp5.js 工程最佳实践。把哲学当作灵魂、模板当作骨架、种子当作指纹你就能从「画一张图」走向「创作一个每一次运行都独一无二的活的算法」。赞分享人工智能AI 技能AI 评测【免费下载链接】skillsPublic repository for Agent Skills项目地址https://gitcode.com/GitHub_Trending/skills3/skills点击查看免费下载相关推荐algorithmic-art 技能实战用 p5.js 将算法哲学转化为可复现的生成艺术algorithmic art 技能实战用 p5.js 将算法哲学转化为可复现的生成艺术 本篇文章围绕 agentic awesome skills 仓库中的AI 技能AI 插件如何用tag命令3分钟上手macOS文件标签管理从安装到基本操作如何用tag命令3分钟上手macOS文件标签管理从安装到基本操作 macOS的文件标签功能是组织文件的强大工具但很多用户不知道如何高效利用。 tag命令 是WeChatMsg 全解析微信聊天记录如何从加密数据库变成 HTML、Word 和年度报告WeChatMsg 全解析微信聊天记录如何从加密数据库变成 HTML、Word 和年度报告 你电脑里的微信聊天记录其实锁在一个打不开的加密数据库里。WeCh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
