Skip to content
←INDEX / 提示詞庫
TUTORIAL/Claude Code/進階

用官方 algorithmic-art 寫「可重現」的 p5.js 生成藝術

Anthropic 官方 algorithmic-art:先寫一段『演算法哲學』再用 p5.js 把它變成可互動的 HTML 作品。核心是 Art Blocks 式的 seeded randomness(同種子=同畫面),搭配可調參數與種子導覽,讓你系統化探索流場、粒子系統等生成藝術,而非隨機亂撞。

SakuyaPromptCraft 主筆 · 寫於 2026-06-08
AI 教學 / 腳本Claude Code進階≈ 173 tokens · 實際用量依工具與輸入而異
Last reviewed2026-06-08Read~5 MIN

01PROMPT

你是一位生成藝術(algorithmic art)創作者。請依下列兩階段流程,用 p5.js 幫我做一件『可重現、可互動』的演算法藝術作品。

# 主題與意圖
- 想要的視覺感受 / 美學方向:{{AESTHETIC}}
- 偏好的技法(可多選或讓我推薦):{{TECHNIQUE}}(如:Perlin noise 流場 / 粒子系統與向量力 / 諧波干涉 / 遞迴分支 / 向量場視覺化)

# 階段一:演算法哲學
先寫 4-6 段 Markdown,描述這件作品背後的『計算美學運動』——它如何透過 noise 函數、粒子行為與數學關係,呈現你想要的感受。不要只描述外觀,要描述『系統的規則與張力』。

# 階段二:用程式表達
把哲學變成一個自包含、可互動的 HTML 作品(單檔、無外部相依,p5.js 以 inline 方式嵌入)。

# 硬規則
1. 可重現性(Art Blocks 式):在 setup 開頭呼叫 `randomSeed(seed); noiseSeed(seed);`,確保同種子=同畫面。
2. 參數設計:不要給一堆預設 preset,而是問『這個系統有哪些性質可以被調整?』——數量、尺度、機率、比例、角度、閾值——把這些開成 UI 參數。
3. 互動:作品內建種子導覽(Previous / Next / Random / Jump 到指定種子)、Regenerate、Reset 按鈕,讓使用者不必開新檔就能探索變體。
4. 原創性:創作全新的演算法美學,不得模仿或複製特定在世藝術家的作品,以免侵權。

請先做階段一:寫出這件作品的演算法哲學。

把方括號 [ ] 內的變數換成你的內容,丟進 Claude Code。

◆ 直接開到工具Claude(記得貼)
RUN站內試跑 / TRY IT
▶ 站內試跑

不用離開網站,直接看這組 prompt 跑出來長怎樣(AI 即時生成,扣 1 點)。

SKILL安裝成 SKILL / INSTALL
安裝成 SKILLClaude Code Agent Skill

不只複製貼上 — 下載後放到 ~/.claude/skills/anthropic-algorithmic-art-p5js-seeded/SKILL.md,之後每個 session 自動可用(觸發時自動載入)。

macOS / Linux
mkdir -p ~/.claude/skills/anthropic-algorithmic-art-p5js-seeded && mv ~/Downloads/SKILL.md ~/.claude/skills/anthropic-algorithmic-art-p5js-seeded/SKILL.md
Windows PowerShell
New-Item -ItemType Directory -Force "$env:USERPROFILE\.claude\skills\anthropic-algorithmic-art-p5js-seeded" | Out-Null; Move-Item "$env:USERPROFILE\Downloads\SKILL.md" "$env:USERPROFILE\.claude\skills\anthropic-algorithmic-art-p5js-seeded\SKILL.md"

02CONTEXT / 使用情境

## 這是什麼?解決什麼痛點 生成藝術(用程式跑亂數長出圖案)最大的痛點有兩個:① 跑出一張漂亮的卻『再也重現不出來』,因為亂數沒被鎖住;② 變成『無止境亂調參數』而沒有設計脈絡。Anthropic 官方的 algorithmic-art 技能用兩個招數解這兩件事——先逼你寫一段『演算法哲學』建立設計意圖,再用 Art Blocks 式的 seeded randomness 把每張畫面綁到一個種子上,達成完全可重現。 ## 為什麼值得用這個來源 這是 Anthropic 官方 `anthropics/skills` repo 的第一方技能,附帶可直接套用的 `templates/viewer.html`(內含固定的側欄結構:Seed → Parameters → Actions、品牌色與字型 Poppins/Lora、種子導覽按鈕)與 `templates/generator_template.js`(最佳實務參考,而非『樣式選單』)。官方特別強調 template 是『字面上的地基』而非靈感來源:複製它的 HTML 結構,只替換 p5.js 演算法與參數控制。它也明確要求『創作原創作品、不複製既有藝術家』來規避版權問題。 ## 怎麼用(要點) 1. 階段一先寫『演算法哲學』(4-6 段):描述這套系統的規則、張力與它想呈現的感受,而不是只描述外觀。這一步決定作品有沒有靈魂。 2. 階段二把哲學變成單檔可互動 HTML:p5.js inline 嵌入、無外部相依。 3. 可重現性是硬規則:`randomSeed(seed); noiseSeed(seed);` 放在 setup 開頭,同種子永遠長出同一張畫。 4. 參數從『系統本身的可調性質』設計——數量、尺度、機率、比例、角度、閾值——而非塞一堆 preset。 5. 內建種子導覽(上一個/下一個/隨機/跳到指定種子)+ Regenerate / Reset,讓人在同一個檔案裡就能探索整個設計空間。 ## 常見技法 Perlin noise 驅動的流場(flow field)、帶向量力的粒子系統、諧波干涉圖樣、遞迴分支結構、向量場視覺化。 ## 何時用 - 你想做能上鏈或能系統化收藏的『可重現』生成藝術(每個種子一件作品)。 - 你要把一個視覺概念變成『可調參數、可互動探索』的作品,而非一張死圖。 - 你想學流場 / 粒子系統等經典生成技法的乾淨範本起手式。 📎 來源:anthropics/skills(作者 Anthropic,Apache-2.0 授權)— 本篇為繁中改寫整理,內容經改寫,原始內容見上方連結。

04VARIABLES / 變數說明

01[AESTHETIC]

想要的視覺感受或美學方向(例如:冷冽的深海流動感、或溫暖的有機生長感)

02[TECHNIQUE]

偏好的生成技法,可多選或留白讓它推薦(流場 / 粒子系統 / 諧波干涉 / 遞迴分支 / 向量場)

05RESOLVER · 變數代入器0 / 2

填下面的欄位,上方 prompt 會即時替換 [方括號] 內容。填好後按「複製組好的 prompt」直接丟進工具。

修飾
Assembled · 填剩餘變數…
你是一位生成藝術(algorithmic art)創作者。請依下列兩階段流程,用 p5.js 幫我做一件『可重現、可互動』的演算法藝術作品。

# 主題與意圖
- 想要的視覺感受 / 美學方向:{{AESTHETIC}}
- 偏好的技法(可多選或讓我推薦):{{TECHNIQUE}}(如:Perlin noise 流場 / 粒子系統與向量力 / 諧波干涉 / 遞迴分支 / 向量場視覺化)

# 階段一:演算法哲學
先寫 4-6 段 Markdown,描述這件作品背後的『計算美學運動』——它如何透過 noise 函數、粒子行為與數學關係,呈現你想要的感受。不要只描述外觀,要描述『系統的規則與張力』。

# 階段二:用程式表達
把哲學變成一個自包含、可互動的 HTML 作品(單檔、無外部相依,p5.js 以 inline 方式嵌入)。

# 硬規則
1. 可重現性(Art Blocks 式):在 setup 開頭呼叫 `randomSeed(seed); noiseSeed(seed);`,確保同種子=同畫面。
2. 參數設計:不要給一堆預設 preset,而是問『這個系統有哪些性質可以被調整?』——數量、尺度、機率、比例、角度、閾值——把這些開成 UI 參數。
3. 互動:作品內建種子導覽(Previous / Next / Random / Jump 到指定種子)、Regenerate、Reset 按鈕,讓使用者不必開新檔就能探索變體。
4. 原創性:創作全新的演算法美學,不得模仿或複製特定在世藝術家的作品,以免侵權。

請先做階段一:寫出這件作品的演算法哲學。
FAQ · 常見問題

「用官方 algorithmic-art 寫「可重現」的 p5.js 生成藝術」這組提示詞要怎麼用?

這組 prompt 專為 Claude Code 設計。把 prompt 內 2 個方括號 [變數] 換成你自己的內容,貼進 Claude Code 執行即可。難度中等,照變數說明填好後即可上手。

「用官方 algorithmic-art 寫「可重現」的 p5.js 生成藝術」是免費的嗎?

完整 prompt 免費開放閱讀,不用註冊;可保存瀏覽器收藏,登入後可一鍵複製與留言。

用 Claude Code 依這組 prompt 生成的成果可以商用嗎?

prompt 文字本身你可自由使用與修改。但 AI 生成物(圖/音樂/影片/文字)的商用授權,取決於你在 Claude Code 使用的方案與其官方服務條款,請以該工具的授權規範為準。

RELATED你可能也需要

PRO01
TUTORIALSuno v5.5FEATURED
r/SunoAI (anonymous studio engineer)2026-06-12

Suno 工程師思維:4 步驟做出不像 AI 的歌

5.0(1)

Studio engineer 視角拆解 Suno 致命弱點(油炸 vocals、高頻 artifact)+ 4 步驟 DAW workflow + Suno Studio 修音 prompt

高階
Read

免費02
TUTORIALClaude 4.5 SonnetFEATURED
r/ClaudeAI2026-05-14

5 個 6 月 stuck 下來的 Claude 每週 workflow

提案產生器 / 會議處理器 / 內容再利用 / 週五回顧 / 收工 reset — 試了 40 個只有這 5 個沒被丟掉、各省 30+ 分鐘 / 次。

進階
Read

PRO03
TUTORIALClaude 4.5 SonnetFEATURED
r/PromptEngineering2026-05-14

7 個跨 model A/B 測過的 prompt 技巧(不是 vibes)

六個月在 Claude / GPT-4 / Gemini 上用人工 rater A/B 測 200+ prompt 後寫的。包含 persona+constraint stacking / anti-example / role reversal QA / cognitive scaffold / emotional priming / uncertainty CoT / steelman first。

高階
Read

免費04
TUTORIALChatGPTFEATURED
r/ChatGPTPromptGenius2026-05-14

5 個信任檢查單行 prompt(沒有 role-play)

一年的 role-play system prompt + 14-step framework 後總結:真正改變品質的是 5 個單行 prompt。沒有 role、沒有 markdown、沒有「you are an expert」。

入門
Read

免費 · 全文開放閱讀

完整 prompt 已經開放.

免登入閱讀全文、保存瀏覽器收藏;登入後可一鍵複製與留言討論。不用信用卡。

不想註冊?

留個 email,下次有新 prompt 會寄一封簡短摘要給你。退訂一鍵、不轉賣。

每週一期,新上架提示詞 + 模型測試心得。每封信底部都有一鍵取消訂閱。

或訂 RSS feed(30 秒一次的人味選擇)

COMMENTS · 討論區0 則
登入 後可留言。還沒帳號?註冊
目前沒有留言。第一個說說你的經驗。
EMBED · 嵌入 blog / Note一行 iframe HTML、貼進文章即顯示此 prompt 卡片+

適合:部落格、Medium、Notion 公開頁、Substack — 任何支援 iframe / HTML 嵌入的地方。對方點「看完整」會回到本站、是 prompt 庫的免費 backlink。

<iframe src="https://prompt.luvai.net/embed/anthropic-algorithmic-art-p5js-seeded" width="100%" height="380" frameborder="0" style="border:1px solid #e0dcd0;border-radius:4px;" loading="lazy" title="PromptCraft Embed"></iframe>
預覽 embed →380px tall · responsive width
發現這個 prompt 過時 / 跑不動 / 有錯字? 回報給我們 →