algorithmic-artby Anthropic

Algorithmic Art Skill.

Create p5.js generative art from a written concept, then explore it through seed navigation and adjustable parameters. The workflow produces a design philosophy and an interactive HTML viewer.

Images & Generative Art
Generative art

Download OpenDesign View 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

From a Concept to an Interactive p5.js Artwork

The source defines a philosophy-first workflow, followed by a template-based viewer. These are documented instructions, not results from a run performed for this guide.

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

The Generative-Art Workflow

The algorithmic-art skill turns a concept into a computational approach: how particles move, how fields interact, or how a pattern grows. The agent first writes that approach as a short algorithmic philosophy, then expresses it in p5.js. The concept should shape the behavior of the code rather than serve only as a title for a generic effect.

The viewer lets you change parameters and explore seeds without creating a separate file for each variation. The source allows both still and animated sketches and includes a PNG download action. The artwork code and controls are embedded in HTML, but p5.js loads from a CDN, so the default viewer still needs access to that library.

What it produces

A named algorithmic philosophy in Markdown or text, describing the computational approach in four to six paragraphs.
An HTML viewer based on templates/viewer.html, with the p5.js artwork code, parameter controls and seed navigation. The p5.js library itself is loaded from a CDN.

See the example prompt ↗

How It Works

01
Interpret the Concept
Identify the theme or behavior in your request that can guide an algorithm. The source asks for a subtle connection expressed through parameters, movement or emergent patterns rather than a literal illustration.
02
Write the Algorithmic Philosophy
Name the movement and describe its computational approach in four to six paragraphs before implementation.
03
Start From the Supplied Viewer
Read templates/viewer.html and preserve its fixed layout, branding, seed controls and actions. Change the algorithm and the parameter-specific controls.
04
Implement Repeatable Variation
Initialize both randomSeed and noiseSeed from the selected seed. Keep the same seed and parameters available so a variation can be revisited.
05
Expose Useful Parameters
Add controls for the quantities the artwork actually uses, such as particle count, noise scale or speed. Color controls are optional when the palette is fixed or monochrome.
06
Check the Viewer
Exercise seed navigation, live parameter updates, Reset, Regenerate and Download PNG. Open the HTML in the intended browser and check that p5.js loads before judging the artwork.

02 Find your fit

When to Use the algorithmic-art Skill

Choose this skill for art expressed through code and explored through parameters. Its viewer is a fixed starting point, not a general-purpose page-design template.

Good Fit

Explore a Generative SystemDevelop flow fields, particle systems or other computational patterns whose behavior follows the concept in your brief.
Compare Repeatable VariationsKeep the algorithm and parameters fixed while moving between seeds, then revisit a seed you want to refine.
Tune an Artwork InteractivelyAdjust the controls to explore density, scale, speed or other properties chosen for this particular algorithm.

Know the Boundaries

A Fixed Viewer ShellThe source requires the template layout and Anthropic UI branding to remain unchanged. The artwork colors and algorithm can change; the viewer is not a blank layout canvas.
Not an Offline-by-Default ArtifactThe default HTML imports p5.js from a CDN. A single HTML deliverable does not mean that the external library is bundled into it.
Original Algorithms, Not Artist CopiesThe skill instructs the agent to make original generative art rather than reproduce an existing artist’s work. Review your references and intended use separately.

What to Provide

Describe Your Generative-Art IdeaDescribe the concept you want to explore through code, such as a flow field or particle system. The skill uses your request to develop an algorithmic philosophy, then implement it in p5.js.

03 Inside the skill

Implementation Rules That Shape the Artwork

The source distinguishes what must stay fixed from the parts that should change for each artwork.

Keep the Viewer, Replace the Algorithm
Preserve the header, sidebar structure, UI branding and seed controls in templates/viewer.html. Replace the variable algorithm, parameter definitions and matching controls.
Seed Both Randomness Sources
The code must call randomSeed and noiseSeed with the selected seed. Reproducibility is a requirement to test, not a claim that every generated implementation already meets it.
Make the Controls Match the System
Every exposed parameter needs a working control and a meaningful range. The source lists quantities, scales, probabilities, ratios, angles and thresholds as possible tunable properties.
Treat Color Controls as Optional
A fixed-color or monochrome artwork may omit the Colors section. Keeping the viewer’s UI branding does not require using that palette in the artwork itself.
Keep the Artwork Code Inline
Although the opening description mentions JavaScript files, the final artifact and resource instructions explicitly say to embed the algorithm in the HTML instead of shipping a separate .js file. The p5.js CDN remains the external import.

04 Put it to work

Set Up and Try algorithmic-art

Review the upstream setup, start with one generative-art brief, and check the actual viewer before relying on it.

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

The command below is a generic skills CLI reference, not a command supplied by this SKILL.md or executed for this guide. Check the repository and your agent’s installation instructions first.

Terminal

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

Ensure the installed skill includes templates/viewer.html and the supporting resources; the instructions explicitly depend on that template.

Start With One Generative-Art Brief

Adapt this editorial example to your theme. It is not copied from an upstream user prompt and has not been run for this page.

Starter prompt

Use algorithmic-art to create a p5.js artwork inspired by [a natural process or abstract concept]. First explain the algorithmic philosophy, then build the viewer from the supplied template. Choose three useful parameters and explain what each changes. Include seed navigation and PNG export. Keep the artwork original, and report which controls you tested and whether the p5.js CDN loaded in the target browser.

Inspect the resulting code and controls; the example is a starting request, not a verified output.

Check the First Result

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

Return to the same seed and parameter values and confirm that the composition is reproducible; changing a parameter is not a same-input comparison.
Open the HTML in the intended browser and verify that the p5.js CDN request succeeds and the canvas renders. Do not assume offline support.
Move each parameter control and check that the artwork updates; Reset should restore the documented defaults.
Check Previous, Next, Random and Jump against the displayed seed. Confirm Regenerate and Download PNG also work.
Compare the viewer shell with templates/viewer.html while checking that the artwork algorithm and controls reflect the requested concept.

OpenDesign is a local design workspace for coding agents. Check the skill’s availability in your installed version and its upstream setup; this source review does not verify a current bundled installation.

Download OpenDesign Read 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.
Source Review: 2026-09-14 source snapshot Editorial corrections reviewed on 2026-10-08 against the same saved source. This is not a live execution test or verification of the current upstream version.

Inside the SKILL.md

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

The final artifact instructions call for an algorithmic philosophy in Markdown or text and an HTML viewer containing the artwork code and controls. The opening description also mentions .js files, but the later resource instructions explicitly say to embed the algorithm in the HTML.

Does the Viewer Work Offline?

Not by default: the HTML loads p5.js from a CDN. The source describes opening the viewer without a local server, which is different from having no external dependency. Test access to the library in the browser where you plan to use the file.

Can It Make a Still Image Rather Than an Animation?

Yes. The p5.js implementation section allows a static sketch using noLoop or an animated draw loop, and the viewer actions include Download PNG. The skill’s emphasis on generative processes does not prohibit exporting a still frame.

Can I Change the Viewer Branding?

The reviewed instructions require the supplied viewer’s layout, Anthropic UI colors and fonts to remain fixed. You can change the artwork algorithm, its palette and parameter controls. This is a constraint of the documented workflow, not a claim about what HTML can technically support.

Algorithmic Art

Explore a Generative-Art Idea With Your Agent

Start with a concept, inspect the p5.js viewer, and refine the parameters around a result you can reproduce. Check the skill’s setup and dependencies before running it.

Download OpenDesign Browse all skills