Back to the collection
algorithmic-art·Design & creativity

Make reproducible interactive art with algorithmic-art

On this page

algorithmic-art is useful when you want to explore the images produced by a set of rules. Its output combines a written artistic direction with an interactive HTML viewer, seed navigation, and controls. Particle systems, flow fields, and geometric processes fit this workflow. A text-heavy poster is a different kind of job.

Install and invoke

Send these two commands in the Claude Code chat input, one at a time. They are plugin commands, not shell commands for your operating system. The second installs the official collection containing algorithmic-art.

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

In your project conversation, ask Claude to “use algorithmic-art” and supply the task or files. The prompt below is an editable starting example. Installing the collection supplies instructions and resources; it does not supply your source material or guarantee that every runtime dependency is installed locally. If the skill is missing, check that its plugin is installed, enabled, and loaded in the current session. Do that before troubleshooting the requested output.

Start with a small, controllable system

Try this example, changing the concept and output name:

Prompt
Use algorithmic-art to create abstract art about air moving through a city after rain.
Describe the visual rules, then create city-flow.html for a browser.
Start with seed 42. Let me change particle count, field scale, and line opacity.
Keep seed navigation, reset, and PNG download controls. Avoid long explanatory text.

Decide what each control should reveal. Particle count changes density; field scale changes the size of the turns; opacity changes how trails accumulate. Three meaningful controls are easier to explore than a dozen similar sliders. The skill first develops an artistic philosophy, then expresses it as an algorithm. Use that early stage to clarify that the work should suggest moving air rather than draw literal buildings.

Ask the agent to start from the bundled templates/viewer.html. Its fixed interface remains in place while the algorithm, parameter definitions, and relevant controls change. Both randomness and noise need a seed. Otherwise, returning to the same number may not reproduce the composition. The main deliverable is a single HTML viewer with the algorithm embedded, alongside the written philosophy.

Check the viewer before choosing a favorite

Open it, note seed 42 and the default settings, and change one slider. Verify that its effect matches its label. Browse other seeds, then return to 42 and reset the parameters. This separates a change of composition from a change in the underlying rules. Test the PNG download and check that it exports the artwork at a useful size.

Keep the HTML, philosophy, seed, and parameter values together. A screenshot alone loses the recipe needed for a series. If animation slows down, reduce particle count or drawing work before adding more effects. If the canvas stays blank, inspect browser errors and the p5.js CDN request: a single HTML file is not necessarily an offline file. The default viewer's branding and the artwork's palette are separate, so changing art colors does not automatically redesign the sidebar.

Turn a promising image into a reproducible choice

For the first review, keep the seed fixed and change one parameter at a time. Then restore the parameters and try another seed. This separates variation in composition from variation in the drawing rules. For a series of covers, ask the agent to record the seed and parameters of each candidate before refining color, whitespace, and export size. Repeatedly asking for “another random one” makes selection hard to reproduce.

The viewer controls are part of the artifact, not decoration. If a slider moves without changing the artwork, check that its value reaches the drawing function. If Reset fails to restore the original, inspect how both random and noise generators receive the seed. Share the HTML together with a recommended parameter set so another person can recreate the selected result.

When the picture still feels wrong

Describe visible changes: let the main flow enter from the upper left, reserve a quiet center for a title, and fade lines near the edges. “Make it more premium” does not tell the agent whether to change the seed, controls, or drawing rule. Settle the rule before selecting seeds; tuning an algorithm solely for one lucky frame may damage other variations. For print, specify dimensions and background color and inspect the exported PNG. A moving browser preview is not itself a print-ready file.

Reusing the artwork in a deck

One published production run defined an invariant in PHILOSOPHY.md, then used a seeded p5.js engine for an interactive viewer, decks, and explainers. A full-bleed field initially competed with headlines, so the creator reserved the left side for text and the right for the generative field. Print output required freezing the moving canvas into frames. The useful pattern is to settle reproducible rules first, then test typography, motion, and export. The skill provides an art viewer; deck structure, narrative order, and print handling are additional work.

How did your first task go?

These choices help us understand where readers get stuck through site analytics. Blocking analytics may prevent delivery; use email for a specific issue.

References

  1. algorithmic-art — SKILL.mdAnthropic
  2. anthropics/skills READMEAnthropic
  3. Anthropic Agent Skills marketplaceAnthropic
  4. tracks/algorithmic-art/NOTES.mdmedici-finance / Ian
Found outdated or incorrect information? Let us know