83.3K+Download
Zur Nutzungsanleitung springen
algorithmic-artvon Anthropic

Algorithmic Art Skill.

Ein Skill für Claude Code und Codex für Bildarbeit: generative Kunst mit p5.js – Seeds, Partikel, Flussfelder und anpassbare Parameter.

  • Images & Generative Art
  • Generative Kunst
OpenDesign herunterladenAnleitung ansehen
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
Kopfdaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 19.735 Zeichen insgesamt

01 Was es tut

Was der algorithmic-art Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill erzeugt mit p5.js originale algorithmische Kunst in einem zweistufigen Verfahren: Zuerst wird eine algorithmische Philosophie definiert (eine computergestützte ästhetische Strömung, formuliert in einem Markdown-Manifest), anschließend wird sie als eigenständiges interaktives HTML-Artefakt umgesetzt. Jedes Werk nutzt Seed-basierte Zufälligkeit für Reproduzierbarkeit, sodass Sie über Seed-Steuerelemente durch die Variationen navigieren können.

Der Skill legt den Schwerpunkt auf emergentes Verhalten, mathematische Schönheit und parametrische Variation – er erzeugt lebendige Algorithmen statt statischer Bilder. Die Ausgabe umfasst ein Philosophie-Dokument mit 4–6 Absätzen sowie eine einzelne HTML-Datei mit eingebettetem p5.js-Code, Parameter-Reglern und einer Anthropic-Branded UI, die sofort im Browser oder in claude.ai-Artefakten lauffähig ist.

Was er erzeugt

  • Algorithmische Philosophie als Markdown-Datei, die die Bewegung benennt und in 4–6 Absätzen darlegt, wie sie sich durch computergestützte Prozesse manifestiert
  • Einzelnes, in sich geschlossenes HTML-Artefakt mit eingebettetem p5.js-Algorithmus, Parametersteuerung, Seed-Navigation und Anthropic-gebrandetem UI, das sofort im Browser oder auf claude.ai funktioniert
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Algorithmische Philosophie erstellen

    Verfassen Sie ein Manifest von 4–6 Absätzen, das eine generative Kunstbewegung benennt und beschreibt, wie sie sich durch computationale Prozesse, Noise-Funktionen, Partikelverhalten und emergente Komplexität manifestiert.

  2. 02
    Konzeptionellen Ausgangspunkt ableiten

    Identifizieren Sie vor dem Coding einen subtilen konzeptuellen Faden aus der ursprünglichen Anfrage, um ihn als unsichtbare DNA in den Algorithmus einzubetten – eine raffinierte Referenz, die Kenner intuitiv spüren, während andere schlicht generative Schönheit erleben.

  3. 03
    Aus Viewer-Vorlage erstellen

    Lesen Sie templates/viewer.html und verwenden Sie es als konkreten Ausgangspunkt.

  4. 04
    Geseedeten Algorithmus implementieren

    Bringen Sie die Philosophie mithilfe von p5.js-Code mit seed-basierter Zufälligkeit (randomSeed und noiseSeed) zum Ausdruck, sodass derselbe Seed stets identische Ausgaben erzeugt.

  5. 05
    Designbare Parameter

    Leiten Sie Parameter aus der algorithmischen Philosophie ab, indem Sie fragen, welche Eigenschaften des Systems sich anpassen lassen – Mengen, Maßstäbe, Wahrscheinlichkeiten, Verhältnisse, Winkel oder Schwellenwerte –, statt in Mustertypen zu denken.

  6. 06
    Einzelnes Artefakt ausgeben

    Erstellen Sie eine eigenständige HTML-Datei mit p5.js von einem CDN, dem Algorithmus, Parameterreglern und Anthropic-Branding-UI, alles inline.

02 Finden Sie Ihren Favoriten

Wann Sie den algorithmic-art Skill verwenden

Verwenden Sie den algorithmic-art Skill in Claude Code oder Codex, wenn die Aufgabe Image Work dieser Art ist. Passung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Nutzer, die generative Kunst, algorithmische Kunst, Flow Fields oder Partikelsysteme anfordern, die per Code erstellt werden
  • Erstellen lebender Algorithmen, die bei jedem Durchlauf durch emergentes Verhalten und kontrolliertes Chaos einzigartige Ergebnisse erzeugen
  • Erkundung parametrischer Variationen über interaktive Steuerelemente und Seed-Navigation, um verschiedene Facetten des Potenzials eines Algorithmus zu entdecken

Grenzen kennen

  • Kopieren der Arbeiten bestehender Künstler, was gegen das Urheberrecht verstoßen würde
  • Statische Bilder oder Vorlagen anstelle von Berechnungsprozessen mit emergentem Verhalten erstellen
  • Kunstwerke, die sich nicht durch Seed-basierte Zufälligkeit, Noise-Felder, Partikel, Strömungen oder mathematische Beziehungen ausdrücken lassen

Was Sie bereitstellen sollten

  • Nutzeranfrage oder AnweisungenSubtiler Input, den der Skill als Grundlage nutzt, ohne die kreative Freiheit einzuschränken.

03 Innerhalb des Skills

Regeln, die der algorithmic-art-Skill Claude Code und Codex vorgibt

5 konkrete Anweisungen, Standardwerte und Grenzen, die SKILL.md für den Agenten festlegt — der Teil der Datei, der das Ergebnis verändert.

  1. Philosophie bestimmt die Umsetzung

    Die algorithmische Philosophie bestimmt, was gebaut wird.

  2. Mit der viewer.html-Vorlage starten

    Bevor Sie HTML schreiben, lesen Sie templates/viewer.html mit dem Read-Tool und verwenden Sie diese Datei als wörtlichen Ausgangspunkt.

  3. Wiederholt handwerkliche Meisterschaft betonen

    Die Philosophie muss mehrfach betonen, dass der endgültige Algorithmus sorgfältig ausgearbeitet wirken soll – verfeinert durch unzählige Iterationen, das Ergebnis tiefer rechnerischer Expertise einer Person an der absoluten Spitze ihres Fachgebiets.

  4. Konzeptuellen roten Faden subtil einbetten

    Die konzeptionelle Referenz aus der ursprünglichen Anfrage muss so verfeinert sein, dass sie die Tiefe erhöht, ohne sich selbst anzukündigen – wie ein Jazzmusiker, der durch algorithmische Harmonie einen anderen Song zitiert.

  5. Philosophien mit vier bis sechs Absätzen

    Die algorithmische Philosophie muss 4–6 ausführliche Absätze umfassen und darlegen, wie sich die Bewegung durch computationale Prozesse, Rauschfunktionen, Partikelverhalten, zeitliche Entwicklung und parametrische Variation manifestiert.

04 In Betrieb nehmen

Installiere algorithmic-art in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie algorithmic-art zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

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

Generische skills-CLI-Form für skills/algorithmic-art/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

Gib dem Skill eine erste Bildarbeitsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr 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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Überprüfen Sie, ob derselbe Seed jedes Mal dieselbe Ausgabe erzeugt, indem Sie die Seed-Navigation (Zurück-/Weiter-Schaltflächen) testen und die visuelle Reproduzierbarkeit bestätigen
  • Bestätigen Sie, dass das HTML-Artefakt sofort in claude.ai oder jedem beliebigen Browser funktioniert, ohne externe Dateien, Einrichtung oder einen Server zu benötigen
  • Prüfen Sie, ob alle Parameter-Schieberegler das Artwork in Echtzeit aktualisieren und die Schaltfläche „Zurücksetzen“ die Standardwerte wiederherstellt
  • Stellen Sie sicher, dass das Artefakt genau die Layoutstruktur, das Anthropic-Branding (Poppins/Lora-Schriftarten, helle Farben, Gradient-Hintergrund) und die Sidebar-Organisation aus templates/viewer.html verwendet
  • Testen Sie, ob die Seed-Steuerelemente korrekt funktionieren: Anzeige des aktuellen Seeds, Zurück-/Weiter-Schaltflächen zum Durchlaufen der Seeds, Zufalls-Schaltfläche zum Erzeugen eines neuen Seeds und Eingabefeld „Zu Seed springen“ zum Navigieren zu bestimmten Seeds
  • Überprüfen Sie, ob der Algorithmus die Philosophie ausdrückt, statt ein generisches Muster zu kopieren, mit einer Verarbeitung, die akribisch verfeinert wirkt

In OpenDesign ist algorithmic-art gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill-Datei
skills/algorithmic-art/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 34040c9
License
Apache-2.0 Aus skills/algorithmic-art/LICENSE.txt; SKILL.md sagt „Vollständige Bedingungen in LICENSE.txt".
Repository-Sterne
176.183 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository anthropics/skills, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für algorithmic-art.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. ALGORITHMISCHE PHILOSOPHIE-ERSTELLUNGAnleitung zum Verfassen eines 4-6-paragraphigen Manifests, das eine computationale Ästhetik-Bewegung mit emergentem Verhalten definiert
  2. DAS WESENTLICHE VERSTÄNDNISErklärt, dass der Skill Nutzereingaben als Grundlage erhält, daraus eine Philosophie entwickelt und diese anschließend algorithmisch im Code umsetzt
  3. WIE MAN EINE ALGORITHMISCHE PHILOSOPHIE ERZEUGTSchritte, um die Bewegung zu benennen und herauszuarbeiten, wie sie sich in computergestützten Prozessen manifestiert – mit Betonung auf Handwerklichkeit
  4. PHILOSOPHIE-BEISPIELEFünf komprimierte Beispiele, die Bewegungsnamen zeigen und wie sie sich algorithmisch ausdrücken: Organic Turbulence, Quantum Harmonics, Recursive Whispers, Field Dynamics, Stochastic Crystallization
  5. GRUNDLEGENDE PRINZIPIENKerngrundsätze: Prozess vor Produkt, parametrischer Ausdruck, künstlerische Freiheit, reine generative Kunst, meisterhafte Handwerkskunst
  6. DEN KONZEPTUELLEN KERN ABLEITENWie Sie einen feinen konzeptuellen Faden aus dem Auftrag erkennen, um ihn unsichtbar in den Algorithmus einzubetten
  7. P5.JS-IMPLEMENTIERUNGTechnische Anweisungen, um die Philosophie mit Seed-basierter Zufälligkeit und Parametern in p5.js-Code auszudrücken
  8. SCHRITT 0: LESEN SIE ZUERST DIE VORLAGEObligatorischer Schritt, templates/viewer.html zu lesen und als wörtlichen Ausgangspunkt zu verwenden, bevor Sie HTML schreiben
  9. TECHNISCHE ANFORDERUNGENMuster für geseedeten Zufall, Leitlinien für die Parameterstruktur und wie Sie die Philosophie die Algorithmuswahl bestimmen lassen
  10. ANFORDERUNGEN AN DIE HANDWERKSKUNSTStandards für Balance, Farbharmonie, Komposition, Performance und Reproduzierbarkeit im finalen Algorithmus
  11. AUSGABEFORMATLegt fest, dass die Philosophie als Markdown und als einzelnes, in sich geschlossenes HTML-Artefakt auf Basis der Vorlage ausgegeben wird
  12. INTERAKTIVE PRODUKT­ERSTELLUNGDetaillierte Anweisungen dazu, was in der Vorlage fest und was variabel ist, und wie Sie die Seitenleiste erstellen
Die eigene Beschreibung des Skills
„Erstellung algorithmischer Kunst mit p5.js mit gesäter Zufälligkeit und interaktiver Parametererkundung. Verwende dies, wenn Benutzer darum bitten, Kunst mit Code zu erstellen, generative Kunst, algorithmische Kunst, Flussfelder oder Partikelsysteme. Erstelle originale algorithmische Kunst, anstatt die Arbeit bestehender Künstler zu kopieren, um Urheberrechtsverletzungen zu vermeiden."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 19.735 Zeichen. Lies die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum algorithmic-art Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was gibt der Skill aus?

Der Skill erzeugt zwei Dateien: ein Markdown-Dokument mit der 4–6 Absätze umfassenden algorithmischen Philosophie sowie ein einzelnes, in sich geschlossenes HTML-Artefakt mit eingebettetem p5.js-Code, Parametersteuerungen und einer Anthropic-gebrandeten UI. Das HTML funktioniert sofort in claude.ai oder jedem beliebigen Browser, ohne externe Abhängigkeiten.

Algorithmische Kunst

algorithmic-art auf eine echte Bildarbeitsaufgabe anwenden.

Der algorithmic-art Skill ist in OpenDesign integriert. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills aus, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/anthropics/skills --skill algorithmic-art