83.3K+Download
Skip to the usage guide
algorithmic-artby Anthropic

Algorithmic Art Skill.

A Claude Code and Codex skill for image work: generative art with p5.js: seeded particles, flow fields, and tunable parameters.

  • Images & Generative Art
  • Generative art
Download OpenDesignView usage guide
anthropics/skills · skills/algorithmic-art/SKILL.mdSKILL.md
--- name: algorithmic-art description: 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. --- ## ALGORITHMIC PHILOSOPHY CREATION ## DEDUCING THE CONCEPTUAL SEED ## P5.JS IMPLEMENTATION ## INTERACTIVE ARTIFACT CREATION ## VARIATIONS & EXPLORATION ## THE CREATIVE PROCESS
Front matter and section headings read from the upstream file on 2026-09-14 · 19,735 characters in full

01 What it does

What the algorithmic-art Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill creates original algorithmic art using p5.js through a two-step process: first defining an algorithmic philosophy (a computational aesthetic movement expressed in a markdown manifesto), then implementing it as a self-contained interactive HTML artifact. Every artwork uses seeded randomness for reproducibility, allowing users to navigate through variations via seed controls.

The skill emphasizes emergent behavior, mathematical beauty, and parametric variation—building living algorithms rather than static images. Output includes a 4-6 paragraph philosophy document and a single HTML file with embedded p5.js code, parameter sliders, and Anthropic-branded UI, ready to run instantly in browsers or claude.ai artifacts.

What it produces

  • Algorithmic philosophy as a markdown file naming the movement and articulating how it manifests through computational processes in 4-6 paragraphs
  • Single self-contained HTML artifact with embedded p5.js algorithm, parameter controls, seed navigation, and Anthropic-branded UI that works immediately in browsers or claude.ai
See the example prompt ↗

How It Works

  1. 01
    Create Algorithmic Philosophy

    Write a 4-6 paragraph manifesto naming a generative art movement and describing how it manifests through computational processes, noise functions, particle behaviors, and emergent complexity.

  2. 02
    Deduce Conceptual Seed

    Before coding, identify a subtle conceptual thread from the original request to embed as invisible DNA in the algorithm—a sophisticated reference felt intuitively by those familiar, while others experience pure generative beauty.

  3. 03
    Build from Viewer Template

    Read templates/viewer.html and use it as the literal starting point.

  4. 04
    Implement Seeded Algorithm

    Express the philosophy through p5.js code using seeded randomness (randomSeed and noiseSeed) so the same seed always produces identical output.

  5. 05
    Design Tunable Parameters

    Create parameters that emerge from the algorithmic philosophy by asking what qualities of the system can be adjusted—quantities, scales, probabilities, ratios, angles, or thresholds—rather than thinking in pattern types.

  6. 06
    Output Single Artifact

    Produce a self-contained HTML file with p5.js from CDN, the algorithm, parameter controls, and Anthropic-branded UI inline.

02 Find your fit

When to Use the algorithmic-art Skill

Use the algorithmic-art skill in Claude Code or Codex when the job is image work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Users requesting generative art, algorithmic art, flow fields, or particle systems created through code
  • Creating living algorithms that produce unique outputs on each run through emergent behavior and controlled chaos
  • Exploring parametric variations through interactive controls and seed navigation to discover different facets of an algorithm's potential

Know the Boundaries

  • Copying existing artists' work, which would violate copyright
  • Creating static images or templates instead of computational processes with emergent behavior
  • Artworks that cannot be expressed through seeded randomness, noise fields, particles, flows, or mathematical relationships

What to Provide

  • User request or instructionsSubtle input the skill uses as a foundation without constraining creative freedom.

03 Inside the skill

Rules the algorithmic-art Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Philosophy Drives Implementation

    The algorithmic philosophy dictates what to build.

  2. Start from viewer.html Template

    Before writing any HTML, read templates/viewer.html using the Read tool and use that file as the literal starting point.

  3. Emphasize Expert Craftsmanship Repeatedly

    The philosophy must stress multiple times that the final algorithm should appear meticulously crafted, refined through countless iterations, the product of deep computational expertise by someone at the absolute top of their field.

  4. Embed Conceptual Thread Subtly

    The conceptual reference from the original request must be so refined it enhances depth without announcing itself—like a jazz musician quoting another song through algorithmic harmony.

  5. Four to Six Paragraph Philosophies

    The algorithmic philosophy must be 4-6 substantial paragraphs long, articulating how the movement manifests through computational processes, noise functions, particle behaviors, temporal evolution, and parametric variation.

04 Put it to work

Install algorithmic-art in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add algorithmic-art to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for skills/algorithmic-art/SKILL.md; the repository may document its own path.

Give the Skill a First Image Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Create algorithmic art inspired by the way mycelium networks communicate through chemical signals underground. I want something that feels organic and interconnected, with growth patterns that emerge over time. Use earthy tones and make the parameters tunable so I can explore different colony behaviors.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Verify the same seed produces identical output every time by testing seed navigation (previous/next buttons) and confirming visual reproducibility
  • Confirm the HTML artifact works immediately in claude.ai or any browser without requiring external files, setup, or a server
  • Check that all parameter sliders update the artwork in real-time and the reset button restores default values
  • Ensure the artifact uses the exact layout structure, Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop), and sidebar organization from templates/viewer.html
  • Test seed controls work correctly: display current seed, previous/next buttons cycle seeds, random button generates new seed, and jump-to-seed input navigates to specific seeds
  • Verify the algorithm expresses the philosophy rather than copying a generic pattern, with craftsmanship that feels meticulously refined

In OpenDesign algorithmic-art is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill file
skills/algorithmic-art/SKILL.md Content checksum recorded at verification; commit 34040c9
License
Apache-2.0 From skills/algorithmic-art/LICENSE.txt; SKILL.md says “Complete terms in LICENSE.txt”.
Repository stars
176,183 GitHub snapshot taken 2026-09-14 for the whole anthropics/skills repository, which contains 7 skills in this catalog. Not a rating or usage count for algorithmic-art.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. ALGORITHMIC PHILOSOPHY CREATIONInstructions for writing a 4-6 paragraph manifesto defining a computational aesthetic movement with emergent behavior
  2. THE CRITICAL UNDERSTANDINGClarifies the skill receives user input as foundation, creates philosophy, then expresses it algorithmically in code
  3. HOW TO GENERATE AN ALGORITHMIC PHILOSOPHYSteps to name the movement and articulate how it manifests through computational processes, with craftsmanship emphasis
  4. PHILOSOPHY EXAMPLESFive condensed examples showing movement names and how they express algorithmically: Organic Turbulence, Quantum Harmonics, Recursive Whispers, Field Dynamics, Stochastic Crystallization
  5. ESSENTIAL PRINCIPLESCore tenets: process over product, parametric expression, artistic freedom, pure generative art, expert craftsmanship
  6. DEDUCING THE CONCEPTUAL SEEDHow to identify a subtle conceptual thread from the request to embed invisibly in the algorithm
  7. P5.JS IMPLEMENTATIONTechnical instructions for expressing the philosophy through p5.js code with seeded randomness and parameters
  8. STEP 0: READ THE TEMPLATE FIRSTMandatory step to read templates/viewer.html and use it as literal starting point before writing HTML
  9. TECHNICAL REQUIREMENTSSeeded randomness pattern, parameter structure guidelines, and how to let philosophy dictate algorithm choices
  10. CRAFTSMANSHIP REQUIREMENTSStandards for balance, color harmony, composition, performance, and reproducibility in the final algorithm
  11. OUTPUT FORMATSpecifies outputting philosophy as markdown and single self-contained HTML artifact built from the template
  12. INTERACTIVE ARTIFACT CREATIONDetailed instructions on what's fixed versus variable in the template and how to build the sidebar
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 19,735 characters. Read the full file on GitHub.

06 Before you install

Questions About the algorithmic-art Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What does the skill output?

The skill outputs two files: a markdown document containing the 4-6 paragraph algorithmic philosophy, and a single self-contained HTML artifact with embedded p5.js code, parameter controls, and Anthropic-branded UI. The HTML works immediately in claude.ai or any browser without external dependencies.

Algorithmic Art

Run algorithmic-art on a Real Image Work Task.

The algorithmic-art skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/anthropics/skills --skill algorithmic-art