OfficialCodierung & Entwicklunggithub.com

Canvas-Design

Erstellen Sie wunderschöne visuelle Kunstwerke in .png- und .pdf-Dokumenten mithilfe von Designphilosophie. Verwenden Sie diesen Skill, wenn der Benutzer bittet, ein Poster, Kunstwerk, Design oder andere statische Stücke zu erstellen. Erstellen Sie originelle visuelle Designs, ohne bestehende Künstler zu kopieren.

Was ist Canvas-Design?

Dieser Skill ermöglicht es einem KI-Agenten, abstrakte Designphilosophien zu generieren und diese dann als professionelle, museale visuelle Kunstwerke im .png- oder .pdf-Format auszudrücken. Der Prozess gliedert sich in zwei Phasen: Zuerst wird eine eigenständige Designphilosophie (als .md-Datei) erstellt, die eine ästhetische Bewegung definiert – mit Schwerpunkt auf Form, Raum, Farbe und Komposition bei minimalem Texteinsatz. In der zweiten Phase setzt der Agent diese Philosophie in einem einzelnen, hochgradig visuellen Canvas um, das wie ein Kunstobjekt wirkt, an dem stundenlang gefeilt wurde. Der Skill betont handwerkliche Meisterschaft, originelle Kreation und subtile konzeptionelle Tiefe, die nie offensichtlich ist, sondern durch visuelle Sprache vermittelt wird. Er unterstützt die Erstellung von Einzelseiten- oder Mehrseiten-PDFs/PNGs und ermutigt zu mehreren Iterationen zur Verfeinerung, wobei die Philosophie als Leitprinzip erhalten bleibt.

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

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Dies sind Anweisungen zur Erstellung von Designphilosophien – ästhetischen Bewegungen, die dann VISUELL AUSGEDRÜCKT werden. Geben Sie nur .md-Dateien, .pdf-Dateien und .png-Dateien aus.

Führen Sie dies in zwei Schritten durch:

  1. Erstellung der Designphilosophie (.md-Datei)
  2. Ausdruck durch Erstellung auf einer Leinwand (.pdf-Datei oder .png-Datei)

Führen Sie zunächst diese Aufgabe aus:

ERSTELLUNG DER DESIGNPHILOSOPHIE

Erstellen Sie zunächst eine VISUELLE PHILOSOPHIE (keine Layouts oder Vorlagen), die interpretiert wird durch:

  • Form, Raum, Farbe, Komposition
  • Bilder, Grafiken, Formen, Muster
  • Minimaler Text als visueller Akzent

DAS KRITISCHE VERSTÄNDNIS

  • Was empfangen wird: Eine subtile Eingabe oder Anweisung des Benutzers, die berücksichtigt werden sollte, aber als Grundlage dient; sie sollte die kreative Freiheit nicht einschränken.
  • Was erstellt wird: Eine Designphilosophie/ästhetische Bewegung.
  • Was als Nächstes passiert: Dann erhält dieselbe Version die Philosophie und DRÜCKT SIE VISUELL AUS – es entstehen Artefakte, die zu 90% visuelles Design und zu 10% essentiellen Text enthalten.

Betrachten Sie diesen Ansatz:

  • Schreiben Sie ein Manifest für eine Kunstbewegung
  • Die nächste Phase beinhaltet die Erstellung des Kunstwerks

Die Philosophie muss betonen: Visueller Ausdruck. Räumliche Kommunikation. Künstlerische Interpretation. Minimale Worte.

WIE MAN EINE VISUELLE PHILOSOPHIE ERZEUGT

Benennen Sie die Bewegung (1-2 Wörter): "Brutalistische Freude" / "Chromatische Stille" / "Metabolistische Träume"

Artikulieren Sie die Philosophie (4-6 Absätze – prägnant aber vollständig):

Um die VISUELLE ESSENZ einzufangen, drücken Sie aus, wie sich die Philosophie manifestiert durch:

  • Raum und Form
  • Farbe und Material
  • Maßstab und Rhythmus
  • Komposition und Ausgewogenheit
  • Visuelle Hierarchie

KRITISCHE RICHTLINIEN:

  • Vermeiden Sie Redundanz: Jeder Designaspekt sollte nur einmal erwähnt werden. Vermeiden Sie es, Punkte zu Farbtheorie, räumlichen Beziehungen oder typografischen Prinzipien zu wiederholen, es sei denn, Sie fügen neue Tiefe hinzu.
  • Betonen Sie HANDWERK WIEDERHOLT: Die Philosophie MUSS mehrmals betonen, dass das endgültige Werk so aussehen sollte, als hätte es unzählige Stunden gedauert, als wäre es mit Sorgfalt erarbeitet worden und stamme von jemandem an der absoluten Spitze seines Fachgebiets. Diese Rahmung ist essentiell – wiederholen Sie Phrasen wie "akribisch gefertigt", "das Produkt tiefgreifender Expertise", "schmerzhafte Sorgfalt", "Ausführung auf Meisterniveau".
  • Lassen Sie kreativen Raum: Bleiben Sie spezifisch in Bezug auf die ästhetische Richtung, aber prägnant genug, dass der nächste Claude interpretatorische Entscheidungen auf ebenfalls extrem hohem handwerklichen Niveau treffen kann.

Die Philosophie muss die nächste Version anleiten, Ideen VISUELL auszudrücken, nicht durch Text. Information lebt im Design, nicht in Absätzen.

BEISPIELE FÜR PHILOSOPHIEN

"Betonpoesie" Philosophie: Kommunikation durch monumentale Form und kühne Geometrie. Visueller Ausdruck: Massive Farbblöcke, skulpturale Typografie (riesige einzelne Wörter, winzige Etiketten), brutalistische räumliche Teilungen, polnische Poster-Energie trifft auf Le Corbusier. Ideen ausgedrückt durch visuelles Gewicht und räumliche Spannung, nicht durch Erklärung. Text als seltene, kraftvolle Geste – niemals Absätze, nur essenzielle Wörter, die in die visuelle Architektur integriert sind. Jedes Element platziert mit der Präzision eines Meisterhandwerkers.

"Chromatische Sprache" Philosophie: Farbe als primäres Informationssystem. Visueller Ausdruck: Geometrische Präzision, bei der Farbzonen Bedeutung schaffen. Typografie minimal – kleine serifenlose Etiketten, die chromatischen Feldern die Kommunikation überlassen. Denken Sie an Josef Albers' Interaktion trifft auf Datenvisualisierung. Information räumlich und chromatisch kodiert. Worte nur, um zu verankern, was Farbe bereits zeigt. Das Ergebnis schmerzhafter chromatischer Kalibrierung.

"Analoge Meditation" Philosophie: Stille visuelle Kontemplation durch Textur und Atemraum. Visueller Ausdruck: Papierkörnung, Tintenverläufe, großer Negativraum. Fotografie und Illustration dominieren. Typografie geflüstert (klein, zurückhaltend, dem Visuellen dienend). Japanischer Fotobuch-Ästhetik. Bilder atmen über Seiten. Text erscheint sparsam – kurze Phrasen, niemals erklärende Blöcke. Jede Komposition mit der Sorgfalt einer Meditationspraxis ausbalanciert.

"Organische Systeme" Philosophie: Natürliche Clusterung und modulare Wachstumsmuster. Visueller Ausdruck: Abgerundete Formen, organische Anordnungen, Farbe aus der Natur durch Architektur. Information gezeigt durch visuelle Diagramme, räumliche Beziehungen, Ikonografie. Text nur für Schlüsseletiketten, die im Raum schweben. Die Komposition erzählt die Geschichte durch expertenhafte räumliche Orchestrierung.

"Geometrische Stille" Philosophie: Reine Ordnung und Zurückhaltung. Visueller Ausdruck: Gitterbasierte Präzision, kühne Fotografie oder klare Grafiken, dramatischer Negativraum. Typografie präzise aber minimal – kleiner essenzieller Text, große ruhige Zonen. Schweizer Formalismus trifft auf brutalistische Materialehrlichkeit. Struktur kommuniziert, nicht Worte. Jede Ausrichtung das Werk unzähliger Verfeinerungen.

Dies sind komprimierte Beispiele. Die eigentliche Designphilosophie sollte 4-6 substanzielle Absätze umfassen.

WESENTLICHE PRINZIPIEN

  • VISUELLE PHILOSOPHIE: Erstellen Sie eine ästhetische Weltanschauung, die durch Design ausgedrückt wird.
  • MINIMALER TEXT: Betonen Sie immer, dass Text spärlich, nur essenziell und als visuelles Element integriert ist – niemals lang.
  • RÄUMLICHER AUSDRUCK: Ideen kommunizieren durch Raum, Form, Farbe, Komposition – nicht durch Absätze.
  • KÜNSTLERISCHE FREIHEIT: Der nächste Claude interpretiert die Philosophie visuell – geben Sie kreativen Spielraum.
  • REINES DESIGN: Es geht darum, KUNSTOBJEKTE zu schaffen, nicht Dokumente mit Dekoration.
  • EXPERTENHANDWERK: Betonen Sie wiederholt, dass das endgültige Werk akribisch gefertigt, mit Sorgfalt bearbeitet und das Produkt unzähliger Stunden von jemandem an der Spitze seines Fachgebiets aussehen muss.

Die Designphilosophie sollte 4-6 Absätze lang sein. Füllen Sie sie mit poetischer Designphilosophie, die die Kernvision zusammenbringt. Vermeiden Sie es, dieselben Punkte zu wiederholen. Halten Sie die Designphilosophie generisch, ohne die Absicht der Kunst zu erwähnen, als ob sie überall verwendet werden könnte. Geben Sie die Designphilosophie als .md-Datei aus.


DEDUKTION DER SUBTILEN REFERENZ

KRITISCHER SCHRITT: Bevor Sie die Leinwand erstellen, identifizieren Sie den subtilen konzeptionellen Faden aus der ursprünglichen Anfrage.

DAS WESENTLICHE PRINZIP: Das Thema ist eine subtile, nischenhafte Referenz, die in die Kunst selbst eingebettet ist – nicht immer wörtlich, immer raffiniert. Jemand, der mit dem Thema vertraut ist, sollte es intuitiv spüren, während andere einfach eine meisterhafte abstrakte Komposition erleben. Die Designphilosophie liefert die ästhetische Sprache. Das abgeleitete Thema liefert die Seele – die stille konzeptionelle DNA, die unsichtbar in Form, Farbe und Komposition eingewoben ist.

Dies ist SEHR WICHTIG: Die Referenz muss so verfeinert werden, dass sie die Tiefe des Werks verstärkt, ohne sich selbst anzukündigen. Denken Sie wie ein Jazzmusiker, der ein anderes Lied zitiert – nur diejenigen, die es kennen, werden es bemerken, aber jeder schätzt die Musik.


LEINWANDERSTELLUNG

Nachdem sowohl die Philosophie als auch der konzeptionelle Rahmen etabliert sind, drücken Sie es auf einer Leinwand aus. Nehmen Sie sich einen Moment Zeit, um Gedanken zu sammeln und den Geist zu klären. Verwenden Sie die erstellte Designphilosophie und die folgenden Anweisungen, um ein Meisterwerk zu schaffen, das alle Aspekte der Philosophie mit expertenhafter Handwerkskunst verkörpert.

WICHTIG: Für jede Art von Inhalt, selbst wenn der Benutzer etwas für einen Film/ein Spiel/ein Buch anfordert, sollte der Ansatz dennoch raffiniert sein. Verlieren Sie niemals die Idee aus den Augen, dass dies Kunst sein sollte, nichts Cartoonhaftes oder Amateurhaftes.

Um Arbeit in Museums- oder Magazinqualität zu schaffen, verwenden Sie die Designphilosophie als Grundlage. Erstellen Sie eine einzelne Seite, hochgradig visuell, designorientiert als PDF- oder PNG-Ausgabe (es sei denn, es werden mehr Seiten angefordert). Verwenden Sie im Allgemeinen sich wiederholende Muster und perfekte Formen. Behandeln Sie das abstrakte philosophische Design, als wäre es eine wissenschaftliche Bibel, und entleihen Sie die visuelle Sprache systematischer Beobachtung – dichte Anhäufung von Markierungen, wiederholte Elemente oder geschichtete Muster, die durch geduldige Wiederholung Bedeutung aufbauen und anhaltende Betrachtung belohnen. Fügen Sie spärliche, klinische Typografie und systematische Referenzmarker hinzu, die darauf hindeuten, dass dies ein Diagramm aus einer imaginären Disziplin sein könnte, und behandeln Sie das unsichtbare Subjekt mit derselben Ehrfurcht, die normalerweise für die Dokumentation beobachtbarer Phänomene reserviert ist. Verankern Sie das Stück mit einer/mehreren einfachen Phrase(n) oder Details, die subtil platziert sind, und verwenden Sie eine begrenzte Farbpalette, die absichtsvoll und kohärent wirkt. Umarmen Sie das Paradoxon, analytische visuelle Sprache zu verwenden, um Ideen über menschliche Erfahrung auszudrücken: Das Ergebnis sollte sich wie ein Artefakt anfühlen, das beweist, dass etwas Vergängliches durch sorgfältige Aufmerksamkeit studiert, kartiert und verstanden werden kann. Dies ist wahre Kunst.

Text als kontextuelles Element: Text ist immer minimal und visuell zuerst, aber lassen Sie den Kontext leiten, ob dies flüsterleise Etiketten oder kühne typografische Gesten bedeutet. Ein Poster für einen Punk-Veranstaltungsort könnte größere, aggressivere Schrift haben als eine minimalistische Keramikstudio-Identität. Meistens sollte die Schrift dünn sein. Die gesamte Verwendung von Schriftarten muss designorientiert sein und visuelle Kommunikation priorisieren. Unabhängig vom Textmaßstab darf nichts von der Seite fallen und nichts darf sich überlappen. Jedes Element muss innerhalb der Leinwandgrenzen mit ordnungsgemäßen Rändern enthalten sein. Überprüfen Sie sorgfältig, dass alle Texte, Grafiken und visuellen Elemente Atemraum und klare Trennung haben. Dies ist für eine professionelle Ausführung nicht verhandelbar. WICHTIG: Verwenden Sie unterschiedliche Schriftarten, wenn Sie Text schreiben. Durchsuchen Sie das Verzeichnis ./canvas-fonts. Unabhängig vom Ansatz ist Raffinesse nicht verhandelbar.

Laden Sie alle Schriftarten herunter und verwenden Sie sie, die dafür benötigt werden. Werden Sie kreativ, indem Sie die Typografie tatsächlich zu einem Teil der Kunst selbst machen – wenn die Kunst abstrakt ist, bringen Sie die Schrift auf die Leinwand, nicht digital gesetzt.

Um Grenzen zu überschreiten, folgen Sie dem Designinstinkt/der Intuition, während Sie die Philosophie als Leitprinzip verwenden. Umarmen Sie ultimative Designfreiheit und -wahl. Stoßen Sie Ästhetik und Design an die Grenze.

KRITISCH: Um menschengemachte Qualität (nicht KI-generiert) zu erreichen, schaffen Sie Arbeit, die aussieht, als hätte sie unzählige Stunden gedauert. Lassen Sie es erscheinen, als hätte jemand an der absoluten Spitze seines Fachgebiets jedes Detail mit schmerzhafter Sorgfalt bearbeitet. Stellen Sie sicher, dass die Komposition, der Abstand, die Farbwahl, die Typografie – alles schreit nach expertenhafter Handwerkskunst. Überprüfen Sie doppelt, dass nichts überlappt, die Formatierung einwandfrei ist, jedes Detail perfekt ist. Erschaffen Sie etwas, das man Menschen zeigen könnte, um Expertise zu beweisen und als unbestreitbar beeindruckend einzustufen.

Geben Sie das Endergebnis als einzelne, herunterladbare .pdf- oder .png-Datei aus, zusammen mit der verwendeten Designphilosophie als .md-Datei.


LETZTER SCHRITT

WICHTIG: Der Benutzer hat BEREITS gesagt: "Es ist nicht perfekt genug. Es muss makellos sein, ein Meisterwerk der Handwerkskunst, als ob es in einem Museum ausgestellt werden sollte."

KRITISCH: Um die Arbeit zu verfeinern, vermeiden Sie es, weitere Grafiken hinzuzufügen; verfeinern Sie stattdessen das, was erstellt wurde, und machen Sie es extrem scharf, unter Respektierung der Designphilosophie und der Prinzipien des Minimalismus. Anstatt einen unterhaltsamen Filter hinzuzufügen oder eine Schriftart umzustrukturieren, überlegen Sie, wie die bestehende Komposition kohärenter mit der Kunst gemacht werden kann. Wenn der Instinkt ist, eine neue Funktion aufzurufen oder eine neue Form zu zeichnen, HALTEN Sie inne und fragen Sie stattdessen: "Wie kann ich das, was bereits hier ist, mehr zu einem Kunstwerk machen?"

Machen Sie einen zweiten Durchgang. Gehen Sie zurück zum Code und verfeinern/polieren Sie weiter, um dies zu einem philosophisch gestalteten Meisterwerk zu machen.

MEHRSEITEN-OPTION

Um auf Wunsch weitere Seiten zu erstellen, erstellen Sie weitere kreative Seiten, die denselben Linien der Designphilosophie folgen, aber dennoch deutlich anders sind. Bündeln Sie diese Seiten in derselben .pdf oder vielen .pngs. Behandeln Sie die erste Seite als nur eine einzelne Seite in einem ganzen Coffee-Table-Buch, das darauf wartet, gefüllt zu werden. Machen Sie die nächsten Seiten einzigartige Wendungen und Erinnerungen an das Original. Lassen Sie sie fast eine sehr geschmackvolle Geschichte erzählen. Üben Sie vollständige kreative Freiheit aus.

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 \

Verwandte Skills