X (Twitter)

面向 Claude 的 Agent Skill 指南，教你用 p5.js、种子化随机、参数控制打造可复现的生成艺术工作流。

来源：基于 anthropics/skills（MIT）内容改写。

算法哲学是一种由计算审美运动延伸出的思想，并最终通过代码落地。需要输出 .md 文件（哲学陈述）、.html 文件（交互式预览）以及 .js 文件（生成算法）。

整个流程分为两步：

创作算法哲学（.md 文件）
以 p5.js 生成艺术诠释哲学（.html + .js 文件）

首先，请完成以下任务：

算法哲学创作

先创作一份 算法哲学（Algorithmic Philosophy），而非静态图像或模板。后续将通过以下路径被实现：

计算过程、涌现行为、数学之美
种子随机、噪声场、类自然系统
粒子、流体、力场与作用力
参数化变化与可控的混沌

核心认知

输入是什么：用户可能会提供一些微妙的提示或说明，作为灵感基础，但绝不能束缚创作自由。
产出是什么：一套算法哲学 / 生成美学流派。
下一步做什么：同一轮次的 Claude 会读取这份哲学，并 用代码实现 —— 编写 p5.js 草图，其中 90% 取决于算法生成，10% 由关键参数驱动。

建议采取如下方式：

先写一份生成艺术流派的宣言（manifesto）
下一阶段再撰写算法，让哲学具象化

哲学必须强调：算法表达、涌现行为、计算之美、种子化变化。

如何撰写算法哲学

为流派命名（1-2 个词）：如 “Organic Turbulence”“Quantum Harmonics”“Emergent Stillness”。

阐述哲学（4-6 个段落，简练但完整）：

为了捕捉算法本质，需要说明该哲学如何通过以下维度显现：

计算过程与数学关系？
噪声函数与随机模式？
粒子行为与力场动态？
时间演化与系统状态？
参数化变化与涌现复杂度？

关键准则：

避免冗余：每个算法要素只出现一次。不要重复描述噪声理论、粒子动力学或数学原理，除非能引入新的深度。
反复强调匠心：哲学必须多次强调最终算法看起来仿佛耗费漫长时间打磨，经过细心迭代，出自行业顶尖高手之手。重复使用类似表述：“精雕细琢的算法”“深厚计算专业带来的成果”“历经痛苦优化”“大师级实现”等。
保留自由空间：在指出算法方向时保持具体，但仍要给下一位 Claude 留出诠释空间，以便其用极高水准的匠心完成实现。

哲学要引导下一轮在 算法层面 刻画创意，而非输出静态图像。美感蕴于过程，而非最终截图。

哲学示例

“Organic Turbulence” 哲学：受自然法则约束的混沌，从无序中生长出秩序。算法表达：使用多层 Perlin 噪声驱动流场。上千个粒子沿向量力场运动，轨迹叠加形成有机密度分布。多阶噪声叠加制造湍流区与平静区。颜色依据速度与密度生成——高速粒子燃烧般明亮，低速则近似阴影。算法运行至达到平衡：这是大师级计算美学家历经无数次调试所得的精密配置。

“Quantum Harmonics” 哲学：离散实体呈现波动干涉图样。算法表达：粒子初始化在网格上，并携带随时间演化的相位值。粒子靠近时发生干涉——相干带来亮点，相消造就空洞。简单的简谐运动生成复杂的涌现曼陀罗。每个频率比例都经过痛心调校，保证共鸣之美。

“Recursive Whispers” 哲学：跨尺度的自相似，在有限空间中展现无穷深度。算法表达：递归分支结构。每个分支略带随机，但受黄金比例约束。可用 L-system 或递归细分生成既数学又自然的树状形体。轻微噪声扰动打破完美对称。随着递归层数递增，线条逐渐变细。每个分叉角度都经过深度数学探索。

“Field Dynamics” 哲学：让不可见的力通过对物质的影响显形。算法表达：使用数学函数或噪声构建向量场，生成粒子所感知的无形流动。积分线揭示力的路径。速度与加速度映射成颜色。压力随密度变化，用于塑造局部结构。所有参数均通过反复实验校准，以呈现精心雕琢的效果。

接下来由同一轮 Claude 把哲学统统转写为代码。

生成艺术实现（实现阶段）

实现阶段需要输出一个可交互的 HTML artifact（单文件）。文件内部包含：

Anthropic 风格 UI（品牌色、布局、Seed 控件）
内联的 p5.js 代码（运行在 <script type="module"> 中）
参数控制面板（使用 <input type="range"> 等控件）
支持种子浏览、参数调整、再生成、PNG 下载

实现流程

读取哲学：理解生成逻辑、核心机制、视觉特征。
初始化种子系统：
- 使用 let seed = ...;
- 编写 setSeed(newSeed) 重置随机状态。
- 使用 randomSeed(seed); noiseSeed(seed); 保证可复现性。
定义参数：
- 用一个对象保存参数及默认值（const parameters = {...}）。
- 创建 updateParam 函数并与 UI 控件绑定。
- 所有参数均应在 draw() 中实时生效。
构建 UI：使用模板提供的结构生成侧边栏、参数控件、颜色选择器（视需求）等。
实现主算法：根据哲学设计核心生成逻辑，重点突出算法匠心。
实现交互：种子按钮（Prev / Next / Random / Jump）、再生成、重置、PNG 下载全部要可用。

种子系统规范

let seed = 12345;

function setSeed(newSeed) {
  seed = newSeed;
  randomSeed(seed);
  noiseSeed(seed);
}

randomSeed 与 noiseSeed 必须一起调用。
存储 seed，并在 UI 上展示当前值。
prev/next/random/jump 都要调用 setSeed()，然后触发 regenerate()。
使用 floor(random(1000000)) 来生成新 seed。

参数管理模式

const parameters = {
  particleCount: { value: 1500, min: 500, max: 5000, step: 50 },
  flowScale: { value: 0.0025, min: 0.0005, max: 0.01, step: 0.0005 },
  lineOpacity: { value: 40, min: 10, max: 120, step: 1 }
};

function updateParam(key, value) {
  const param = parameters[key];
  const numericValue = Number(value);
  param.value = numericValue;

  const display = document.getElementById(`${key}-value`);
  if (display) display.textContent = numericValue.toFixed(3).replace(/\.?0+$/, '');

  regenerate();
}

所有参数都放在 parameters 对象中。
updateParam 函数负责更新值并刷新界面。
控件应使用 <input type="range">，并配合 <span> 显示当前值。

Antropic 品牌 UI

侧边栏必须遵循模板中的结构，保持品牌色、渐变背景、字体等。不允许：

改动品牌色或渐变
重新排版 Seed 控件或 Action 按钮
移除顶部标题或描述

可以：

添加适量参数控件
依据算法需求决定是否加入颜色调节
在行动区内添加额外按钮（如“保存设置”），前提是不破坏既有功能

代码组织建议

class FlowField {
  constructor(config) { ... }
  update() { ... }
  draw() { ... }
}

function setup() {
  createCanvas(900, 520);
  setSeed(seed);
  setupControls();
  regenerate();
}

function regenerate() {
  clear();
  background("#050009");
  const config = getConfigFromParameters();
  const field = new FlowField(config);
  field.run();
}

使用类或模块化函数来分离逻辑。
setup() 初始化 canvas、UI 与 seed。
regenerate() 读取参数、重新运行算法。
保持代码结构清晰、可维护。

技术细节

Canvas 设置：保留 900 x 520 尺寸（或根据哲学适当调整）。
颜色：可使用 color() 或 HSB 模式。若需要让用户更改颜色，请在侧边栏增加颜色选择器。
性能考量：
- 控制粒子数量（建议 < 5000）
- 使用离屏 buffer（createGraphics）减少重绘
- 对噪声函数做缓存
导出功能：saveCanvas(canvas, filename, 'png')
工具提示：在参数标签或描述中说明用途，帮助用户理解。

Seed（固定）
- Seed 显示
- Prev / Next / Random / Jump 按钮
Parameters（可变）
- 使用 <div class="control-group"> 结构
- 每个参数含 label、range 输入与数值显示
Colors（可选）
- 若需要颜色调节，则加入颜色选择器
- 若颜色固定或单色，可省略
Actions（固定）
- Regenerate
- Reset

Download PNG

所有按钮都必须可用。保留 Anthropic 品牌样式。

使用 Artifact

生成的 HTML 文件开箱即用：

在 claude.ai 中：作为 Artifact 即刻运行。
本地浏览：保存后直接用浏览器打开，无需服务器。
分享：发送 HTML 单文件即可，完全自包含。

变体与探索

Artifact 默认提供 Seed 导航（Prev / Next / Random 按钮），用户可在单文件中探索多种变体。若用户想突出特定版本：

提供预设种子按钮（如 “Variation 1: Seed 42”）
增加 “Gallery Mode”，并排展示多组 Seed 缩略图
全部收纳于同一个 Artifact 中

这类似制作同一版画的多张印刷品：算法保持一致，但不同种子揭示出潜力的不同切面。交互式探索让用户找到心仪的效果。

创作流程回顾

用户需求 -> 算法哲学 -> 代码实现

每次请求都独一无二。流程包括：

解析用户意图——想要怎样的审美？
撰写算法哲学（4-6 段）——描述计算方法
用代码实现哲学——让理念真正“运行”
设计参数控制——哪些数值需要可调？
搭建 UI 控件——为上述参数配备滑块 / 输入框

恒定不变的部分：

Anthropic 品牌样式（颜色、字体、布局）
种子导航控件（必须存在）
自包含的 HTML Artifact

允许变化的部分：

具体算法
参数列表
UI 控件布局
可视化效果

要获得最佳结果，请信任创造力，让哲学引导实现。

GitHub 访问

在 GitHub 查看

来源：基于 anthropics/skills（MIT）内容改写。

整个流程分为两步：

创作算法哲学（.md 文件）
以 p5.js 生成艺术诠释哲学（.html + .js 文件）

首先，请完成以下任务：

算法哲学创作

先创作一份 算法哲学（Algorithmic Philosophy），而非静态图像或模板。后续将通过以下路径被实现：

计算过程、涌现行为、数学之美
种子随机、噪声场、类自然系统
粒子、流体、力场与作用力
参数化变化与可控的混沌

核心认知

输入是什么：用户可能会提供一些微妙的提示或说明，作为灵感基础，但绝不能束缚创作自由。
产出是什么：一套算法哲学 / 生成美学流派。
下一步做什么：同一轮次的 Claude 会读取这份哲学，并 用代码实现 —— 编写 p5.js 草图，其中 90% 取决于算法生成，10% 由关键参数驱动。

建议采取如下方式：

先写一份生成艺术流派的宣言（manifesto）
下一阶段再撰写算法，让哲学具象化

哲学必须强调：算法表达、涌现行为、计算之美、种子化变化。

如何撰写算法哲学

为流派命名（1-2 个词）：如 “Organic Turbulence”“Quantum Harmonics”“Emergent Stillness”。

阐述哲学（4-6 个段落，简练但完整）：

为了捕捉算法本质，需要说明该哲学如何通过以下维度显现：

计算过程与数学关系？
噪声函数与随机模式？
粒子行为与力场动态？
时间演化与系统状态？
参数化变化与涌现复杂度？

关键准则：

避免冗余：每个算法要素只出现一次。不要重复描述噪声理论、粒子动力学或数学原理，除非能引入新的深度。
反复强调匠心：哲学必须多次强调最终算法看起来仿佛耗费漫长时间打磨，经过细心迭代，出自行业顶尖高手之手。重复使用类似表述：“精雕细琢的算法”“深厚计算专业带来的成果”“历经痛苦优化”“大师级实现”等。
保留自由空间：在指出算法方向时保持具体，但仍要给下一位 Claude 留出诠释空间，以便其用极高水准的匠心完成实现。

哲学要引导下一轮在 算法层面 刻画创意，而非输出静态图像。美感蕴于过程，而非最终截图。

哲学示例

接下来由同一轮 Claude 把哲学统统转写为代码。

生成艺术实现（实现阶段）

实现阶段需要输出一个可交互的 HTML artifact（单文件）。文件内部包含：

Anthropic 风格 UI（品牌色、布局、Seed 控件）
内联的 p5.js 代码（运行在 <script type="module"> 中）
参数控制面板（使用 <input type="range"> 等控件）
支持种子浏览、参数调整、再生成、PNG 下载

实现流程

读取哲学：理解生成逻辑、核心机制、视觉特征。
初始化种子系统：
- 使用 let seed = ...;
- 编写 setSeed(newSeed) 重置随机状态。
- 使用 randomSeed(seed); noiseSeed(seed); 保证可复现性。
定义参数：
- 用一个对象保存参数及默认值（const parameters = {...}）。
- 创建 updateParam 函数并与 UI 控件绑定。
- 所有参数均应在 draw() 中实时生效。
构建 UI：使用模板提供的结构生成侧边栏、参数控件、颜色选择器（视需求）等。
实现主算法：根据哲学设计核心生成逻辑，重点突出算法匠心。
实现交互：种子按钮（Prev / Next / Random / Jump）、再生成、重置、PNG 下载全部要可用。

种子系统规范

let seed = 12345;

function setSeed(newSeed) {
  seed = newSeed;
  randomSeed(seed);
  noiseSeed(seed);
}

randomSeed 与 noiseSeed 必须一起调用。
存储 seed，并在 UI 上展示当前值。
prev/next/random/jump 都要调用 setSeed()，然后触发 regenerate()。
使用 floor(random(1000000)) 来生成新 seed。

参数管理模式

const parameters = {
  particleCount: { value: 1500, min: 500, max: 5000, step: 50 },
  flowScale: { value: 0.0025, min: 0.0005, max: 0.01, step: 0.0005 },
  lineOpacity: { value: 40, min: 10, max: 120, step: 1 }
};

function updateParam(key, value) {
  const param = parameters[key];
  const numericValue = Number(value);
  param.value = numericValue;

  const display = document.getElementById(`${key}-value`);
  if (display) display.textContent = numericValue.toFixed(3).replace(/\.?0+$/, '');

  regenerate();
}

所有参数都放在 parameters 对象中。
updateParam 函数负责更新值并刷新界面。
控件应使用 <input type="range">，并配合 <span> 显示当前值。

Antropic 品牌 UI

侧边栏必须遵循模板中的结构，保持品牌色、渐变背景、字体等。不允许：

改动品牌色或渐变
重新排版 Seed 控件或 Action 按钮
移除顶部标题或描述

可以：

添加适量参数控件
依据算法需求决定是否加入颜色调节
在行动区内添加额外按钮（如“保存设置”），前提是不破坏既有功能

代码组织建议

class FlowField {
  constructor(config) { ... }
  update() { ... }
  draw() { ... }
}

function setup() {
  createCanvas(900, 520);
  setSeed(seed);
  setupControls();
  regenerate();
}

function regenerate() {
  clear();
  background("#050009");
  const config = getConfigFromParameters();
  const field = new FlowField(config);
  field.run();
}

使用类或模块化函数来分离逻辑。
setup() 初始化 canvas、UI 与 seed。
regenerate() 读取参数、重新运行算法。
保持代码结构清晰、可维护。

技术细节

Canvas 设置：保留 900 x 520 尺寸（或根据哲学适当调整）。
颜色：可使用 color() 或 HSB 模式。若需要让用户更改颜色，请在侧边栏增加颜色选择器。
性能考量：
- 控制粒子数量（建议 < 5000）
- 使用离屏 buffer（createGraphics）减少重绘
- 对噪声函数做缓存
导出功能：saveCanvas(canvas, filename, 'png')
工具提示：在参数标签或描述中说明用途，帮助用户理解。

Seed（固定）
- Seed 显示
- Prev / Next / Random / Jump 按钮
Parameters（可变）
- 使用 <div class="control-group"> 结构
- 每个参数含 label、range 输入与数值显示
Colors（可选）
- 若需要颜色调节，则加入颜色选择器
- 若颜色固定或单色，可省略
Actions（固定）
- Regenerate
- Reset

Download PNG

所有按钮都必须可用。保留 Anthropic 品牌样式。

使用 Artifact

生成的 HTML 文件开箱即用：

在 claude.ai 中：作为 Artifact 即刻运行。
本地浏览：保存后直接用浏览器打开，无需服务器。
分享：发送 HTML 单文件即可，完全自包含。

变体与探索

Artifact 默认提供 Seed 导航（Prev / Next / Random 按钮），用户可在单文件中探索多种变体。若用户想突出特定版本：

提供预设种子按钮（如 “Variation 1: Seed 42”）
增加 “Gallery Mode”，并排展示多组 Seed 缩略图
全部收纳于同一个 Artifact 中

这类似制作同一版画的多张印刷品：算法保持一致，但不同种子揭示出潜力的不同切面。交互式探索让用户找到心仪的效果。

创作流程回顾

用户需求 -> 算法哲学 -> 代码实现

每次请求都独一无二。流程包括：

解析用户意图——想要怎样的审美？
撰写算法哲学（4-6 段）——描述计算方法
用代码实现哲学——让理念真正“运行”
设计参数控制——哪些数值需要可调？
搭建 UI 控件——为上述参数配备滑块 / 输入框

恒定不变的部分：

Anthropic 品牌样式（颜色、字体、布局）
种子导航控件（必须存在）
自包含的 HTML Artifact

允许变化的部分：

具体算法
参数列表
UI 控件布局
可视化效果

要获得最佳结果，请信任创造力，让哲学引导实现。

GitHub 访问

在 GitHub 查看

Algorithmic Art 算法艺术

算法哲学创作

核心认知

如何撰写算法哲学

哲学示例

生成艺术实现（实现阶段）

实现流程

种子系统规范

参数管理模式

Antropic 品牌 UI

代码组织建议

技术细节

Sidebar 结构（模板约束）

使用 Artifact

变体与探索

创作流程回顾

GitHub 访问

目录

Algorithmic Art 算法艺术

算法哲学创作

核心认知

如何撰写算法哲学

哲学示例

生成艺术实现（实现阶段）

实现流程

种子系统规范

参数管理模式

Antropic 品牌 UI

代码组织建议

技术细节

Sidebar 结构（模板约束）

使用 Artifact

变体与探索

创作流程回顾

GitHub 访问

目录