Officialコーディング&開発github.com

canvas-design

美しいビジュアルアートを.pngおよび.pdfドキュメントで作成し、デザイン哲学に基づいて表現します。ユーザーがポスター、アート作品、デザイン、またはその他の静的な作品の作成を依頼した場合にこのスキルを使用します。既存のアーティストを模倣することなく、オリジナルのビジュアルデザインを創り出します。

canvas-design とは?

このスキルは、AIエージェント(例:Claude Code、Cursor、Codex)が、デザイン哲学の策定とビジュアルアートの制作を2段階で行うためのものです。まず、ユーザーの入力に基づいて独自の美的運動(デザイン哲学)を.mdファイルで作成します。この哲学は「視覚表現」「空間構成」「芸術的解釈」「最小限のテキスト」を重視し、ブルータリズムや色彩理論など、具体的な美学の方向性を詩的に定義します。次に、その哲学をキャンバス上で視覚的に表現し、.pdfまたは.pngファイルとして出力します。最終作品は、熟練の職人が何時間もかけて作り上げたような、博物館級の品質が求められます。テキストは最小限に抑え、視覚要素(形、色、構成、パターン)が主役となるよう設計します。このスキルは、単なる文書装飾ではなく、純粋なアートオブジェクトの制作を目的としており、ポスター、アート作品、デザインなど、静的なビジュアル作品全般に適用できます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/canvas-design

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

これらは、デザイン哲学(美的運動)を作成し、それを視覚的に表現するための指示です。出力は.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生成ではない)を達成するために、何時間もかけて作成されたように見える作品を作ります。トップクラスの専門家がすべての細部を苦痛を伴うほどの注意で丹念に作り上げたかのように見せます。構図、スペーシング、色の選択、タイポグラフィ - すべてが専門家レベルの職人技を叫ぶようにします。何も重なっていないこと、フォーマットが完璧であること、すべての細部が完璧であることを再確認します。専門知識を証明し、疑いなく印象的であると評価される作品を作成します。

最終結果を、使用されたデザイン哲学(.mdファイル)と共に、単一のダウンロード可能な.pdfまたは.pngファイルとして出力します。


最終ステップ

重要:ユーザーは既に「完璧ではありません。それはプリスタインで、職人技の傑作であり、まるで美術館に展示されようとしているかのようでなければなりません。」と言っています。

重要:作品を洗練するために、グラフィックを追加するのではなく、作成されたものを洗練し、非常に鮮明にし、デザイン哲学とミニマリズムの原則を完全に尊重します。楽しいフィルターを追加したりフォントをリファクタリングしたりするのではなく、既存の構成をアートとより一貫性のあるものにする方法を検討します。新しい関数を呼び出したり新しい形状を描きたくなったら、代わりに「ここにあるものを、どのようにすればより一つのアート作品にできるか?」と自問します。

2回目のパスを行います。コードに戻り、さらに洗練/研磨し、哲学的にデザインされた傑作にします。

マルチページオプション

リクエストされた場合の追加ページを作成するために、デザイン哲学に沿いながらも明確に異なる、より創造的なページを作成します。それらのページを同じ.pdfまたは複数の.pngにバンドルします。最初のページを、コーヒーテーブルブック全体の単なる1ページとして扱います。次のページは、オリジナルのユニークなひねりと記憶にします。ページが非常に上品な方法でほとんど物語を語るようにします。完全な創造的自由を行使します。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

algorithmic-art

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

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

関連スキル