Official程式設計與開發github.com

演算法藝術

使用 p5.js 搭配種子隨機性與互動式參數探索來創作演算法藝術。當使用者要求用程式碼創作藝術、生成式藝術、演算法藝術、流場或粒子系統時使用。創作原創的演算法藝術,而非複製現有藝術家。

演算法藝術 是什麼?

這個「演算法藝術」技能讓 AI 代理能夠透過結構化的兩階段流程來創作生成式藝術:首先擬定一份演算法哲學宣言,然後使用 p5.js 實現該哲學。它強調程式化的表達、湧現行為以及數學之美,而非靜態影像。使用者可以指定微妙的提示或主題,但技能設計保留了極大的創作自由空間。它採用 Art Blocks 風格的種子隨機性來確保可重現性,並包含內建的 HTML 檢視器,讓使用者可以調整參數、切換種子以及即時重新生成。此技能非常適合生成流場、粒子系統、遞迴結構、沃羅諾伊圖以及類似「有機湍流」或「量子和聲」等湧現模式。關鍵在於反覆強調「精湛工藝」—產出的演算法必須感覺像是經過無數次迭代、由頂尖計算美學專家精心調校而成。支援的平台包括 Claude Code、Claude.ai 以及任何可執行 p5.js 的瀏覽器。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/algorithmic-art

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

演算法哲學是經由程式碼表達的運算美學運動。輸出 .md 檔案(哲學)、.html 檔案(互動式檢視器)以及 .js 檔案(生成式演算法)。

這分兩個步驟進行:

  1. 演算法哲學創作(.md 檔案)
  2. 透過建立 p5.js 生成式藝術來表達(.html + .js 檔案)

首先,執行此任務:

演算法哲學創作

首先,建立一個演算法哲學(非靜態影像或模板),該哲學將透過以下方式詮釋:

  • 運算程序、湧現行為、數學之美
  • 種子隨機性、雜訊場、有機系統
  • 粒子、流、場、力
  • 參數化變異與受控混沌

關鍵理解

  • 接收的內容:使用者的一些細微輸入或指示,作為基礎參考;但不能限制創作自由。
  • 建立的內容:一個演算法哲學/生成式美學運動。
  • 下一步:同一個版本接收哲學,並用程式碼表達它——建立 p5.js 草圖,其中 90% 為演算法生成,10% 為基本參數。

考慮以下方法:

  • 為一個生成式藝術運動撰寫宣言
  • 下一階段涉及撰寫賦予其生命的演算法

哲學必須強調:演算法表達。湧現行為。運算之美。種子變異。

如何產生一個演算法哲學

為運動命名(1-2 個詞):例如「有機湍流」/「量子和聲」/「湧現靜止」

闡述哲學(4-6 個段落——簡潔但完整):

為了捕捉演算法的精髓,說明此哲學如何透過以下方式展現:

  • 運算程序與數學關係?
  • 雜訊函數與隨機模式?
  • 粒子行為與場動力學?
  • 時間演化與系統狀態?
  • 參數化變異與湧現複雜性?

關鍵指南:

  • 避免冗餘:每個演算法面向應只提及一次。除非增加新的深度,否則避免重複關於雜訊理論、粒子動力學或數學原則的概念。
  • 反覆強調工藝:哲學必須多次強調最終的演算法應該看起來像是耗費無數小時開發、經過精心調校、出自頂尖領域專家之手。這個框架至關重要——重複使用如「精心打造的演算法」、「深度運算專業的成果」、「痛苦的優化」、「大師級的實作」等詞語。
  • 保留創作空間:在演算法方向上要具體,但也要足夠簡潔,讓下一個 Claude 有空間以極高的工藝水準做出詮釋性的實作選擇。

這個哲學必須引導下一個版本以演算法的方式表達想法,而不是透過靜態影像。美感存在於過程之中,而非最終的畫面。

哲學範例

「有機湍流」 哲學:受自然法則約束的混沌,從無序中浮現的秩序。 演算法表達:由多層 Perlin 雜訊驅動的流場。數千個粒子沿著向量力前進,它們的軌跡累積成有機密度圖。多個雜訊八度音階產生湍流區域與平靜區域。顏色來自速度與密度——快的粒子燃燒明亮,慢的粒子消退成陰影。演算法持續運行直到平衡——一個精心調校的平衡,其中每個參數都經過大師級計算美學專家的無數次迭代調校。

「量子和聲」 哲學:離散實體展現波動般的干涉模式。 演算法表達:粒子在網格上初始化,每個粒子攜帶一個經由正弦波演變的相位值。當粒子靠近時,它們的相位會相互干涉——建設性干涉產生明亮節點,破壞性干涉產生空洞。簡單的諧波運動產生複雜的湧現曼陀羅。這是經過痛苦頻率校準的結果,每個比例都經過精心挑選以產生共鳴之美。

「遞迴低語」 哲學:跨尺度的自我相似性,有限空間中的無限深度。 演算法表達:遞迴細分的分支結構。每個分支略有隨機化,但受到黃金比例約束。L-system 或遞迴細分產生既數學又有機的樹狀形式。微妙的雜訊擾動打破完美的對稱性。線條粗細隨著每個遞迴層級遞減。每個分支角度都是深度數學探索的產物。

「場動力學」 哲學:看不見的力量透過它們對物質的影響而顯現。 演算法表達:由數學函數或雜訊構建的向量場。粒子在邊緣生成,沿著場線流動,在達到平衡或邊界時消失。多個場可以吸引、排斥或旋轉粒子。視覺化只顯示軌跡——看不見力量的幽靈般證據。一個透過力平衡精心編排的計算之舞。

「隨機結晶」 哲學:隨機程序結晶成有序結構。 演算法表達:隨機化圓形填充或沃羅諾伊鑲嵌。從隨機點開始,讓它們透過鬆弛演算法演化。單元互相推擠直到平衡。顏色基於單元大小、鄰居數量或到中心的距離。由此產生的有機鑲嵌既感覺隨機又感覺不可避免。每個種子都產生獨一無二的美麗結晶——大師級生成式演算法的標誌。

這些是精簡的範例。實際的演算法哲學應為 4-6 個實質段落。

基本原則

  • 演算法哲學:建立一個要透過程式碼表達的運算世界觀
  • 過程重於產出:始終強調美感從演算法的執行中湧現——每次執行都是獨一無二的
  • 參數化表達:想法透過數學關係、力、行為來溝通——而非靜態構圖
  • 藝術自由:下一個 Claude 以演算法方式詮釋哲學——提供創造性的實作空間
  • 純粹生成式藝術:這關乎創造活的演算法,而非帶有隨機性的靜態影像
  • 專家工藝:反覆強調最終的演算法必須感覺經過精心調校、透過無數次迭代優化、是頂尖計算美學專家深度專業的成果

演算法哲學應為 4-6 個段落。 用詩意的計算哲學填滿它,將預期的願景結合在一起。避免重複相同的觀點。將此演算法哲學輸出為 .md 檔案。


推導概念種子

關鍵步驟:在實作演算法之前,從原始請求中辨識出微妙的線索概念。

基本原則: 概念是一個微妙、小眾的參考,嵌入在演算法本身之中——不一定是字面上的,總是精妙的。熟悉該主題的人應該能直覺感受到它,而其他人則單純體驗到一個大師級的生成式創作。演算法哲學提供了運算語言。推導出的概念則提供了靈魂——無聲的概念 DNA,隱形地編織到參數、行為和湧現模式中。

這非常重要:參考必須精緻到能增強作品的深度,而不自我宣揚。想像一位爵士音樂家透過演算法和聲引用另一首歌——只有懂的人會捕捉到,但每個人都能欣賞生成式之美。


P5.JS 實作

在哲學和概念框架都建立之後,用程式碼表達它。停下來整理思緒再繼續。只使用已建立的演算法哲學和以下指示。

⚠️ 步驟 0:先閱讀模板 ⚠️

關鍵:在撰寫任何 HTML 之前:

  1. 使用讀取工具讀取 templates/viewer.html
  2. 研究確切的結構、樣式和 Anthropic 品牌標示
  3. 將該檔案作為字面上的起點——而不僅僅是靈感來源
  4. 完全按照範例保留所有固定區塊(頁首、側邊欄結構、Anthropic 顏色/字型、種子控制、動作按鈕)
  5. 只替換檔案註解中標記的可變區塊(演算法、參數、參數的 UI 控制)

避免:

  • ❌ 從頭建立 HTML
  • ❌ 發明自訂樣式或配色方案
  • ❌ 使用系統字型或深色主題
  • ❌ 更改側邊欄結構

遵循以下做法:

  • ✅ 複製模板的確切 HTML 結構
  • ✅ 保留 Anthropic 品牌標示(Poppins/Lora 字型、淺色調、漸層背景)
  • ✅ 維持側邊欄佈局(種子 → 參數 → 顏色? → 動作)
  • ✅ 只替換 p5.js 演算法和參數控制

模板是基礎。建立在它之上,而不是重建它。


為建立畫廊品質、活生生的運算藝術,以演算法哲學為基礎。

技術要求

種子隨機性(Art Blocks 模式):

// 始終使用種子以確保可重現性
let seed = 12345; // 或來自使用者輸入的哈希值
randomSeed(seed);
noiseSeed(seed);

參數結構——遵循哲學:

為建立從演算法哲學中自然浮現的參數,思考:「這個系統的哪些品質可以調整?」

let params = {
  seed: 12345,  // 始終包含種子以確保可重現性
  // 顏色
  // 加入控制你演算法的參數:
  // - 數量(多少?)
  // - 規模(多大?多快?)
  // - 機率(多有可能?)
  // - 比例(什麼比例?)
  // - 角度(什麼方向?)
  // - 閾值(行為何時改變?)
};

為設計有效的參數,專注於系統需要可調校的屬性,而不是思考「模式類型」。

核心演算法——表達哲學:

關鍵:演算法哲學應決定建立什麼。

為透過程式碼表達哲學,避免思考「我應該用哪種模式?」而是思考「如何透過程式碼表達這種哲學?」

如果哲學關於有機湧現,考慮使用:

  • 隨著時間累積或生長的元素
  • 受自然規則約束的隨機程序
  • 反饋迴路與互動

如果哲學關於數學之美,考慮使用:

  • 幾何關係與比例
  • 三角函數與和聲
  • 產生意外模式的精確計算

如果哲學關於受控混沌,考慮使用:

  • 嚴格邊界內的隨機變異
  • 分歧與相變
  • 從無序中浮現的秩序

演算法來自哲學,而非來自選單選項。

為引導實作,讓概念本質為創意和原創選擇提供資訊。建立表達此特定請求願景的東西。

畫布設定:標準 p5.js 結構:

function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系統
}

function draw() {
  // 你的生成式演算法
  // 可以是靜態的 (noLoop) 或動畫
}

工藝要求

關鍵:為達到精通,創造感覺像是經過大師級生成式藝術家無數次迭代才產生出來的演算法。仔細調校每個參數。確保每個模式都帶有目的性地浮現。這不是隨機雜訊——這是經過深度專業調校的受控混沌。

  • 平衡:複雜性但不造成視覺雜訊,秩序但不僵硬
  • 色彩和諧:深思熟慮的調色盤,而非隨機 RGB 值
  • 構圖:即使在隨機性中,也要維持視覺層次與流動
  • 效能:流暢執行,若為動畫則需針對即時性最佳化
  • 可重現性:相同的種子總是產生完全相同的輸出

輸出格式

輸出:

  1. 演算法哲學——以 Markdown 或文字說明生成式美學
  2. 單一 HTML 成品——從 templates/viewer.html 建立的獨立互動式生成式藝術(參見步驟 0 和下一節)

HTML 成品包含所有內容:p5.js(從 CDN 載入)、演算法、參數控制以及 UI——全部在一個檔案中,可在 claude.ai 成品或任何瀏覽器中立即運作。從模板檔案開始,而非從頭開始。


互動式成品創作

提醒:應已讀取 templates/viewer.html(參見步驟 0)。將該檔案作為起點。

為允許探索生成式藝術,建立一個單一、獨立的 HTML 成品。確保此成品可在 claude.ai 或任何瀏覽器中立即運作——無需設定。將所有內容內嵌。

關鍵:固定 vs 可變

templates/viewer.html 檔案是基礎。它包含所需的確切結構和樣式。

固定(始終完全按照顯示包含):

  • 佈局結構(頁首、側邊欄、主要畫布區域)
  • Anthropic 品牌標示(UI 顏色、字型、漸層)
  • 側邊欄中的種子區段:
    • 種子顯示
    • 上一個/下一個按鈕
    • 隨機按鈕
    • 跳至種子輸入 + 前往按鈕
  • 側邊欄中的動作區段:
    • 重新產生按鈕
    • 重置按鈕

可變(為每個藝術品自訂):

  • 整個 p5.js 演算法(setup/draw/class)
  • 參數物件(定義藝術所需)
  • 側邊欄中的參數區段:
    • 參數控制項的數量
    • 參數名稱
    • 滑桿的最小值/最大值/步進值
    • 控制類型(滑桿、輸入等)
  • 顏色區段(可選):
    • 某些藝術需要顏色選擇器
    • 某些藝術可能使用固定顏色
    • 某些藝術可能是單色的(無需顏色控制)
    • 根據藝術的需求決定

每個藝術品都應有獨特的參數和演算法! 固定部分提供了程式碼骨架的基本架構。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

相關技能