algorithmic-art スキル
スキル Claude Code デザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
algorithmic-artスキルは、p5.jsを使って生成アート(ジェネラティブアート)を作るための手順を定めたものです。SKILL.mdによると、まず「アルゴリズム的哲学」を記した.mdファイルを作成し、その後この哲学をp5.jsのコード(.html+.js)として表現する、という2段階のプロセスを取ります。randomSeed/noiseSeedによるシード付きランダム性を用いるため、同じシードからは常に同じ出力が再現される仕組みです。出力はtemplates/viewer.htmlを起点とする単一のHTMLアーティファクトで、ヘッダーやサイドバー、シード操作、アクションボタンなどのAnthropicブランディングは固定し、パラメータやアルゴリズム自体は作品ごとに変わります。またSKILL.mdは、著作権侵害を避けるため既存アーティストの作品を模倣せず独自の作品を作るよう求めています。
概要
これは単体のSaaS製品ではなく、Anthropicが公開しているスキルです。templates/viewer.htmlとtemplates/generator_template.jsという2つのテンプレートを土台に、p5.jsによる自己完結型の生成アートHTMLアーティファクトを作るための手順とルールをまとめたものです。
algorithmic-art でできること
- SKILL.mdの指示に従い、4〜6段落の「アルゴリズム的哲学」(生成美学のコンセプト文書)を作成する
- randomSeed/noiseSeedによるシード付きランダム性を用い、同じシードで同じ出力を再現するp5.jsスケッチを実装する
- templates/viewer.htmlを起点として、ヘッダー・サイドバー・シード操作・アクションボタンなどAnthropicブランディングのUI構造を保った単一HTMLアーティファクトを作成する
- 作品ごとに固有のパラメータ(スライダーやカラーピッカーなど)を設計し、サイドバーのParametersセクションに追加する
- Previous/Next/Random/Jumpのシード操作で複数のバリエーションを探索する(要求に応じてシード1〜100などの複数生成も含む)
- Regenerate・Reset・Download PNGの各アクションボタンを利用する
出典
原文の説明（英語）
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.