Menu
使用 p5.js 创建算法艺术，具有种子随机性和交互式参数探索。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术而非复制现有艺术家的作品以避免版权侵权。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
创建高质量 MCP (Model Context Protocol) 服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。用于构建 MCP 服务器以集成外部 API 或服务，支持 Python (FastMCP) 或 Node/TypeScript (MCP SDK)。
将 Anthropic 官方品牌颜色和字体应用于任何可能受益于 Anthropic 外观和感觉的产物。当需要应用品牌颜色、样式指南、视觉格式或公司设计标准时使用。
使用设计哲学在 .png 和 .pdf 文档中创建精美的视觉艺术。当用户要求创建海报、艺术作品、设计或其他静态作品时应使用此技能。创作原创视觉设计，绝不复制现有艺术家的作品以避免侵犯版权。
引导用户通过结构化工作流程共同创作文档。当用户想要编写文档、提案、技术规范、决策文档或类似结构化内容时使用。此工作流程帮助用户高效传递上下文、通过迭代完善内容，并验证文档对读者是否有效。当用户提到编写文档、创建提案、起草规范或类似文档任务时触发。
当用户想要创建、读取、编辑或操作 Word 文档（.docx 文件）时使用此技能。触发条件包括：任何提及「Word 文档」、「word document」、「.docx」，或请求生成带有格式化内容（如目录、标题、页码或信头）的专业文档。当从 .docx 文件中提取或重组内容、在文档中插入或替换图片、在 Word 文件中执行查找替换、处理修订或批注，或将内容转换为精美的 Word 文档时也应使用。如果用户要求生成「报告」、「备忘录」、「信函」、「模板」或类似的 Word 或 .docx 文件交付物，请使用此技能。不要用于 PDF、电子表格、Google Docs 或与文档生成无关的通用编码任务。
创建独特的、生产级别的前端界面，具有高设计质量。当用户要求构建 Web 组件、页面、artifact、海报或应用程序时使用此技能（示例包括网站、落地页、仪表板、React 组件、HTML/CSS 布局，或者在美化任何 Web UI 时）。生成富有创意、精致的代码和 UI 设计，避免通用的 AI 美学。
| name | algorithmic-art |
| description | 使用 p5.js 创建算法艺术，具有种子随机性和交互式参数探索。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术而非复制现有艺术家的作品以避免版权侵权。 |
| license | Complete terms in 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, // 始终包含种子以确保可重现性
// colors
// 添加控制您的算法的参数：
// - 数量（多少个？）
// - 规模（多大？多快？）
// - 概率（多大可能性？）
// - 比率（什么比例？）
// - 角度（什么方向？）
// - 阈值（行为何时改变？）
};
要设计有效的参数，专注于系统需要可调的属性，而不是考虑"模式类型"。
核心算法 - 表达哲学：
关键：算法哲学应决定要构建什么。
要通过代码表达哲学，避免思考"我应该使用哪种模式？"，而是思考"如何通过代码表达这一哲学？"
如果哲学是关于有机涌现，考虑使用：
如果哲学是关于数学之美，考虑使用：
如果哲学是关于受控混沌，考虑使用：
算法源自哲学，而非选项菜单。
为指导实现，让概念本质告知创造性和原创选择。构建能够表达此特定请求愿景的东西。
画布设置：标准 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>
<!-- p5.js 来自 CDN - 始终可用 -->
<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 最佳实践和代码结构原则的参考。
关键提醒：