Skip to content
Apiara

Search design skills

Start here
Design & build a websitefrontend-design · Website codeRefine an existing interfaceimpeccable · UI review & refinementsReview web interface guidelinesweb-design-guidelines · Findings with file referencesCreate posters & static artworkcanvas-design · PNG / PDFDesign a presentationpptx · Editable PPTXChoose colors & typographytheme-factory · A theme applied to your workExplore generative artalgorithmic-art · Interactive p5.js artworkCreate video & motionremotion-best-practices · Remotion project & rendered videoImplement a Figma designfigma · UI code in your projectDocument a Stitch design systemdesign-md · DESIGN.mdBuild an interactive web prototypeweb-artifacts-builder · React prototype & bundled HTMLMake a Slack GIF reactionslack-gif-creator · Looping GIF
↑ ↓ Select   ↵ OpenEsc Close
Back to skills

Explore generative art

algorithmic-art · Anthropic

Build original p5.js generative artwork with repeatable seeds and adjustable parameters, such as flow fields and particle patterns.

Output
Interactive p5.js artwork
Needs
HTML/JS file access and a browser
Download skill

ZIP · 22 KB · Apache-2.0

Install folder: .claude/skills/algorithmic-art/

Setup & example
Illustration, not a tested output.

What it does

What to bring
A visual concept, palette, and the parameters you want to explore.
Requirements
An AI tool that can edit HTML and JavaScript, a browser, and access to the p5.js library.
Keep in mind
The output is code-based artwork, not an editable vector design file. Check browser performance and any external library loading.

Try a design task

Once the skill is loaded, copy the task and adapt it to your brief.

Use algorithmic-art to create an original flowing-line pattern inspired by changing wind. Use ink, ivory, and one blue accent. Include controls for seed, density, and curvature. The same seed must reproduce the same pattern. Make the HTML viewer usable on a small screen.
Installation instructions

For Claude's Code / project entry; manage chat and Cowork skills in account settings.

  1. Copy the skill folder, or use the installer

    Extract the ZIP and copy the complete algorithmic-art folder into .claude/skills/ in your project.

    Or run this command in your project terminal with Node.js / npx. It gets the author's latest version, which may differ from the download.

    npx skills add anthropics/skills --skill algorithmic-art --agent claude-code
    Read the installation docs

  2. Confirm the skill is loaded

    Reopen your tool and check that algorithmic-art is available. If it is missing, check the installation location in the upstream docs.

Review the result

  • The viewer loads and its controls affect the artwork.
  • The same seed reproduces the same result.
  • Rendering stays responsive at the intended density.

Did you complete the task?

Next steps

algorithmic-art — Apiara