mcpField
C
canvas-design

canvas-design

github.com/snykクリエイティブ・メディア3.2k82 回インストール2 日前に更新
リポジトリ

canvas-design について

canvas-design は、デザイン哲学をキャンバス作品に展開するスキルです。Markdown で哲学を作成してから、単ページの PDF または PNG に表現する手順を案内し、要望に応じて複数ページにも対応します。

主な機能

  1. 01哲学作成とキャンバス制作の二段階ワークフロー
  2. 02ビジュアル表現を重視した哲学の指針
  3. 03さりげない概念的モチーフの構築
  4. 04単ページの PDF または PNG 出力
  5. 05要望に応じた複数ページ制作

活用シーン

  1. 01ビジュアルムーブメントの宣言文制作
  2. 02潜在的なテーマの抽象作品化
  3. 03完成度の高い単ページ作品の制作

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/snyk/agent-scan --skill canvas-design

インストール後、Claude Code で/canvas-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
canvas-fonts/
ArsenalSC-OFL.txt
BigShoulders-OFL.txt
Boldonse-OFL.txt
BricolageGrotesque-OFL.txt
CrimsonPro-OFL.txt
DMMono-OFL.txt
EricaOne-OFL.txt
GeistMono-OFL.txt
Gloock-OFL.txt
IBMPlexMono-OFL.txt
InstrumentSans-OFL.txt
Italiana-OFL.txt
JetBrainsMono-OFL.txt
Jura-OFL.txt
LibreBaskerville-OFL.txt
Lora-OFL.txt
NationalPark-OFL.txt
NothingYouCouldDo-OFL.txt
Outfit-OFL.txt
PixelifySans-OFL.txt
PoiretOne-OFL.txt
RedHatMono-OFL.txt
Silkscreen-OFL.txt
SmoochSans-OFL.txt
Tektur-OFL.txt
WorkSans-OFL.txt
YoungSerif-OFL.txt

詳細

これらは、視覚的に表現される美的ムーブメントである、デザイン哲学を創作するための指示です。.mdファイル、.pdfファイル、.pngファイルのみを出力してください。

次の2つのステップで完成させてください。

  1. デザイン哲学の創作(.mdファイル)
  2. キャンバス上に作品を制作して表現(.pdfファイルまたは.pngファイル)

まず、次のタスクに取り組んでください。

デザイン哲学の創作

まず、次の要素を通じて解釈される、レイアウトやテンプレートではなく、ビジュアル哲学を創作してください。

  • 形、空間、色、構成
  • 画像、グラフィック、図形、パターン
  • 視覚的なアクセントとしての最小限のテキスト
重要な理解事項
  • 受け取るもの:考慮すべきユーザーからのささやかな入力や指示です。ただし、それは基盤として活用し、創造の自由を制限してはなりません。
  • 創作するもの:デザイン哲学/美的ムーブメントです。
  • 次に起こること:同じバージョンがその哲学を受け取り、視覚的に表現して、視覚デザインが90%、不可欠なテキストが10%の作品を生み出します。

次のようなアプローチを検討してください。

  • 芸術運動のマニフェストを書く
  • 次の段階で作品を制作する

哲学では、視覚的表現、空間によるコミュニケーション、芸術的な解釈、最小限の言葉を重視してください。

ビジュアル哲学の作成方法

ムーブメントに名前を付ける(1~2語):「ブルータリストの喜び」「色彩の静寂」「メタボリストの夢」

哲学を言語化する(4~6段落。簡潔でありながら、内容を十分に伝えること):

哲学の視覚的な本質を捉えるため、次の要素を通してどのように表現されるかを示してください。

  • 空間と形
  • 色と素材
  • スケールとリズム
  • 構成とバランス
  • 視覚的階層

重要なガイドライン:

  • 冗長さを避ける:デザインの各要素には一度だけ触れてください。新たな深みを加える場合を除き、色彩理論、空間的な関係、タイポグラフィの原則について繰り返し述べるのは避けてください。
  • 職人技を繰り返し強調する:最終作品が、数え切れないほどの時間をかけて、細心の注意を払って作られ、その分野の頂点に立つ人の手によるものに見えるべきだと、哲学の中で必ず複数回強調してください。この表現は不可欠です。「緻密に作り込まれた」「深い専門性の結晶」「丹念な注意を注ぎ込んだ」「熟練の技による実行」といったフレーズを繰り返してください。
  • 創造の余地を残す:美的な方向性は具体的に示しつつ、次のClaudeが非常に高い水準の職人技で解釈を加えられる余地を残せるよう、簡潔にまとめてください。

この哲学は、次のバージョンがテキストではなく、視覚的にアイデアを表現するための指針となる必要があります。情報は段落ではなく、デザインの中に宿ります。

哲学の例

「コンクリート・ポエトリー」 哲学:壮大なフォルムと大胆な幾何学を通じたコミュニケーション。 視覚表現:大きな色面、彫刻的なタイポグラフィ(特大の単語ひとつと極小のラベル)、ブルータリズム的な空間の分割。ポーランドのポスターの力強さとル・コルビュジエの融合です。説明ではなく、視覚的な重みと空間の緊張感を通じてアイデアを表現します。テキストは希少で力強いジェスチャーとして扱い、段落は決して使わず、視覚的な構造に溶け込む不可欠な言葉だけを用います。すべての要素を、熟練の職人の精度で配置します。

「色彩の言語」 哲学:色を主要な情報システムとして捉えます。 視覚表現:色の領域が意味を生み出す、幾何学的な精密さ。タイポグラフィは最小限に抑え、色彩の場が語るよう、小さなサンセリフ体のラベルを添えます。ヨーゼフ・アルバースの色彩相互作用とデータビジュアライゼーションの融合を思い描いてください。情報は空間と色彩によって符号化されます。言葉は、色がすでに示していることを補強するためだけに用います。丹念な色彩調整の成果です。

「アナログな瞑想」 哲学:質感と余白を通じた、静かな視覚的省察。 視覚表現:紙の粒子、インクのにじみ、広大なネガティブスペース。写真とイラストが主役です。タイポグラフィはささやくように控えめで、ビジュアルを引き立てます。日本のフォトブックの美学。ページ全体に画像が呼吸するように広がります。テキストは控えめに現れ、短いフレーズのみを用い、説明的なまとまりは決して作りません。瞑想の実践のように、ひとつひとつの構図を丁寧に調和させます。

「有機的なシステム」 哲学:自然な集積とモジュール状の成長パターン。 視覚表現:丸みのある形、有機的な配置、建築を通して表現される自然の色彩。情報は視覚的な図、空間的な関係、アイコンを通じて示されます。テキストは、空間に浮かぶ重要なラベルに限ります。熟練した空間構成によって、構図そのものが物語を伝えます。

「幾何学的な静けさ」 哲学:純粋な秩序と抑制。 視覚表現:グリッドに基づく精密さ、大胆な写真または鮮烈なグラフィック、ドラマチックなネガティブスペース。タイポグラフィは精密でありながら最小限に抑え、小さく不可欠なテキストと広く静かな領域を配します。スイス・フォーマリズムとブルータリズムの素材に対する誠実さが出会います。言葉ではなく、構造が伝えます。すべての配置には、数え切れないほどの推敲が込められています。

これらは要約した例です。実際のデザイン哲学は、内容の充実した4~6段落にしてください。

不可欠な原則
  • 視覚哲学:デザインを通じて表現する美学的な世界観を創り出します
  • テキストを最小限に:テキストは常に簡潔で、不可欠なものに限り、視覚要素として統合することを強調します。長文は決して使いません
  • 空間による表現:アイデアは段落ではなく、空間、形、色、構図を通じて伝えます
  • 芸術的自由:次の Claude が哲学を視覚的に解釈できるよう、創造の余地を設けます
  • 純粋なデザイン:これは装飾を施した文書ではなく、芸術作品を制作することです
  • 熟練の職人技:最終作品は、細部まで丹念に作り込まれ、手間をかけて丁寧に仕上げられ、その分野の第一人者が数え切れないほどの時間を費やして生み出したものに見える必要があると、繰り返し強調します

デザイン哲学は4~6段落にしてください。 中心となるビジョンをまとめた、詩的なデザイン哲学を盛り込んでください。同じ要点を繰り返さないようにします。作品の意図には触れず、どこでも使えるような汎用的なデザイン哲学にしてください。デザイン哲学は .md ファイルとして出力します。


さりげない引用を見抜く

重要なステップ:キャンバスを作成する前に、元のリクエストに込められた、さりげない概念の糸を見極めてください。

本質的な原則: テーマは、アートそのものに織り込まれたさりげなく、ニッチな引用です。常に文字どおりとは限らず、洗練されています。そのテーマに詳しい人は直感的に気づく一方、そうでない人は見事な抽象表現として作品を楽しめます。デザイン哲学が美的な言語を与え、見抜いたテーマが魂を吹き込みます。それは、形や色、構図に目に見えない形で織り込まれた、静かな概念の DNA です。

非常に重要です:引用は、作品の深みを高めながらも、それ自体を誇示しないように洗練させてください。ジャズミュージシャンが別の曲を引用するように考えてください。気づくのは分かる人だけですが、誰もがその音楽を楽しめます。


キャンバスの制作

哲学と概念的な枠組みが確立したら、それをキャンバスに表現します。少し時間を取って考えをまとめ、心を落ち着けてください。生み出したデザイン哲学と以下の指示を用いて、哲学のあらゆる側面を熟練の技で体現した傑作を制作してください。

重要:どのような種類のコンテンツであっても、たとえユーザーが映画/ゲーム/書籍向けのものを求めていても、洗練されたアプローチを保ってください。これは漫画的でも素人っぽいものでもなく、アートであるという考えを決して見失わないでください。

美術館や雑誌に掲載できる品質の作品を制作するには、デザイン哲学を土台として活用してください。特にページ数を指定されていない限り、視覚表現を重視した、デザイン性の高い1ページのPDFまたはPNGを作成してください。繰り返しのパターンや完璧な形を全般的に取り入れます。抽象的な哲学的デザインを、まるで科学の聖典であるかのように扱いましょう。体系的な観察の視覚言語を取り入れ、密集して積み重なる線や繰り返し要素、幾重にも重なるパターンを、忍耐強く反復することで意味が生まれ、じっくりと眺めるほど報われる作品にしてください。控えめで臨床的なタイポグラフィと体系的な参照記号を添え、架空の学問分野の図版を思わせるようにします。目に見えない対象を、観察可能な現象の記録に通常払われるのと同じ敬意をもって扱ってください。限られた色彩を意図的かつ調和のとれた印象で用い、ささやかなフレーズや細部を目立ちすぎない位置に配置して作品の軸とします。人間の経験に関する考えを分析的な視覚言語で表現するという逆説を受け入れましょう。その結果として、注意深く観察すれば、儚いものも研究し、地図に描き、理解できると証明する遺物のような作品を目指してください。これこそが真のアートです。

文脈要素としてのテキスト:テキストは常に最小限にとどめ、視覚表現を優先します。ただし、ささやくように控えめなラベルにするか、大胆なタイポグラフィ表現にするかは、文脈に合わせて判断してください。パンク会場のポスターなら、ミニマルな陶芸スタジオのアイデンティティよりも大きく、力強い書体がふさわしいでしょう。多くの場合、フォントは細字にします。フォントの使用はすべてデザイン性を重視し、視覚的なコミュニケーションを優先してください。テキストのサイズにかかわらず、ページからはみ出したり、ほかの要素と重なったりしてはなりません。すべての要素を適切な余白とともにキャンバス内に収めてください。テキスト、グラフィック、視覚要素のすべてに、十分な余白と明確な区切りがあることを入念に確認してください。プロフェッショナルな仕上がりのために、これは譲れない条件です。重要:テキストを書く場合は、複数のフォントを使用してください。./canvas-fonts ディレクトリを検索してください。どのような手法を選ぶ場合でも、洗練された仕上がりは譲れません。

この作品を実現するために必要なフォントをダウンロードして使用してください。タイポグラフィ自体をアートの一部にする創造性を発揮しましょう。アートが抽象的なら、デジタルで組版するのではなく、フォントをキャンバス上に持ち込んでください。

限界を押し広げるため、哲学を指針としながら、デザインの本能や直感に従ってください。デザインの自由と選択肢を最大限に活用し、美学とデザインを最前線へと押し進めてください。

最重要:AIが生成したような作品ではなく、人間が手がけた品質を実現するために、数え切れないほどの時間を費やしたように見える作品を制作してください。その分野の頂点に立つ人物が、細部に至るまで丹念にこだわり、心血を注いだかのように見せてください。構図、余白、色の選択、タイポグラフィなど、すべてに熟練の技を感じさせてください。重なりがないこと、書式に不備がないこと、細部まで完璧であることを念入りに確認してください。見る人に専門性を示し、誰もが認める傑作として高く評価される作品を制作してください。

最終成果物として、ダウンロードできる単一の .pdf または .png ファイルを、使用したデザイン哲学を記した .md ファイルとともに出力してください。


最終ステップ

重要:ユーザーはすでに、「まだ完璧ではありません。完璧な仕上がりで、職人技の傑作として、まるで美術館に展示されるかのような作品にしてください」と述べています。

最重要:作品を磨き上げるには、グラフィックを追加するのではなく、すでに作ったものを洗練させ、デザイン哲学とミニマリズムの原則を徹底的に尊重しながら、極めて精緻に仕上げてください。面白いフィルターを追加したりフォントを変更したりするのではなく、既存の構成をアートとしてより一体感のあるものにする方法を考えてください。新しい関数を呼び出したり新しい図形を描いたりしたくなったら、いったん止まり、代わりに「今あるものを、どうすればもっと芸術作品らしくできるだろうか?」と問いかけてください。

もう一度見直してください。コードに戻ってさらに磨き上げ、哲学に基づいてデザインされた傑作に仕上げてください。

複数ページのオプション

依頼があった場合は、デザイン哲学に沿いつつも、それぞれに独自性のある創造的なページを追加してください。それらのページを、同じ .pdf または複数の .png にまとめてください。最初のページは、これから内容を詰めていくコーヒーテーブルブックの一ページにすぎないと考えてください。元の作品を独自にひねり、思い出を添えたようなページを続けてください。センスよく物語を紡ぐようにしてください。創造性を存分に発揮してください。

コメント