mcpField
C
canvas-design

canvas-design

github.com/full-stack-skillsデザイン・UI045 回インストール2 週間前に更新
リポジトリ

canvas-design について

短い依頼からビジュアル哲学を作り、1ページの PDF または PNG に表現するデザインスキルです。空間や構成による伝達、文字の抑制、丁寧な仕上げを重視します。

主な機能

  1. 01Markdown でビジュアル哲学を作成
  2. 02コンセプトをキャンバス作品に展開
  3. 031ページの PDF または PNG を出力
  4. 04文字を抑えた視覚的な構成
  5. 05再確認による作品のブラッシュアップ

活用シーン

  1. 01短い依頼からアートの方向性を策定
  2. 02完成度の高い1ページ作品を制作
  3. 03抽象的なデザインで隠れたテーマを表現

インストール

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

$npx skills add https://github.com/full-stack-skills/design-skills --skill canvas-design

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

同梱ファイル

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

LICENSE.txt
agents/
openai.yaml
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

詳細

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

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

デザイン哲学の作成

まず、(レイアウトやテンプレートではなく)ビジュアル哲学を作成してください。次の要素を通じて表現します。

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

次のようなアプローチを考えてください。

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

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

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

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

哲学を明確にする(簡潔でありながら内容を網羅した4〜6段落):

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

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

重要なガイドライン:

  • 重複を避ける:デザインの各要素には一度だけ触れてください。新たな深みを加える場合を除き、色彩理論、空間的な関係、タイポグラフィの原則について繰り返し述べないでください。
  • 職人技を繰り返し強調する:最終作品が、数え切れないほどの時間をかけて丁寧に作り込まれ、その分野の第一人者が手がけたかのように見えるべきだと、哲学の中で何度も強調してください。「細部まで緻密に作り込む」「深い専門知識の結晶」「丹念な配慮」「達人級の仕上がり」といった表現を繰り返すことが不可欠です。
  • 創造の余地を残す:美的な方向性を具体的に示しつつも、次の Claude が極めて高い水準の職人技で独自に解釈できる余地を残せるよう、簡潔にまとめてください。

哲学は、次のバージョンが文章ではなく、視覚的にアイデアを表現できるよう導く必要があります。情報は段落ではなく、デザインの中に宿ります。

哲学の例

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

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

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

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

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

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

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

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


さりげない引用を見抜く

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

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

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


キャンバスの制作

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

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

美術館や雑誌に掲載できる品質の作品を制作するため、デザイン哲学を基盤として使用してください。特に指定がない限り、視覚的でデザイン性を重視した、1ページのPDFまたはPNGを1点制作します。一般に、反復パターンと正確な形状を活用してください。抽象的な哲学的デザインを、科学的な聖典のように扱います。体系的な観察のビジュアルランゲージを取り入れ、緻密に積み重ねたマーク、反復要素、重層的なパターンを通じて、忍耐強い反復によって意味を築き、じっくりと眺めることで報われる作品にしてください。控えめで臨床的なタイポグラフィと体系的な参照マーカーを加え、架空の学問分野の図解を思わせる仕上がりにします。目に見えない対象を、観察可能な現象の記録に通常払われるのと同じ敬意をもって扱ってください。限られた色数で意図的かつ調和のとれたパレットを用い、短いフレーズや細部を控えめな位置に配して、作品の軸とします。人間の経験に関する考えを分析的なビジュアルランゲージで表現するという逆説を受け入れてください。注意深く観察すれば、儚いものも研究し、地図に描き、理解できることを証明する遺物のような作品に仕上げます。これこそが真のアートです。

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

必要なフォントはダウンロードして使用してください。タイポグラフィ自体がアートの一部となるよう、創造性を発揮してください。作品が抽象的な場合は、文字をデジタルで組版するのではなく、キャンバス上にフォントを取り入れてください。

限界を押し広げるため、哲学を指針としつつ、デザインの本能や直感に従ってください。デザインの自由と選択を最大限に受け入れ、美的表現とデザインを最前線へ押し進めてください。

最重要:AI が生成したような作品ではなく、人の手で制作された品質を実現するため、数え切れないほどの時間をかけて作られたように見える作品にしてください。その分野の頂点に立つ人が、あらゆる細部に細心の注意を払い、丹念に仕上げたかのように見せます。構図、余白、色の選択、タイポグラフィなど、すべてに熟練の技が表れるようにしてください。重なりがないこと、書式に不備がないこと、すべての細部が完璧であることを二重に確認してください。自分の専門性を証明するために人々に見せられる、疑いようもなく印象的な作品を制作してください。

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

最終ステップ

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

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

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

複数ページのオプション

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

コメント