前言¶

生成藝術（Generative Art）在開發者社區裏一直是個熱門話題：用代碼畫出一幅幅「每次運行都不完全相同、卻又可復現」的作品，既考驗算法設計，也考驗參數調優與交互體驗。自己搭 p5.js 項目、寫種子隨機、做側邊欄滑塊，往往要重複很多樣板代碼；若把審美方向、技術約束和 UI 規範寫成文檔，每次又要重新向 AI 解釋一遍。

Anthropic 在官方 Skills 倉庫裏提供了一個創意向示例 Skill——algorithmic-art。它把「算法哲學 → p5.js 實現 → 可交互 HTML 成品」整條鏈路封裝成可複用的 Agent 指令，並內置 templates/viewer.html 等模板資源。本文基於官方資料覈實後，介紹它是什麼、如何安裝，以及典型用法。

這是什麼¶

algorithmic-art 是 Anthropic 維護的 Agent Skill，位於 anthropics/skills 倉庫的 skills/algorithmic-art 目錄。Skill 採用通用的 SKILL.md 格式：YAML 前置元數據（name、description）加上 Markdown 正文指令，可被 Cursor、Claude Code、Claude.ai 等支持 Agent Skills 的工具按需加載。

官方 description 概括其用途：用 p5.js 創作算法藝術，支持種子隨機（seeded randomness）與交互式參數探索；當用戶請求「用代碼做藝術、生成藝術、流場、粒子系統」等任務時觸發。Skill 強調創作原創算法藝術，而非複製已有藝術家作品，以避免版權風險。

與多數「寫業務代碼」的 Skill 不同，algorithmic-art 展示的是 Agent Skills 的另一種可能：把領域方法論（生成美學 + 工程規範）打包成 Agent 可執行的流程，而不只是補全幾行函數。

核心功能與亮點¶

根據官方 SKILL.md，該 Skill 的工作流分爲兩大階段：

1. 算法哲學（Algorithmic Philosophy）¶

Agent 先輸出一份 4–6 段的「算法哲學」文檔（.md），相當於生成藝術運動的宣言：命名美學運動、闡述計算過程、噪聲與隨機性、粒子/場/力、參數化變化與受控混沌等。哲學強調過程重於成品——美來自算法執行，而非靜態幀。

Skill 還包含「概念種子（Conceptual Seed）」步驟：從用戶原始需求中提煉一條 subtle 的概念線索，嵌入參數與行爲，供熟悉主題的讀者隱約感知，而不必字面化表達。

2. p5.js 交互式成品（HTML Artifact）¶

哲學確定後，Agent 基於 bundled 的 templates/viewer.html 模板實現算法，輸出單文件、自包含的 HTML：內聯樣式與腳本，p5.js 從 CDN 加載，瀏覽器或 Claude Artifacts 中可直接打開。

技術要點（官方明確要求）：

• 種子隨機：遵循 Art Blocks 式可復現模式，使用 randomSeed(seed) 與 noiseSeed(seed)，同一 seed 必須產生相同畫面。
• 參數對象：params 含 seed 及與算法哲學對應的可調項（數量、尺度、概率、比例、角度、閾值等）。
• 固定 UI 骨架：保留 Anthropic 品牌色、Poppins/Lora 字體、側邊欄佈局；Seed 區（顯示、Prev/Next、Random、Jump）與 Actions 區（Regenerate、Reset、Download PNG）不可改。
• 可變部分：p5.js 算法、Parameters 滑塊/顏色選擇器、以及可選的 Colors 區——每件作品應有自己的參數集與算法邏輯。
• 畫布：典型 createCanvas(1200, 1200)，可靜態（noLoop()）或動畫。

Skill 目錄還附帶 templates/generator_template.js，供參考參數組織與 seeded randomness 寫法；最終算法應內聯進 HTML，而非單獨 .js 文件。

安裝與啓用¶

Skill 是一個文件夾（含 SKILL.md 與 templates/ 等），需整目錄安裝，不能只複製單個 Markdown 文件。

Cursor¶

Cursor 在啓動時會掃描 .cursor/skills/、~/.cursor/skills/ 等路徑。將官方目錄複製到項目中即可：

# 在項目根目錄執行
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropics-skills
mkdir -p .cursor/skills
cp -r /tmp/anthropics-skills/skills/algorithmic-art .cursor/skills/

文件夾名應與 Skill 的 name 字段一致（algorithmic-art）。重啓 Cursor 或重新打開項目後，Agent 會根據 description 自動匹配相關任務；也可在對話中顯式提及該 Skill。

也可通過 Cursor Customize → Rules → Add Rule → Remote Rule (Github) 引用 GitHub 倉庫，具體以 Cursor Skills 文檔 爲準。

Claude Code¶

官方 README 說明可通過 Plugin 市場安裝示例 Skill 集：

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

algorithmic-art 屬於倉庫中的創意/設計類示例，安裝 example-skills 插件後即可在對話中提及使用。

Claude.ai¶

官方說明：該倉庫中的示例 Skill 已對 Claude.ai 付費計劃用戶開放；自定義 Skill 的上傳與啓用方式見 Using skills in Claude。

其他工具¶

Agent Skills 已作爲開放標準發佈（見 Anthropic 工程文與 agentskills.io）。Codex CLI、Claude Agent SDK 等若支持 .agents/skills/ 或等效目錄，可將同一文件夾放入對應路徑；各工具細節以各自官方文檔爲準。

典型用法示例¶

安裝並啓用後，用自然語言描述審美目標即可，無需手寫 p5.js 腳手架。官方 description 中的觸發場景包括：generative art、algorithmic art、flow fields、particle systems 等。

示例提示詞：

用 algorithmic-art 的風格，做一幅「有機湍流」主題的生成藝術：
多層 Perlin 噪聲流場 + 粒子軌跡，seed 可切換，側邊欄能調粒子數量和噪聲尺度。

幫我寫一段算法哲學，並實現成可交互 HTML：主題是「隨機過程結晶成有序結構」，
參考 Voronoi/圓填充鬆弛算法，要支持 seed 1–100 快速瀏覽變體。

Agent 按 Skill 指令通常會依次產出：

1. 算法哲學 Markdown（命名運動 + 4–6 段闡述）；
2. 基於 templates/viewer.html 的單文件 HTML（含 p5.js 算法與參數 UI）。

種子與參數相關的核心代碼模式（摘自官方 SKILL.md）：

let params = {
  seed: 12345,
  // 依算法哲學添加：particleCount, noiseScale, flowSpeed 等
};

function initializeSystem() {
  randomSeed(params.seed);
  noiseSeed(params.seed);
  // 重建粒子/場並重繪
}

打開 HTML 後，可用 Prev/Next/Random/Jump 探索 seed 空間，用滑塊即時改參，Reset 恢復默認，Download 導出 PNG。

適用場景與注意事項¶

適合誰、什麼場景：

• 想快速驗證生成藝術創意，又不想每次從零搭 p5.js + 控件 UI；
• 教學或分享：需要可復現 seed 與可調參數的演示作品；
• 探索 Agent Skills 在「創意/設計」而不僅是「CRUD/測試」上的用法；
• 作爲編寫自定義 Skill 的參考——尤其是「主文檔 + 模板資源 + 漸進式加載」的結構。

限制與注意：

• 官方 README 聲明：倉庫 Skill 僅供演示與教育，Claude 實際行爲可能與 Skill 文本不完全一致，關鍵用途需自行充分測試。
• 僅安裝受信任來源的 Skill；algorithmic-art 會指導 Agent 讀取本地模板、生成 HTML，使用前建議瀏覽 SKILL.md 與 templates/ 內容。
• Skill 要求基於模板修改 UI，不要從零寫 HTML 或改掉 Seed/Actions 固定區，否則與規範不一致。
• 輸出強調原創生成算法；勿用於模仿特定藝術家可識別風格以規避版權爭議。
• 大型動畫需注意性能；Skill 要求複雜而不噪、可即時時保持流暢。

小結¶

algorithmic-art 把「算法美學宣言 + p5.js 工程規範 + 交互查看器模板」打包成一個 Agent Skill，讓 AI 編程助手能穩定地產出可探索、可復現的生成藝術作品。它適合作爲入門示例，也適合作爲你自建「設計類 Skill」的結構範本。

官方地址：https://github.com/anthropics/skills/tree/main/skills/algorithmic-art

更多關於 Agent Skills 設計理念，可參考 Anthropic 工程文章：Equipping agents for the real world with Agent Skills。