// 使用 p5.js 创建带有种子随机性和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术，而不是复制现有艺术家的作品，以避免版权侵犯。
将 Anthropic 官方品牌颜色和字体应用于任何可能需要 Anthropic 视觉风格的作品。适用于品牌颜色或样式指南、视觉格式化或公司设计标准的场景。
使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时，应使用此技能。创作原创视觉设计，切勿复制现有艺术家的作品以避免版权侵权。
引导用户通过结构化的工作流程来协作撰写文档。当用户想要撰写文档、提案、技术规格说明、决策文档或类似的结构化内容时使用。这个工作流程帮助用户高效地传递上下文信息、通过迭代优化内容，并验证文档对读者是否有效。当用户提到撰写文档、创建提案、起草规格说明或类似的文档任务时触发。
全面的文档创建、编辑和分析功能，支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档（.docx 文件）时使用：(1) 创建新文档，(2) 修改或编辑内容，(3) 处理修订追踪，(4) 添加批注，或其他任何文档任务
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
一套帮助我撰写各类内部沟通文档的资源，使用公司偏好的格式。当被要求撰写任何形式的内部沟通文档（状态报告、领导层更新、3P 更新、公司简报、常见问题解答、事件报告、项目更新等）时，Claude 应使用此技能。
| name | algorithmic-art |
| description | 使用 p5.js 创建带有种子随机性和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术，而不是复制现有艺术家的作品，以避免版权侵犯。 |
| license | 完整条款见 LICENSE.txt |
算法哲学是计算美学运动，然后通过代码来表达。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
这分两步进行：
首先，执行以下任务：
开始时，创建一个算法哲学（不是静态图像或模板），它将通过以下方式诠释：
考虑这种方法：
哲学必须强调：算法表达。涌现行为。计算之美。种子变化。
命名运动（1-2个词）："有机湍流" / "量子谐波" / "涌现静止"
阐述哲学（4-6段——简洁但完整）：
为了捕捉算法本质，表达这种哲学如何通过以下方式体现：
关键指南：
哲学必须引导下一个版本以算法方式表达想法，而不是通过静态图像。美存在于过程中，而不是最终帧中。
"有机湍流" 哲学：混沌受自然法则约束，秩序从无序中涌现。 算法表达：由分层 Perlin 噪声驱动的流场。数千个粒子沿着矢量力流动，它们的轨迹累积成有机密度图。多个噪声八度创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮，慢速粒子逐渐暗淡。算法运行直到达到平衡——一种精心调整的平衡，每个参数都由计算美学大师经过无数次迭代精炼。
"量子谐波" 哲学：离散实体表现出波状干涉图案。 算法表达：粒子初始化在网格上，每个携带一个通过正弦波演化的相位值。当粒子靠近时，它们的相位干涉——建设性干涉创建明亮节点，破坏性干涉创建空洞。简单的谐波运动生成复杂的涌现曼陀罗。精心频率校准的结果，每个比率都经过仔细选择以产生共振之美。
"递归低语" 哲学：跨尺度的自相似性，有限空间中的无限深度。 算法表达：递归细分的分支结构。每个分支略有随机化，但受黄金比例约束。L系统或递归细分生成既数学又有机的树状形态。微妙的噪声扰动打破完美对称。线条粗细随每个递归层级减少。每个分支角度都是深度数学探索的产物。
"场动力学" 哲学：通过对物质的影响使不可见的力可见。 算法表达：由数学函数或噪声构建的矢量场。粒子在边缘诞生，沿场线流动，当达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示轨迹——不可见力的幽灵般证据。通过力平衡精心编排的计算舞蹈。
"随机结晶" 哲学：随机过程结晶成有序结构。 算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。单元相互推开直到平衡。颜色基于单元大小、邻居数量或与中心的距离。涌现的有机平铺感觉既随机又不可避免。每个种子产生独特的晶体之美——大师级生成算法的标志。
这些是精简示例。实际的算法哲学应该是4-6个实质性段落。
算法哲学应该是4-6段。 用诗意的计算哲学填充它，将预期愿景汇聚在一起。避免重复相同的观点。将此算法哲学输出为 .md 文件。
关键步骤：在实现算法之前，识别原始请求中的微妙概念线索。
基本原则： 概念是嵌入算法本身的微妙、小众参考——不总是字面的，始终是精致的。熟悉该主题的人应该能直觉地感受到它，而其他人只是体验到一个大师级的生成构图。算法哲学提供计算语言。推导出的概念提供灵魂——悄悄编织到参数、行为和涌现模式中的概念DNA。
这非常重要：参考必须如此精炼，以至于它在不宣布自己的情况下增强作品的深度。想想一个爵士音乐家通过算法和声引用另一首歌——只有知道的人才会捕捉到，但每个人都欣赏生成之美。
哲学和概念框架建立后，通过代码表达它。在继续之前暂停整理思路。仅使用创建的算法哲学和以下说明。
关键：在编写任何 HTML 之前：
templates/viewer.html 使用 Read 工具避免：
遵循以下做法：
模板是基础。在其上构建，不要重建它。
为了创建画廊级的计算艺术，让它活起来并呼吸，使用算法哲学作为基础。
种子随机性（Art Blocks 模式）：
// 始终使用种子以保证可重复性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
参数结构 - 遵循哲学：
建立从算法哲学中自然涌现的参数，考虑："这个系统的哪些特性可以调整？"
let params = {
seed: 12345, // 始终包含种子以保证可重复性
// 颜色
// 添加控制你的算法的参数：
// - 数量（多少个？）
// - 比例（多大？多快？）
// - 概率（可能性多大？）
// - 比率（什么比例？）
// - 角度（什么方向？）
// - 阈值（行为何时改变？）
};
设计有效参数时，专注于系统需要可调整的属性，而不是考虑"模式类型"。
核心算法 - 表达哲学：
关键：算法哲学应该决定构建什么。
通过代码表达哲学，避免思考"我应该使用哪种模式？"而是思考"如何通过代码表达这种哲学？"
如果哲学是关于有机涌现，考虑使用：
如果哲学是关于数学之美，考虑使用：
如果哲学是关于受控混沌，考虑使用：
算法从哲学流出，而不是从选项菜单中。
为了指导实现，让概念本质指导创意和原创选择。构建一些表达这个特定请求愿景的东西。
画布设置：标准 p5.js 结构：
function setup() {
createCanvas(1200, 1200);
// 初始化你的系统
}
function draw() {
// 你的生成算法
// 可以是静态的（noLoop）或动画的
}
关键：为了达到精通，创建感觉像是由生成艺术大师经过无数次迭代而涌现的算法。仔细调整每个参数。确保每个图案都有目的地涌现。这不是随机噪声——这是通过深厚专业知识精炼的受控混沌。
输出：
templates/viewer.html 构建的自包含交互式生成艺术（参见步骤 0 和下一节）HTML 工件包含一切：p5.js（来自 CDN）、算法、参数控件和 UI——全部在一个文件中，可立即在 claude.ai 工件或任何浏览器中工作。从模板文件开始，而不是从头开始。
提醒：templates/viewer.html 应该已经被阅读（参见步骤 0）。使用该文件作为起点。
为了允许探索生成艺术，创建一个单一的、自包含的 HTML 工件。确保此工件可立即在 claude.ai 或任何浏览器中工作——无需设置。内联嵌入所有内容。
templates/viewer.html 文件是基础。它包含所需的精确结构和样式。
固定（始终完全如所示包含）：
可变（为每个艺术作品自定义）：
每个艺术作品都应该有独特的参数和算法！ 固定部分提供一致的用户体验——其他一切都表达独特的愿景。
1. 参数控件
2. 种子导航
3. 单一工件结构
<!DOCTYPE html>
<html>
<head>
<!-- 来自 CDN 的 p5.js - 始终可用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* 所有样式内联 - 干净、极简 */
/* 画布在上，控件在下 */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- 所有参数控件 -->
</div>
<script>
// 所有 p5.js 代码内联在这里
// 参数对象、类、函数
// setup() 和 draw()
// UI 处理程序
// 一切自包含
</script>
</body>
</html>
关键：这是单一工件。没有外部文件，没有导入（除了 p5.js CDN）。一切内联。
4. 实现细节 - 构建侧边栏
侧边栏结构：
1. 种子（固定） - 始终完全如所示包含：
2. 参数（可变） - 为艺术创建控件：
<div class="control-group">
<label>参数名称</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
<span class="value-display" id="param-value">...</span>
</div>
添加与参数数量相同的 control-group div。
3. 颜色（可选/可变） - 如果艺术需要可调整的颜色则包含：
4. 操作（固定） - 始终完全如所示包含：
要求：
HTML 工件可立即工作：
工件默认包含种子导航（上一个/下一个/随机按钮），允许用户在不创建多个文件的情况下探索变体。如果用户想要突出显示特定变体：
这就像从同一块版上创建一系列版画——算法是一致的，但每个种子揭示其潜力的不同方面。交互性意味着用户通过探索种子空间发现他们自己的最爱。
用户请求 → 算法哲学 → 实现
每个请求都是独特的。过程包括：
常量：
其他一切都是可变的：
为了达到最佳结果，相信创造力并让哲学指导实现。
此技能包括有用的模板和文档：
templates/viewer.html：所有 HTML 工件的必需起点。
templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。
关键提醒：