83.3K+ダウンロード
使い方ガイドへスキップ
algorithmic-art作者 Anthropic

Algorithmic Art スキル。

Claude Code と Codex の画像作業用スキル：p5.js を使用した生成アート（シード付きパーティクル、フローフィールド、調整可能なパラメータ）を作成します。

  • 画像と生成アート
  • 生成アート
OpenDesign をダウンロード使い方ガイドを見る
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
2026-09-14 に上流ファイルから読み取られた前付けとセクション見出し · 全 19,735 文字

01 できること

Claude Code と Codex で algorithmic-art スキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、p5.js を使った 2 段階のプロセスでオリジナルのアルゴリズムアートを制作します。まずアルゴリズム的哲学（Markdown のマニフェストとして表現される計算論的な美学運動）を定義し、次にそれを自己完結型のインタラクティブな HTML 成果物として実装します。すべての作品は再現性のためにシード付き乱数を使用し、ユーザーはシードコントロールでバリエーションをたどることができます。

このスキルは創発的挙動、数学的な美しさ、パラメトリックな変化を重視し、静的な画像ではなく生きたアルゴリズムを構築します。出力には 4〜6 段落の哲学ドキュメントと、p5.js コード・パラメータスライダー・Anthropic ブランドの UI を埋め込んだ単一の HTML ファイルが含まれ、ブラウザや claude.ai の成果物としてすぐに実行できます。

生成されるもの

  • 運動に名前を付け、それが計算プロセスを通じてどのように現れるかを 4〜6 段落で明示する Markdown ファイルとしてのアルゴリズム的哲学
  • p5.js アルゴリズム、パラメータコントロール、シードナビゲーション、Anthropic ブランドの UI を埋め込んだ単一の自己完結型 HTML 成果物で、ブラウザや claude.ai ですぐに動作します。
プロンプト例を見る ↗

仕組み

  1. 01
    アルゴリズム的哲学を作成する

    生成芸術運動に名前を付け、それが計算プロセス、ノイズ関数、粒子の挙動、創発的な複雑さを通じてどのように現れるかを記述する 4〜6 段落のマニフェストを書きます。

  2. 02
    概念的なシードを導き出す

    コーディングの前に、元のリクエストから微妙な概念的糸口を見つけ出し、アルゴリズムに不可視の DNA として埋め込みます。慣れた人には直感的に感じ取られる洗練された参照であり、それ以外の人には純粋な生成美として体験されます。

  3. 03
    ビューアテンプレートから構築する

    templates/viewer.html を読み込み、そのままの出発点として使用します。

  4. 04
    シード付きアルゴリズムを実装する

    シード付き乱数（randomSeed と noiseSeed）を使い、同じシードが常に同一の出力を生むように、p5.js コードで哲学を表現します。

  5. 05
    調整可能なパラメータを設計する

    パターンの種類で考えるのではなく、システムのどの性質を調整できるかを問いかけることで、アルゴリズム的哲学から生まれるパラメータを作成します。数量、スケール、確率、比率、角度、しきい値などです。

  6. 06
    単一の成果物を出力する

    CDN の p5.js、アルゴリズム、パラメータコントロール、Anthropic ブランドの UI をインラインで含む自己完結型 HTML ファイルを生成します。

02 適合性を確認

algorithmic-art Skill を使用するタイミング

この種の画像作業の場合、Claude Code または Codex で algorithmic-art スキルを使用します。以下の適合性と制限は、スキル自身のファイルから取得されています。

適している場合

  • コードによる生成芸術、アルゴリズムアート、フローフィールド、パーティクルシステムを求めるユーザー
  • 創発的挙動と制御されたカオスによって、実行ごとに固有の出力を生む生きたアルゴリズムを作成する
  • インタラクティブなコントロールとシードナビゲーションを通じてパラメトリックな変化を探り、アルゴリズムの可能性のさまざまな側面を発見する

境界を知る

  • 既存アーティストの作品をコピーすること。著作権侵害になります
  • 創発的な振る舞いを伴う計算プロセスではなく、静的な画像やテンプレートを作成すること
  • シード付きランダム性、ノイズフィールド、パーティクル、フロー、数理的関係では表現できない作品

提供すべきもの

  • ユーザーのリクエストまたは指示創造的な自由度を縛ることなく、スキルが土台として用いる控えめな入力。

03 スキルの内部

algorithmic-art スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 5 つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を左右する部分です。

  1. 哲学が実装を導く

    アルゴリズム的哲学が、何を構築するかを決定します。

  2. viewer.html テンプレートから始める

    HTML を書く前に、Read ツールで templates/viewer.html を読み、そのファイルを文字どおりの出発点としてください。

  3. 熟練した職人技を繰り返し強調する

    哲学では、最終的なアルゴリズムが細部まで作り込まれ、無数の反復を経て洗練され、その分野の頂点に立つ人物による深い計算的専門知識の産物であるように見えるべきだという点を、何度も強調する必要があります。

  4. 概念的糸をさりげなく織り込む

    元のリクエストにある概念的参照は、自らを宣言することなく深みを高めるほどに洗練されている必要があります — ジャズミュージシャンがアルゴリズム的なハーモニーを通じて別の曲を引用するように。

  5. 4 ～ 6 段落の哲学

    アルゴリズム的哲学は 4 ～ 6 の充実した段落で構成し、その運動が計算プロセス、ノイズ関数、パーティクルの挙動、時間的進化、パラメトリックな変化を通じてどのように現れるかを説き明かす必要があります。

04 実際に使う

Claude Code または Codex に algorithmic-art をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに algorithmic-art を追加してください

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

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

skills/algorithmic-art/SKILL.md 向けの汎用的な skills CLI 形式です。リポジトリが独自のパスを記載している場合もあります。

スキルに最初の画像制作タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

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.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • シードのナビゲーション（前へ/次へボタン）をテストし、視覚的な再現性を確認することで、同じシードが毎回同一の出力を生成することを検証します
  • 外部ファイル、セットアップ、サーバーを必要とせず、HTML 成果物が claude.ai または任意のブラウザーで即座に動作することを確認します
  • すべてのパラメータースライダーが作品をリアルタイムで更新し、リセットボタンがデフォルト値に戻すことを確認します
  • 成果物が templates/viewer.html とまったく同じレイアウト構造、Anthropic のブランディング（Poppins/Lora フォント、明るい配色、グラデーション背景）、サイドバーの構成を使用していることを確認します
  • シードコントロールが正しく機能することをテストします。現在のシードの表示、前へ/次へボタンによるシードの切り替え、ランダムボタンによる新しいシードの生成、シードジャンプ入力による特定のシードへの移動を確認します
  • アルゴリズムが汎用的なパターンを模倣するのではなく哲学を表現しており、その職人技が細部まで洗練されて感じられることを検証します

OpenDesign では algorithmic-art は同梱されています。Plugins → Skills からトップバーで選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Anthropic
Repository
github.com/anthropics/skills ブランチ main
スキルファイル
skills/algorithmic-art/SKILL.md 検証時にコンテンツチェックサムを記録。コミット 34040c9
License
Apache-2.0 skills/algorithmic-art/LICENSE.txt より。SKILL.md には「完全な条項は LICENSE.txt に記載」とあります。
リポジトリスター数
176,183 2026-09-14 に anthropics/skills リポジトリ全体の GitHub スナップショットを取得。このリポジトリには、このカタログの 7 つのスキルが含まれています。algorithmic-art の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱（2026-08-28 確認）。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. アルゴリズム的哲学の作成創発的な振る舞いを伴う計算的美学運動を定義する、4 ～ 6 段落のマニフェストを書くための指示
  2. 重要な前提このスキルはユーザー入力を土台として受け取り、哲学を生み出し、それをコードによるアルゴリズムとして表現することを明確にします
  3. アルゴリズム的哲学の生成方法ムーブメントに名前を付け、それが計算プロセスを通じてどう現れるかを、職人技を重視しながら言語化する手順です
  4. 哲学の例ムーブメント名とそのアルゴリズム的な現れ方を示す5つの簡潔な例：Organic Turbulence、Quantum Harmonics、Recursive Whispers、Field Dynamics、Stochastic Crystallization
  5. 基本原理核となる原則：成果物よりプロセス、パラメトリックな表現、芸術的自由、純粋なジェネラティブアート、熟練した職人技
  6. 概念的シードの導出リクエストから微妙な概念的糸口を見つけ、アルゴリズムに目立たない形で埋め込む方法です
  7. P5.JS による実装シード付き乱数とパラメータを用い、p5.js のコードで哲学を表現するための技術的な指示です
  8. ステップ0：まずテンプレートを読むHTML を書く前に templates/viewer.html を読み、そのままの出発点として使うことが必須のステップです
  9. 技術要件シード付き乱数のパターン、パラメータ構造のガイドライン、哲学にアルゴリズムの選択を委ねる方法です
  10. 職人技の要件最終的なアルゴリズムにおけるバランス、配色の調和、構図、パフォーマンス、再現性の基準です
  11. 出力形式哲学を Markdown として出力し、テンプレートから構築した単一の自己完結型 HTML 成果物を出力することを指定します
  12. インタラクティブな成果物の作成テンプレートで固定される部分と可変の部分、およびサイドバーの構築方法に関する詳細な指示です
スキル自身による説明
「シード付きランダムネスとインタラクティブなパラメータ探索を使って p5.js でアルゴリズミックアートを作成します。ユーザーがコードを使ったアート制作、ジェネラティブアート、アルゴリズミックアート、フローフィールド、またはパーティクルシステムをリクエストした際に使用してください。著作権侵害を避けるため、既存のアーティストの作品をコピーするのではなく、オリジナルのアルゴリズミックアートを作成します。」

SKILL.md のフロントマター説明です。完全なファイルは約 19,735 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

algorithmic-art スキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルは何を出力しますか？

このスキルは2つのファイルを出力します。4〜6段落のアルゴリズム的哲学を記述した Markdown 文書と、p5.js のコード、パラメータコントロール、Anthropic ブランドの UI を埋め込んだ単一の自己完結型 HTML 成果物です。この HTML は外部依存なしで、claude.ai や任意のブラウザーですぐに動作します。

アルゴリズミックアート

実際の画像作業タスクで algorithmic-art を実行します。

algorithmic-art スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/anthropics/skills --skill algorithmic-art