mcpField
C
canvas-design

canvas-design

github.com/composio-communityクリエイティブ・メディア2.0k1.7k 回インストール14 週間前に更新
リポジトリ

canvas-design について

canvas-designは、視覚的なデザイン哲学を考案し、キャンバス上に表現するようAIを導くスキルです。まずMarkdownの哲学文書を作り、その後1ページのPDFまたはPNGを制作します。

主な機能

  1. 01視覚的なデザイン哲学の考案
  2. 02形・空間・色の記述
  3. 03哲学のキャンバス表現
  4. 04MarkdownとPDFまたはPNGの出力

活用シーン

  1. 01テーマに沿ったデザイン哲学の作成
  2. 021ページのビジュアルポスターや作品の制作
  3. 03デザイン説明とビジュアル成果物の作成

インストール

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

$npx skills add https://github.com/composio-community/awesome-claude-plugins --skill canvas-design

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

詳細

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

以下の2つのステップで完了してください。

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

デザイン哲学の作成

まず、視覚哲学(レイアウトやテンプレートではありません)を作成してください。次の要素を通じて表現されます。

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

ムーブメントに名前を付ける(1~2語):"Brutalist Joy" / "Chromatic Silence" / "Metabolist Dreams"

哲学を言葉にする(簡潔ながら十分に伝わる4~6段落):

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

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

重要なガイドライン:

  • 重複を避ける: 各デザイン要素について言及するのは一度だけにしてください。
  • 職人技を繰り返し強調する: 最終作品が数え切れないほどの時間をかけて作られ、細心の注意を払って仕上げられ、その分野の頂点に立つ人物によるものだと思わせる必要があります。哲学の中で、この点を何度も強調してください。
  • 創造の余地を残す: 美的な方向性は具体的に示しつつも、解釈の余地が残るよう簡潔にしてください。
哲学の例

「コンクリート・ポエトリー」 哲学:壮大なフォルムと大胆な幾何学によるコミュニケーション。 視覚表現:巨大な色面、彫刻的なタイポグラフィ(大きな単語を一つ、小さなラベル)、ブルータリズム的な空間分割に、ル・コルビュジエと融合したポーランドのポスターの躍動感。

「クロマティック・ランゲージ」 哲学:主要な情報システムとしての色。 視覚表現:色の領域が意味を生み出す幾何学的な精密さ。タイポグラフィは最小限にし、小さなサンセリフ体のラベルだけを置いて、色彩の面に語らせます。ヨーゼフ・アルバースの色彩の相互作用とデータビジュアライゼーションの融合を思い描いてください。

「アナログ・メディテーション」 哲学:質感と余白による静かな視覚的瞑想。 視覚表現:紙の目、にじむインク、広大なネガティブスペース。写真とイラストを主役にします。タイポグラフィはささやくように(小さく、控えめに、ビジュアルを引き立てる役割に徹します)。日本のフォトブックの美学です。

キャンバスの作成

哲学と概念的な枠組みの両方を確立したら、それをキャンバス上に表現します。生み出したデザイン哲学と以下の指示を活用して、傑作を作り上げてください。

重要:映画、ゲーム、本に関するものをユーザーが求めている場合でも、どのような種類のコンテンツでも、洗練されたアプローチを維持してください。カートゥーン風や素人っぽいものではなく、アートとして制作するという考えを決して忘れないでください。

美術館や雑誌に掲載できるクオリティの作品を作るため、デザイン哲学を土台にしてください。ビジュアルを重視したデザイン性の高い単一ページのPDFまたはPNGを作成してください。基本的には、繰り返しのパターンと完璧な形状を用いてください。抽象的な哲学的デザインを、科学の聖典であるかのように扱ってください。

文脈を伝える要素としてのテキスト:テキストは常に最小限にとどめ、ビジュアルを優先します。ただし、その文脈に応じて、ささやくように控えめなラベルにするか、大胆なタイポグラフィ表現にするかを判断してください。ほとんどの場合、フォントは細字にします。フォントはすべて、デザイン性を重視し、視覚的な伝達を優先して使用してください。テキストの大きさにかかわらず、ページからはみ出したり、重なり合ったりしてはいけません。

最重要:人の手で作られたような品質(AI生成ではない印象)を実現するため、数え切れないほどの時間をかけたように見える作品を作ってください。その分野の頂点に立つ人物が、細部にまで丹念にこだわり、労力を惜しまず仕上げたかのように見せてください。

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

コメント