Kipt

Algorithmic art skill: generative p5.js art with Claude

Anthropic's algorithmic art skill has Claude write a generative art philosophy, then a seeded p5.js piece with sliders in one HTML file. How to install it.

By the Kipt team · Updated 24 October 2026

Source: anthropics/skills · Maintainer: Anthropic · License: Apache 2.0 · Checked: 24 October 2026

What is the algorithmic art skill?

The algorithmic art skill turns a short request like "flow fields in autumn colors" into a generative p5.js artwork you can explore: Claude first writes a mini manifesto for an art movement, then codes it as a seeded sketch with sliders, all in one HTML file. It is one of the creative example skills in Anthropic's anthropics/skills repo, for designers, creative coders and anyone who wants generative visuals without writing the boilerplate.

The description in its SKILL.md reads: "Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations."

Its skills.sh page listed 89.0K installs (snapshot, 24 October 2026).

What does the algorithmic art skill do?

Claude can load it on its own when you ask for generative art, art made with code, flow fields or particle systems. The SKILL.md splits the work into two steps.

Step 1: an algorithmic philosophy

Claude names a movement in one or two words and writes four to six paragraphs on how it works as a computational process: noise, particles, fields, forces, parametric variation. The skill gives condensed examples such as "Organic Turbulence" (flow fields driven by layered Perlin noise), "Recursive Whispers" (branching structures constrained by golden ratios) and "Stochastic Crystallization" (circle packing or Voronoi relaxation). This philosophy is saved as a Markdown file.

Between the two steps, Claude also picks out a "conceptual seed" from your request: a subtle reference woven into the parameters and behavior rather than drawn literally.

Step 2: a p5.js artifact

Claude then writes the sketch. The technical rules include:

  • Seeded randomness. Call randomSeed(seed) and noiseSeed(seed) so the same seed always gives the same output, which the skill calls the "Art Blocks Pattern."
  • One params object. Every tunable quantity (counts, scales, probabilities, angles, thresholds) sits in a single object tied to UI controls.
  • Start from the template. Claude must read templates/viewer.html first and keep its fixed parts: the layout, Anthropic branding (Poppins and Lora fonts, light colors), the seed controls and the action buttons. Only the algorithm, the parameters and their controls change.
  • Single file. Everything inline, with p5.js as the only external script.

The resulting page has seed display, Prev, Next, Random and jump-to-seed controls, sliders for each parameter, optional color pickers, and Regenerate, Reset and Download PNG actions. It runs as a claude.ai artifact or as a file opened in a browser.

What is in the folder?

  • SKILL.md: the full process, about 20 KB of instructions.
  • templates/viewer.html: the required starting point for every artwork, with comments marking which sections are fixed and which are variable.
  • templates/generator_template.js: a reference for structuring p5.js code (parameters, seeded randomness, classes). The skill says it is "NOT a pattern menu."
  • LICENSE.txt: Apache License 2.0.

There are no scripts to run. The output is files Claude writes.

How do you install the algorithmic art skill?

Claude Code plugin. From the repo README, in a Claude Code session:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

That installs the example-skills set, which includes algorithmic-art alongside skills such as canvas-design, slack-gif-creator and frontend-design. As a plugin skill it is also callable as /example-skills:algorithmic-art, following the namespacing in the Claude Code skills docs.

Just this skill. The command on skills.sh:

npx skills add https://github.com/anthropics/skills --skill algorithmic-art

Add -g to install for all projects. In Claude Code, a personal copy lives at ~/.claude/skills/algorithmic-art/. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

Claude.ai. The README says the example skills are already available on paid Claude.ai plans. To use an edited copy, zip the folder and upload it under Customize > Skills, following Use skills in Claude, which also notes that skills need code execution turned on.

How do you use it?

Describe a mood, a technique or a subject. The skill treats your words as a foundation, not a spec, so short prompts work.

Example prompts (suggestions, not from the repo):

  • Make generative art of a city waking up at dawn. Particles, warm palette.
  • Create a flow field piece inspired by tides. I want sliders for noise scale and particle count.
  • Algorithmic art for a conference poster about distributed systems. Something with recursive branching.
  • Generate 100 variations of the last piece and add preset buttons for seeds 7, 42 and 88.

The last prompt uses a documented feature: when asked, the artifact can generate variations for seeds 1 to 100, add seed preset buttons or a gallery mode of thumbnails.

What do you need?

A browser and an internet connection when the HTML opens: the template loads p5.js 1.7.0 from cdnjs and the fonts from Google Fonts. In Claude.ai the piece renders as an artifact. In Claude Code or Codex you get the files on disk to open yourself.

Tips and limits

  • Expect the Anthropic look. The template's branding is fixed by design. If you want your own UI colors or fonts, ask for it explicitly or edit viewer.html in your copy, since the skill otherwise tells Claude to keep it.
  • Art colors are separate. The fixed branding covers the UI around the canvas, not the artwork, so palette requests still apply to the art itself.
  • Seeds make results shareable. Write down seed numbers you like. With the same parameters, the same seed reproduces the same output.
  • Heavy sketches can be slow. The skill asks for smooth execution, but particle counts are just slider values. Lower them if the page stutters.
  • Originality is part of the brief. The skill tells Claude not to copy existing artists' work, so naming an artist will steer it toward a broader technique rather than a replica.
  • Audit and license. On 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk. The folder is Apache 2.0, so you can modify and share it if you keep the license notice.

Save it in your Kipt library

If you edit the template to your own branding, keep that version somewhere you control. In Kipt, open Skills and paste https://github.com/anthropics/skills/tree/main/skills/algorithmic-art into the import box; Kipt brings in the SKILL.md and the templates/ files. Kipt stores skills as Markdown in your own private GitHub repo and installs them into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Anthropic.

Similar skills

Questions

What is the algorithmic art skill?

algorithmic-art is an Agent Skill in Anthropic's anthropics/skills repo. It has Claude write a short algorithmic philosophy for a generative art movement, then express it as a p5.js sketch with seeded randomness, parameter sliders and seed navigation, all in one self-contained HTML file.

How do I install the algorithmic art skill?

In Claude Code, run /plugin marketplace add anthropics/skills and /plugin install example-skills@anthropic-agent-skills. To install only this skill, run npx skills add https://github.com/anthropics/skills --skill algorithmic-art. Anthropic's README says the example skills are already available on paid Claude.ai plans.

What does the algorithmic art skill output?

Two things: an algorithmic philosophy written as Markdown, four to six paragraphs long, and a single HTML artifact built from the skill's viewer.html template. The HTML loads p5.js from a CDN and includes seed controls, parameter controls, and Regenerate, Reset and Download PNG actions.

Why does the same seed always give the same image?

The skill requires seeded randomness: it calls randomSeed and noiseSeed with the current seed, so a given seed and set of parameters always reproduces the same output. That lets you step through seeds to find variations and share a seed number to recreate a favorite.

Can the algorithmic art skill copy a famous artist's style?

Its description tells Claude to create original algorithmic art rather than copying existing artists' work to avoid copyright violations. You can describe moods, techniques like flow fields or circle packing, or a theme, and the skill turns that into its own movement.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.