Community写作与编辑github.com

agencelutie/LP-lutie

使用p5.js创建算法艺术,支持种子随机性和交互式参数探索。当用户请求使用代码创作艺术、生成艺术、算法艺术、流场或粒子系统时使用。创作原创算法艺术,避免抄袭现有艺术家作品以规避版权问题。

LP-lutie 是什么?

该技能是一个面向开发者与AI代理的专业工具,专注于算法艺术的创作与探索。它基于p5.js库,通过种子随机性确保作品可复现,并提供交互式参数调整界面,使用户能实时探索生成艺术的多样性。技能工作流程分为两步:首先创建“算法哲学”(.md文件)作为美学指导,然后将其实现为包含完整p5.js算法、参数控件和用户界面的自包含HTML交互式艺术品。核心要求是强调“过程胜过产品”,即算法执行中涌现的美学独特性,而非静态图像。技能特别强调高水准的工艺标准:算法应给人以经过无数次迭代精炼、出自顶尖计算美学专家的感觉。所有作品都从预设模板构建,保持Anthropic品牌风格,并严格遵循种子随机性(Art Blocks模式)以确保结果可复现。此技能适用于Claude Code、Cursor等AI代理平台,尤其适合需要生成原创、非抄袭性算法艺术的场景。

兼容平台✓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文件)

首先,执行以下任务:

算法哲学创建

首先,创建一个将通过以下方式诠释的“算法哲学”(而非静态图像或模板):

  • 计算过程、涌现行为、数学之美
  • 种子随机性、噪声场、有机系统
  • 粒子、流、场、力
  • 参数化变化与受控混沌

关键理解

  • 接收内容:用户给出的微妙输入或指令作为基础,但不限制创作自由。
  • 创建内容:一种算法哲学/生成美学运动。
  • 后续步骤:同一版本接收哲学并用代码表达——创建90%算法生成、10%关键参数的p5.js草图。

考虑以下方法:

  • 撰写一份生成艺术运动宣言
  • 下一阶段涉及编写实现该运动的算法

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

如何生成算法哲学

命名运动(1-2个词):"有机湍流" / "量子和声" / "涌现的静谧"

阐明哲学(4-6段——简洁但完整):

要捕捉算法本质,表达该哲学如何通过以下方式体现:

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

关键指南:

  • 避免冗余:每个算法方面应只提及一次。避免重复噪声理论、粒子动力学或数学原理的概念,除非增加新的深度。
  • 反复强调工艺性:哲学必须多次强调,最终算法应看起来像经历了无数小时的开发、精心打磨,出自顶尖专家之手。这种框架至关重要——重复使用诸如“精心制作的算法”、“深度计算专业知识的产物”、“痛苦的优化”、“大师级实现”等短语。
  • 保留创意空间:具体说明算法方向,但要足够简洁,以便下一个Claude有空间以极高的工艺水平做出解释性的实现选择。

哲学必须引导下一版本以算法方式(而非静态图像)表达创意。美存在于过程中,而非最终帧。

哲学示例

"有机湍流" 哲学:受自然规律约束的混沌,从无序中涌现秩序。 算法表达:由多层Perlin噪声驱动的流场。数千粒子跟随向量力,其轨迹累积成有机密度图。多噪声倍频程创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮,慢速粒子淡入阴影。算法运行直至平衡——一个经过精心调校的平衡,每个参数都由计算美学大师通过无数次迭代精炼。

"量子和声" 哲学:表现出波状干涉图案的离散实体。 算法表达:粒子在网格上初始化,每个携带一个随时间通过正弦波演化的相位值。当粒子靠近时,它们的相位发生干涉——相长干涉产生亮节点,相消干涉产生空洞。简谐运动生成复杂的涌现曼陀罗。这是通过痛苦的频率校准的结果,每个比率都经过精心选择以产生共振之美。

"递归低语" 哲学:跨尺度的自相似性,有限空间中的无限深度。 算法表达:递归细分的分支结构。每个分支略有随机化,但受黄金比例约束。L系统或递归细分生成既数学又有机的树状形式。微妙的噪声扰动打破完美对称。线条权重随递归级别递减。每个分支角度都是深度数学探索的产物。

"场动力学" 哲学:通过其对物质的影响使不可见力变得可见。 算法表达:由数学函数或噪声构建的向量场。粒子在边缘诞生,沿场线流动,到达平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——无形的力的幽灵般证据。通过力平衡精心编排的计算舞蹈。

"随机结晶" 哲学:随机过程结晶为有序结构。 算法表达:随机圆填充或Voronoi镶嵌。从随机点开始,让它们通过松弛算法演化。细胞相互推开直至平衡。基于细胞大小、邻居数量或到中心距离的颜色。涌现的有机镶嵌感觉既随机又不可避免。每个种子产生独特的晶体之美——大师级生成算法的标志。

这些是浓缩示例。实际的算法哲学应为4-6个实质性段落。

基本原则

  • 算法哲学:创建要通过代码表达的计算世界观
  • 过程胜过产品:始终强调美从算法执行中涌现——每次运行都是独特的
  • 参数化表达:创意通过数学关系、力、行为来传达——而非静态构图
  • 艺术自由:下一个Claude以算法方式解释哲学——提供创意实现空间
  • 纯生成艺术:这是关于制作活的算法,而非带有随机性的静态图像
  • 专家工艺性:反复强调最终算法必须感觉是精心制作的,经过无数次迭代精炼,是计算美学领域顶尖专家的深度专业知识的产物

算法哲学应为4-6段长。 用诗意的计算哲学填满它,将预期的愿景融合在一起。避免重复相同的要点。将此算法哲学输出为.md文件。


推导概念种子

关键步骤:在实现算法之前,识别原始请求中微妙的线索主线。

基本原则: 概念是嵌入在算法本身中的微妙的、小众的引用——不总是字面的,总是精妙的。熟悉该主题的人应该直觉地感受到它,而其他人只是体验到一个大师级的生成作品。算法哲学提供了计算语言。推导出的概念提供了灵魂——安静的概念DNA无形地编织进参数、行为和涌现模式中。

非常重要:引用必须如此精炼,以至于增强作品的深度而不宣告自身。想象一下爵士音乐家通过算法和声引用另一首歌——只有懂的人会捕捉到,但每个人都欣赏生成之美。


p5.js实现

在哲学和概念框架建立后,通过代码表达。暂停以收集思路后再继续。仅使用下面创建的算法哲学和指令。

⚠️ 步骤0:先读取模板 ⚠️

关键:在编写任何HTML之前:

  1. 使用Read工具读取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,  // 始终包含种子以确保可复现性
  // 颜色
  // 添加控制 YOUR 算法的参数:
  // - 数量(多少个?)
  // - 尺度(多大?多快?)
  // - 概率(多可能?)
  // - 比率(什么比例?)
  // - 角度(什么方向?)
  // - 阈值(行为何时改变?)
};

要设计有效的参数,专注于系统需要可调优的属性,而非思考“模式类型”。

核心算法——表达哲学:

关键:算法哲学应支配要构建的内容。

要通过代码表达哲学,避免思考“我应该使用哪种模式?”,而是思考“如何通过代码表达这种哲学?”

如果哲学是关于有机涌现,考虑使用:

  • 随时间累积或增长的元素
  • 受自然规则约束的随机过程
  • 反馈循环和交互

如果哲学是关于数学之美,考虑使用:

  • 几何关系和比率
  • 三角函数与和声
  • 产生意外模式的精确计算

如果哲学是关于受控混沌,考虑使用:

  • 严格边界内的随机变化
  • 分岔和相变
  • 从无序中涌现秩序

算法从哲学中流出,而非从选项菜单中。

为了指导实现,让概念本质告知创造性和原创性选择。构建表达此特定请求愿景的内容。

画布设置:标准p5.js结构:

function setup() {
  createCanvas(1200, 1200);
  // 初始化系统
}

function draw() {
  // 生成算法
  // 可以是静态的(noLoop)或动画的
}

工艺要求

关键:要达成大师级别,创建感觉像经过无数次迭代并由生成艺术大师反复打磨的算法。仔细调校每个参数。确保每个模式都有目的地涌现。这不是随机噪声——这是通过深度专业知识精炼的受控混沌。

  • 平衡:复杂度而不视觉噪声,秩序而不僵化
  • 色彩和谐:深思熟虑的调色板,而非随机RGB值
  • 构图:即使在随机性中,也要保持视觉层次和流动
  • 性能:流畅执行,如果是动画则优化为实时
  • 可复现性:相同种子总是产生相同输出

输出格式

输出:

  1. 算法哲学 - 作为markdown或文本解释生成美学
  2. 单HTML工件 - 从templates/viewer.html构建的自包含交互式生成艺术

HTML工件包含一切:p5.js(从CDN)、算法、参数控件和UI——全部在一个文件中,可立即在claude.ai工件或任何浏览器中运行。从模板文件开始,而非从头开始。


交互式工件创建

提醒templates/viewer.html应已读取。使用该文件作为起点。

为了允许探索生成艺术,创建一个单文件、自包含的HTML工件。确保此工件在claude.ai或任何浏览器中立即工作——无需设置。将所有内容嵌入内联。

关键:固定与可变部分

templates/viewer.html文件是基础。它包含所需的确切结构和样式。

固定(始终完全包含):

  • 布局结构(头部、侧边栏、画布区域)
  • Anthropic品牌(UI颜色、字体、渐变)
  • 侧边栏中的种子部分:
    • 种子显示
    • 上一个/下一个按钮
    • 随机按钮
    • 跳转到种子输入 + Go按钮
  • 侧边栏中的操作部分:
    • 重新生成按钮
    • 重置按钮

可变(为每个艺术品定制):

  • 整个p5.js算法(setup/draw/classes)
  • 参数对象(定义艺术所需的内容)
  • 侧边栏中的参数部分:
    • 参数控件的数量
    • 参数名称
    • 滑块的最小/最大/步进值
    • 控件类型(滑块、输入等)
  • 颜色部分(可选):
    • 某些艺术需要颜色选择器
    • 某些艺术可能使用固定颜色
    • 某些艺术可能是单色的(无需颜色控件)
    • 根据艺术需求决定

每个艺术品应有独特的参数和算法! 固定部分提供...

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.

相关技能