Community寫作與編輯github.com

agencelutie/LP-lutie

使用 p5.js 建立演算法藝術,具備基於種子的隨機性與互動式參數探索。當使用者要求透過程式碼創作藝術、生成式藝術、演算法藝術、流場或粒子系統時使用。創作原創的演算法藝術,而非複製現有藝術家的作品,以避免版權問題。

LP-lutie 是什麼?

這是一個專門用於建立演算法藝術的 AI 技能,深度整合了 p5.js,並遵循一套結構化的創作流程:首先,AI 會根據使用者提示建構一份「演算法哲學」宣言,以此作為生成式美學的基礎。接著,技能會引導 AI 將這份哲學轉譯為互動式 p5.js 程式碼,產生富含湧現行為、基於種子的隨機性與參數化變化的原創作品。此技能強調「工藝至上」,要求最終的演算法必須展現出經過精心調校、反覆迭代的專業深度。輸出格式包含一個標記文件(.md)與一個完整的、自包含的 HTML 文件,後者基於特定模板建構,包含側邊欄參數控制、種子管理與再生按鈕,確保與 Anthropic 的品牌風格一致並能在瀏覽器中直接運作。該技能主要支援 Claude Code 等平台,讓開發者或創作者能探索生成式藝術,並創造出模仿頂尖生成式藝術家水準的獨特互動作品。

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

Installed? Explore more 寫作與編輯 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · 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 或遞歸細分生成既數學又有機的樹狀形態。微妙的雜訊擾動打破了完美的對稱性。線條粗細隨每個遞歸層級遞減。每個分支角度都是深度數學探索的產物。

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

「隨機結晶」 哲學:隨機過程結晶成有序結構。 演算法表達:隨機化圓形填充或 Voronoi 鑲嵌。從隨機點開始,讓它們透過弛豫演算法演化。細胞相互推開直到達到平衡。根據細胞大小、鄰居數量或與中心的距離來決定顏色。湧現出的有機鑲嵌感覺既隨機又不可避免。每個種子都產生獨特的結晶之美——大師級生成式演算法的標誌。

這些是精簡範例。實際的演算法哲學應為 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/類別)
  • 參數物件(定義藝術所需的內容)
  • 側邊欄中的參數區段:
    • 參數控制項的數量
    • 參數名稱
    • 滑桿的最小值/最大值/步長值
    • 控制項類型(滑桿、輸入框等)
  • 顏色區段(可選):
    • 有些藝術需要顏色選擇器
    • 有些藝術可能使用固定顏色
    • 有些藝術可能是單色的(無需顏色控制項)
    • 根據藝術的需求來決定

每個藝術品都應有獨特的參數和演算法! 固定部分提供了 c

…

[已截斷以利翻譯]

Individual skills in this repo

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

agencelutie/LP-lutie

Submit expense reimbursements through Benepass (app.getbenepass.com). For users whose employer uses Benepass as their benefits platform. Handles login, benefit selection, form filling, receipt upload, and submission. Requires browser/computer-use capabilities.

agencelutie/LP-lutie

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.

agencelutie/LP-lutie

Make a phone call to book an appointment or reservation. Checks calendar first, gets explicit consent before dialing, discloses AI identity on the call, and adds the booking to calendar when done.

agencelutie/LP-lutie

Cancel a subscription or unsubscribe from a service. Works from a description, a pasted charge line, a URL, or a photo/screenshot. Can also audit a full statement for recurring charges and cancel several at once. Finds the right contact method and handles the cancellation — including phone calls.

agencelutie/LP-lutie

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' work to avoid copyright violations.

agencelutie/LP-lutie

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.

agencelutie/LP-lutie

Help plan an event — from a birthday dinner to a wedding. Scales to the size of the occasion. Handles venue research, guest lists, timelines, vendors, and budgets.

agencelutie/LP-lutie

Help submit an expense or reimbursement on any platform. Detects the right tool (Benepass, Brex, Concur, Expensify, etc.), finds receipts, checks for duplicates, and walks through submission.

agencelutie/LP-lutie

Handle small bureaucratic tasks — jury duty responses, parking tickets, passport renewals, DMV forms, permit applications, and other government or administrative paperwork.

agencelutie/LP-lutie

Run financial calculations and scenario comparisons — tax estimates, loan comparisons, retirement projections, rent vs. buy, investment scenarios, and more. Pure math, no accounts or logins needed.

agencelutie/LP-lutie

Help order groceries for delivery. Concierge-style flow — store selection, occasion-based list building, budget tracking, and cart assembly.

agencelutie/LP-lutie

Help find and book a service provider for a task — cleaning, handyman, moving, assembly, yard work, errands, etc. Searches TaskRabbit, Handy, Thumbtack, and similar platforms.

agencelutie/LP-lutie

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.).

agencelutie/LP-lutie

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).

agencelutie/LP-lutie

Help order food timed to arrive at a specific time. Works backward from target arrival, suggests restaurants, builds cart, and monitors delivery.

agencelutie/LP-lutie

Refill a prescription at a pharmacy. Works from a medication name, an Rx number, a photo of the bottle, or just "I'm running low." Confirms exactly what's being requested, gathers everything the pharmacy will ask for up front, and handles the refill online or by phone — whichever is fastest.

agencelutie/LP-lutie

Help return an item or request a refund from any retailer. Identifies the item, finds the return policy, navigates the process, and handles shipping labels or phone calls.

agencelutie/LP-lutie

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

agencelutie/LP-lutie

Landing page quality assessment for paid advertising campaigns. Evaluates message match, page speed, mobile experience, trust signals, form optimization, and conversion rate potential. Use when user says "landing page", "post-click experience", "landing page audit", "conversion rate", or "landing page optimization".

agencelutie/LP-lutie

Generate structured landing page copy with hero, body, proof, and CTA sections. Framework-agnostic - adapts approach based on awareness level and offer type.

相關技能