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

Algorithmic Art (p5.js Generative Art)

Writes an algorithmic art 'manifesto' first, then implements it as a seeded, interactive p5.js artwork in a single self-contained HTML file.

Design & UIIntermediate★ 246⑂ 44AI score 9/10Last updated: Jul 16, 2026

What it does

  • Turns a short prompt into a 4–6 paragraph algorithmic philosophy (.md): a movement name plus how it manifests through noise, particles, vector fields, recursion and parametric variation.
  • Implements that philosophy in p5.js, output as one self-contained HTML artifact (p5.js via CDN) that runs instantly in claude.ai artifacts or any browser.
  • Enforces seeded randomness (Art Blocks style) so the same seed always reproduces the same image, with a sidebar for seed prev/next/random/jump, parameter sliders, and Regenerate / Reset / Download PNG actions.
  • Requires reading the bundled templates/viewer.html first: keep layout and branding fixed, replace only the algorithm and parameter controls.

Who it's for

  • Creative coders and generative art enthusiasts who want to draw with code
  • Designers and developers needing abstract visuals for sites, decks, prints or NFT-style series
  • Anyone who wants an interactive demo where sliders and seeds reveal variations

Examples

  1. "Make an organic wind-like flow field from layered Perlin noise" → an 'Organic Turbulence' philosophy doc plus an HTML viewer with particle-count and noise-scale sliders.
  2. "Voronoi/circle-packing crystallization — let me browse seeds 1 to 100" → a single artifact with seed navigation and a gallery mode.
  3. "Recursive L-system trees, strictly monochrome" → artwork with no color pickers, exposing only branch angle and recursion depth parameters.

· · · 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/lingxling/awesome-skills-cn/HEAD/anthropics-skills/skills/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 anthropics-skills/skills/algorithmic-art folder from the GitHub repo lingxling/awesome-skills-cn into my ~/.claude/skills/lingxling-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/lingxling/awesome-skills-cn.git && mkdir -p ~/.claude/skills && cp -r awesome-skills-cn/anthropics-skills/skills/algorithmic-art ~/.claude/skills/

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

  1. Open your terminal.
  2. Clone the repo: git clone https://github.com/lingxling/awesome-skills-cn.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the whole skill folder (templates included): cp -r awesome-skills-cn/anthropics-skills/skills/algorithmic-art ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/algorithmic-art/templates — you should see viewer.html and generator_template.js; without them the skill won't work as intended.
  6. Restart Claude Code, then ask something like "create generative art with code" to trigger the skill.
  7. Open the generated HTML file in a browser and explore variations using the sliders and seed buttons.
View source on GitHub ↗License: MIT