创意设计 · 技能模板
AlgorithmicArtSkill
参考官方 algorithmic-art 示例，将创作流程拆分为“算法哲学撰写”与“p5.js 生成表达”两阶段，帮助团队持续交付高质量的编码艺术作品与交互演示。
Skill 结构概览
- 指令层：强调先生成 4-6 段算法哲学，再据此输出 p5.js 代码与交互页面。
- 资源层：`templates/viewer.html` 作为交互容器，带参数控制与品牌化 UI。
- 工具层：默认使用 code execution 执行 `generator_template.js`，快速填充噪声场与粒子系统逻辑。
推荐素材
- templates/viewer.html —— 统一的交互查看器，保留控件与说明栏。
- templates/generator_template.js —— 预置 p5.js 初始化、随机种子与绘制循环。
- LICENSE.txt —— 记录使用条款，方便在企业环境合规落地。
SKILL.md 关键片段
---
name: algorithmic-art
description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.
tags:
- generative-art
- p5js
workflow:
- Draft an ALGORITHMIC PHILOSOPHY manifesto (4-6 段)
- Deduce conceptual seed 作为核心隐喻
- 实现 p5.js 草图，保留随机种子与 UI 控件
resources:
- templates/viewer.html
- templates/generator_template.js
- LICENSE.txt实现建议
运行脚本前先复制 `templates` 目录到技能仓库，保持 Viewer 结构不变，仅替换标注的变量区域。撰写哲学时反复强调“master-level craftsmanship”与“seeded randomness”，让 Claude 在执行阶段自动调用高质量噪声参数。需要导出静态海报时，可额外调用 `saveCanvas` 将帧输出为 .png。