Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Algorithmic Art (p5.js)

Writes a generative-art philosophy first, then implements it as a seeded, interactive p5.js artwork in one self-contained HTML file.

Image & VideoIntermediate★ 1,760⑂ 310AI score 9/10Last updated: Jul 14, 2026

What it does

  • Turns your prompt into a 4–6 paragraph algorithmic philosophy / manifesto saved as Markdown.
  • Implements that philosophy as p5.js code inside a single self-contained HTML artifact (p5 from CDN).
  • Enforces seeded randomness (randomSeed/noiseSeed) so the same seed always reproduces the same artwork.
  • Builds the viewer UI from templates/viewer.html: seed prev/next/random/jump, parameter sliders, Regenerate, Reset, Download PNG.
  • Pushes for original algorithms instead of imitating named artists, reducing copyright risk.

Who it's for

  • Developers and creative coders who want to draw with code
  • Designers/marketers needing generative series for banners, posters, prints
  • Learners exploring particle systems, flow fields, Voronoi relaxation, L-systems
  • Educators who need a zero-setup interactive demo in the browser

Examples

  1. "Make a layered Perlin-noise flow field with thousands of particles" → an 'Organic Turbulence' philosophy doc plus an HTML viewer with accumulating particle trails.
  2. "Let me browse seeds 1–100 of a recursive branching structure" → L-system algorithm with seed navigation inside one artifact.
  3. "Monochrome poster of Voronoi cells crystallizing" → viewer with no color pickers, only density/relaxation sliders and a PNG export button.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Prat011/awesome-llm-skills/HEAD/algorithmic-art/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the algorithmic-art folder from the GitHub repo Prat011/awesome-llm-skills into my ~/.claude/skills/prat011-algorithmic-art/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Prat011/awesome-llm-skills.git && mkdir -p ~/.claude/skills && cp -r awesome-llm-skills/algorithmic-art ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/Prat011/awesome-llm-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the whole skill folder (the templates directory is required): cp -r awesome-llm-skills/algorithmic-art ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/algorithmic-art/templates — you should see viewer.html.
  6. Restart Claude Code, then ask something like "create generative art with p5.js" to trigger the skill.
  7. Open the generated HTML file in any browser and play with the seed controls and sliders.
View source on GitHub ↗