mcpField
C
canvas-design

canvas-design

github.com/sickn33クリエイティブ・メディア48.7k728 回インストール今日更新
リポジトリ

canvas-design について

デザイン哲学をビジュアル作品に展開するキャンバス制作ワークフローです。独立したアート作品を制作する人向けで、まず哲学を文書化し、それを1ページのPDFまたはPNGに表現して、Markdownも出力します。

主な機能

  1. 014〜6段落のビジュアル哲学を作成
  2. 02依頼文から潜在的な概念の糸口を抽出
  3. 031ページのビジュアルキャンバスを制作
  4. 04PDFまたはPNGとMarkdownを出力
  5. 05余白、間隔、重なりを確認

活用シーン

  1. 01クリエイティブブリーフからビジュアルの方向性を定める
  2. 021ページのポスターやアート作品を制作
  3. 03抽象的なテーマを構図に落とし込む

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill canvas-design

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

同梱ファイル

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

LICENSE.txt
canvas-fonts/
ArsenalSC-OFL.txt
BigShoulders-OFL.txt
Boldonse-OFL.txt
CrimsonPro-OFL.txt
BricolageGrotesque-OFL.txt
DMMono-OFL.txt
EricaOne-OFL.txt
GeistMono-OFL.txt
IBMPlexMono-OFL.txt
Gloock-OFL.txt
Italiana-OFL.txt
InstrumentSans-OFL.txt
JetBrainsMono-OFL.txt
LibreBaskerville-OFL.txt
Jura-OFL.txt
NothingYouCouldDo-OFL.txt
Outfit-OFL.txt
NationalPark-OFL.txt
Lora-OFL.txt
PoiretOne-OFL.txt
PixelifySans-OFL.txt
SmoochSans-OFL.txt
Tektur-OFL.txt
Silkscreen-OFL.txt
YoungSerif-OFL.txt
WorkSans-OFL.txt
RedHatMono-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 です。

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


CANVAS CREATION

哲学と概念的な枠組みの両方が定まったら、それをキャンバス上に表現します。少し時間を取って考えをまとめ、心を落ち着かせましょう。作り上げたデザイン哲学と以下の指示を活用し、哲学のあらゆる側面を体現する傑作を、熟練の技で仕上げてください。

重要:どのような種類のコンテンツであっても、映画、ゲーム、本のための作品を依頼された場合でも、洗練されたアプローチを貫いてください。これはアートであり、漫画のようなものや素人っぽいものではないという考えを、決して見失わないでください。

美術館や雑誌に掲載できる品質の作品を作るには、デザイン哲学を土台にしてください。特に指定がなければ、視覚表現を重視したデザイン性の高い1ページのPDFまたはPNGを1点作成します。一般に、反復するパターンと完璧な形状を用いてください。抽象的な哲学的デザインを、まるで科学の聖典であるかのように扱いましょう。体系的な観察を思わせる視覚言語を取り入れ、緻密に積み重ねたマーク、反復する要素、重層的なパターンを、忍耐強く繰り返すことで意味を築き、じっくりと眺めるほどに新たな発見があるものにしてください。控えめな臨床的タイポグラフィと体系的な参照記号を添え、架空の学問分野の図表であるかのように見せましょう。目に見えない主題にも、観察可能な現象の記録にふさわしい敬意をもって向き合ってください。意図的で調和のとれた限られたカラーパレットを使い、簡潔なフレーズや細部を控えめに配置して、作品の軸とします。人間の経験についての考えを分析的な視覚言語で表現するという逆説を受け入れましょう。注意深く観察すれば、儚いものも研究し、地図に描き、理解できることを示す成果物のような作品に仕上げてください。これこそがアートです。

文脈を伝える要素としてのテキスト:テキストは常に最小限に抑え、視覚表現を優先します。ただし、文脈に応じて、ひそやかなラベルにするか、力強いタイポグラフィ表現にするかを判断してください。パンク会場のポスターなら、ミニマルな陶芸スタジオのアイデンティティよりも、大きく攻撃的な文字が適しているかもしれません。多くの場合、フォントには細いものを使ってください。フォントはすべて、デザイン性の高さを重視し、視覚的なコミュニケーションを第一に考えて選びます。文字の大きさにかかわらず、ページからはみ出したり、重なったりしてはいけません。すべての要素を適切な余白とともにキャンバス内に収めてください。テキスト、グラフィック、その他の視覚要素に十分な余白があり、互いにはっきりと区別されていることを丁寧に確認してください。プロフェッショナルな仕上がりに、これは必須です。重要:テキストを入れる場合は、複数のフォントを使ってください。./canvas-fontsディレクトリを調べてください。どのような手法を用いる場合も、洗練された仕上がりは必須です。

このスキルのインストール先ディレクトリを基準に解決できる、同梱フォントを優先してください。フォントを再配布する際は、付属または埋め込みのライセンスを確認し、必要な帰属表示を残してください。ライセンス情報が埋め込みメタデータにのみ含まれるファミリーもあります。追加のフォントをダウンロードする場合は、利用権を確認できる正規の提供元からのみ入手してください。美的な選択を満たすためだけに、システム全体へフォントをインストールしたり、出所不明のファイルを取得したりしないでください。タイポグラフィそのものをアートの一部にすることで、創意工夫を発揮しましょう。作品が抽象的であれば、テキストをデジタルで組むだけでなく、フォントをキャンバス上の表現に取り入れてください。

限界を押し広げるために、哲学を指針としながら、デザインの本能や直感に従ってください。究極の自由と選択を受け入れ、美学とデザインを最前線へと押し進めましょう。

最重要:磨き上げられた視覚品質を実現するため、数え切れないほどの時間をかけて作り込んだように見える作品を作ってください。その分野の頂点に立つ人が、すべての細部に細心の注意を払い、丹念に取り組んだかのように仕上げましょう。構図、間隔、色の選択、タイポグラフィなど、あらゆる要素で卓越した技量を示してください。重なりがないこと、フォーマットに不備がないこと、すべての細部が完璧であることを再確認してください。専門性を証明し、誰もが認める素晴らしさで高く評価されるような作品を作ってください。

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

最終ステップ

重要:最初の草案を実際のユーザーの依頼内容と照らし合わせ、確認してブラッシュアップしてください。これまでのユーザーからのフィードバックを捏造したり、人間が作成したかのように装ったり、作業にかかった時間を示唆したりしないでください。

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

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

複数ページのオプション

依頼に応じてページを追加する場合は、デザインの哲学に沿いつつ、はっきりと異なる創造的なページを作成してください。それらのページを同じ .pdf または複数の .png にまとめてください。最初のページは、これから内容が加わっていくコーヒーテーブルブック全体の1ページにすぎないと考えてください。元の作品に独自のひねりや思い出を加えたページを作成してください。上品さを保ちながら、ストーリーを感じさせるものにしてください。創造性を存分に発揮してください。

エクスポートの検証

PDF 描画ライブラリや画像キャンバスなど、現在の環境で利用可能なレンダラーを選んでください。組み込みの生成ツールがあるとは限りません。ページの寸法と単位を明示して、プレビューをレンダリングし、テキストのはみ出し、余白、重なり、コントラスト、グリフの網羅性を確認してから、実際に保存したファイルへのリンクを提示してください。PDF の場合はページ数とフォントの埋め込みを確認し、PNG の場合は用途に必要なピクセル寸法と解像度を確認してください。簡素なテキストのほうが美的に適している場合でも、必須の文言は正確に保持してください。

使用する場面

静的な PDF または PNG が依頼に適している、オリジナルのポスター、ビジュアル作品、デザインマニフェストに使用してください。

制限事項

  • このバンドルにはガイダンスとフォントが含まれていますが、実行可能なデザインやエクスポートのパイプラインは含まれていません。レンダリングと目視確認は、利用可能なツールに左右されます。
  • 美的な判断は主観的なものです。根拠がない限り、美術館級の品質、人間による制作、何時間もの作業、アクセシビリティへの準拠を主張しないでください。
  • フォント名やライセンスのメタデータを確認しても、すべてのグリフの品質が保証されるわけではなく、完全なフォントのレンダリングやセキュリティ検証の代わりにもなりません。
  • この出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、成功基準が不足している場合は、作業を止めて確認を求めてください。

コメント