Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

algorithmic-art · nexu-io — Claude Code skill: what it does, how to install

Creates generative graphics using p5.js with seeded randomness for reproducible renders. Useful for procedural posters and motion-style frame studies.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill algorithmic-art -a claude-code
Open on GitHub

What algorithmic-art does

This skill produces generative artwork using the p5.js library. It relies on seeded randomness. Every seed produces identical frames. Because of that, you will not lose a good procedural layout when re-running the generator script.

OpenDesign exposes this definition so the agent discovers it during planning. The skill originates from Anthropic's official skills repository. To run the complete workflow with all upstream reference assets and scripts, you need to pull the bundle from that original repository.

The agent invokes the skill when you ask for algorithmic art, generative visuals, or procedural frame studies. You will need a runtime or browser preview that can execute p5.js code to inspect the resulting canvas directly.

What it helps with

  • generate procedural posters in p5.js
  • reproduce artistic renders using seeded randomness
  • create motion-style static frame studies
  • render algorithmic graphics inside the agent workflow

Example prompts for the agent

  • Generate a procedural poster using p5.js with seeded randomness via algorithmic-art
  • Create reproducible generative art frames using algorithmic-art
  • Invoke algorithmic-art to prepare a motion-style still study

How to install algorithmic-art

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill algorithmic-art -a claude-code

2Manually: put the files in place

~/.claude/skills/algorithmic-art/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/algorithmic-art/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Other versions of algorithmic-art

algorithmic-art official anthropics Creates p5.js generative art with seeded randomness and adjustable parameters. Use it for flow fields, particle systems, and code-based visual experiments. Claude Code Claude.ai 89,081installs

Similar

event-store-design Seth Hobson This skill guides event store design for event-sourced systems and helps compare storage technologies. Use it when building event persistence infrastructure or choosing a store. Claude Code CX Codex Cursor 10,800installs answer-me-with-html QingYunA This skill turns selected answers into one-page HTML explainers. Use it to show a flow, compare options, or lay out findings from an investigation. Claude Code CX Codex Cursor +1 5,200installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about algorithmic-art

How to install algorithmic-art in Claude Code?

Run npx skills add nexu-io/open-design --skill algorithmic-art -a claude-code.

What does the algorithmic-art skill do?

It helps the agent generate procedural art and frame studies using p5.js. Seeded randomness ensures every generated canvas is completely reproducible.

Why does algorithmic-art use seeded randomness?

Seeded randomness prevents random drift between executions. The same seed produces identical visual output on every re-run.

Source text

SKILL.md · Apache-2.0 
---
name: algorithmic-art
description: |
  Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
triggers:
  - "algorithmic art"
  - "generative art"
  - "p5js"
  - "procedural art"
  - "seeded randomness"
  - "生成艺术"
od:
  mode: image
  category: image-generation
  upstream: "https://github.com/anthropics/skills/tree/main/skills/algorithmic-art"
---

# algorithmic-art

> Curated from Anthropic's official skills repository.

## What it does

Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.

## Source

- Upstream: https://github.com/anthropics/skills/tree/main/skills/algorithmic-art
- Category: `image-generation`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/anthropics/skills/tree/main/skills/algorithmic-art
```

Then ask the agent to invoke this skill by name (`algorithmic-art`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor