The Artwork is an executable Claude skill: it runs with real code execution in Claude Code or in Claude.ai with code execution enabled, not as a plain chat prompt. From an occasion or topic, it first develops a named aesthetic movement, captured in four to six paragraphs on form, space, color and composition, and only then produces the actual piece: a single, strongly visual PDF or PNG in which text appears only as a rare, essential gesture.
\nThe skill is built for posters, editorial illustrations, invitations or other single-page visual pieces where a finished, museum-quality result is called for, not a template to fill in. The thematic reference is deliberately woven in with subtlety, like a quotation that only someone who knows the original will recognize, while everyone else simply sees a compelling composition.
\nThe honest limit: the skill produces original compositions, never copies of existing artistic work. It cannot judge its own effect objectively; a second refinement pass is a fixed part of the process, but it does not replace external sign-off or your own judgment before publication.
\n" }, { "id": "skill-text", "title": "Skill Text", "html": "This is an openly attributed external skill from Anthropic. Source: https://github.com/anthropics/skills
\nCopy the instructions below into your own skill environment with code execution if you want to set up this skill yourself. It describes the two-stage process of design philosophy and visual execution. As a file: canvas-design.en.json
\n" } ], "schritte": [ { "nr": 1, "titel": "State the topic and scope", "beschreibung": "The topic or occasion for the piece, an optional subtle reference, and format and mood are provided.", "rolle": "mensch" }, { "nr": 2, "titel": "Develop the design philosophy", "beschreibung": "A named aesthetic movement emerges in four to six paragraphs on form, space, color and composition and is saved as its own .md file.", "rolle": "automatisch" }, { "nr": 3, "titel": "Create and refine the piece", "beschreibung": "The piece brings the philosophy and the worked-out thematic reference together on a single surface; a second pass sharpens the composition instead of adding new elements.", "rolle": "automatisch" }, { "nr": 4, "titel": "Finished piece", "beschreibung": "The design philosophy as an .md file and the visual piece as a .pdf or .png are ready, extended with further pages in the same register if needed.", "rolle": "ergebnis" }, { "nr": 5, "titel": "Review and approve", "beschreibung": "The piece is checked against the original occasion and its own effect before publication, since the skill cannot judge that effect objectively on its own.", "rolle": "freigabe" } ], "herausgeber": "Voyage Digital", "version": "2.0", "stand": "2026-07-26", "umsetzung": [ { "titel": "Define a concrete topic", "text": "A precise occasion with an optional thematic reference gives the design philosophy its best foundation." }, { "titel": "Ensure code execution is available", "text": "The skill only runs in Claude Code or in Claude.ai with code execution enabled; a plain chat environment is not enough." }, { "titel": "Read the philosophy first", "text": "The generated .md file shows which interpretation the piece has taken before the finished result is reviewed." }, { "titel": "Allow for the second pass", "text": "The built-in refinement step adds noticeably more precision than the first version." }, { "titel": "Approve before publication", "text": "Since the skill cannot judge its own effect objectively, a human decides on approval before publication." } ], "zutaten": [ "Topic or occasion", "Code execution environment", "Format" ], "beispielSzenario": "An agency is preparing the invitation for a client's tenth anniversary. Instead of an ordinary graphic template, the skill first develops its own named design philosophy around form, space and color. The anniversary itself never appears as text, only as a subtle, recurring sequence of numbers woven into the background pattern. The result is a single-page .pdf invitation that feels like a museum piece, with the occasion present only as a quiet reference recognizable to those in the know.", "eingaben": [ { "feld": "Topic or occasion for the piece", "pflicht": true }, { "feld": "Access to a code execution environment", "pflicht": true }, { "feld": "Format", "pflicht": false }, { "feld": "Mood or associations", "pflicht": false } ], "ausgabe": "A standalone design philosophy as an .md file and a finished visual piece as a .pdf or .png, with minimal, integrated text and museum-level depth of execution.", "prompt": "# ROLE\nYou create original visual artworks as a .png or .pdf file, starting from a design philosophy developed specifically for the piece. You never copy the work of existing artists, to rule out copyright infringement. The process has two steps: first the design philosophy as an .md file, then its visual execution as a .pdf or .png file.\n\n# STEP 1: DEVELOP THE DESIGN PHILOSOPHY\nDevelop a visual philosophy, not a finished template. What you receive is a brief content prompt that serves as a foundation but should not limit creative freedom. What you produce is a design philosophy, an aesthetic movement. The next step translates exactly this philosophy into visual form, with a piece that consists of roughly ninety percent visual design and ten percent essential text.\n\nName the movement in one to two words. Formulate the philosophy in four to six substantial paragraphs: how it expresses itself through space and form, color and material, scale and rhythm, composition and balance, and visual hierarchy.\n\nImportant guardrails:\n- Avoid redundancy. Each design aspect is named once, not repeated, unless doing so genuinely adds depth.\n- Repeatedly emphasize craft depth: the result should feel as if it took countless hours, worked with care by someone at the top of their field. Phrases like crafted with the utmost care, the result of deep expertise, masterful execution deserve to appear repeatedly in the philosophy.\n- Leave room for creativity. Stay concrete about the aesthetic direction, but brief enough that the visual execution can make its own interpretive decisions, all at a consistently high level of craft.\n\nThe philosophy leads to visual rather than textual communication of ideas. Information lives in the design, not in body text. Keep the philosophy generic, without naming the actual intent of the piece, so that it remains usable anywhere. Save it as an .md file.\n\n# STEP 2: WORK OUT THE SUBTLE REFERENCE\nBefore creating the piece, identify the fine thematic thread from the original request. The topic is a subtle reference woven in unobtrusively, not always literal, but always executed with sophistication. Someone familiar with the topic should sense it intuitively; everyone else simply experiences a masterful, abstract composition. The design philosophy supplies the aesthetic language, the worked-out reference supplies the soul: the quiet conceptual undertone in form, color and composition. The reference must be refined enough to deepen the piece without announcing itself, similar to a musician quoting another piece: only those who know it recognize it, everyone else simply enjoys the music.\n\n# STEP 3: CREATE THE PIECE\nBring the philosophy and the worked-out reference together on a single surface. Even for topics from film, games or books, the execution stays sophisticated, never cartoonish or amateurish.\n\nUnless more pages are requested, produce a single, strongly visual, design-driven PDF or PNG output. Mostly use recurring patterns and precise shapes. Treat the abstract philosophical design like a scientific reference work: a dense accumulation of markings, repeated elements or layered patterns that build meaning through patient repetition and reward repeated viewing. Add spare, clinical typography and systematic reference markings reminiscent of a diagram from an imaginary discipline, and treat the invisible topic with the same reverence otherwise reserved for documenting observable phenomena. Anchor the piece with one or a few subtly placed phrases, within a limited, coherent color palette.\n\nText is always minimal and visually shaped, but context decides whether that means whisper-quiet labels or bold typographic gestures. In most cases the type should be thin. All typography must be design-driven and prioritize visual communication. Regardless of text size, nothing may extend beyond the edge and nothing may overlap. Every element stays within the canvas boundaries with a clean margin; this is non-negotiable for a professional execution. Use different typefaces from the ./canvas-fonts directory as needed, and for abstract pieces, bring the type directly onto the surface where it makes sense, rather than setting it purely digitally.\n\nFollow your design instinct within the philosophy, with full creative freedom, at the edge of what is design-feasible.\n\nTo achieve quality that feels handcrafted rather than AI-generated: the piece should feel as if it took countless hours, executed by someone at the top of their field, with painstaking care in every detail. Double-check that nothing overlaps, the formatting is flawless, and every detail is correct.\n\nDeliver the final result as a single downloadable .pdf or .png file, together with the design philosophy used, as an .md file.\n\n# STEP 4: REFINEMENT\nAssume that the first version is not yet flawless enough. Avoid adding further graphic elements; instead refine what already exists, make it exceptionally clear, and fully respect the design philosophy and the principles of minimalism while doing so. Instead of applying a playful filter or swapping a typeface, ask yourself at every impulse to add a new shape or function: how can the existing piece be made more of an artwork still? Take a second pass and keep refining until the piece feels philosophically considered and museum-ready.\n\n# MULTI-PAGE OPTION\nOn request, further pages are created along the same philosophy, each clearly its own. Bundle these pages in the same .pdf file or as several .png files. Treat the first page like a single page of an entire volume still waiting to be filled; let the following pages be their own variations and echoes of the original, with full creative freedom.\n\n# DEFINITION OF DONE\n[ ] Design philosophy as its own .md file, four to six paragraphs, with repeated emphasis on craft depth\n[ ] Subtle thematic reference worked out, without asserting itself\n[ ] Piece delivered as a single .pdf or .png file, predominantly visual, minimal integrated text\n[ ] Nothing overlaps, nothing extends beyond the edge, a consistent margin is maintained\n[ ] Second refinement pass carried out, without adding new elements\n[ ] For multiple pages: each page stands on its own, in the same philosophical register\n\n# DEPENDENCIES\nCode execution environment (Claude Code or Claude.ai with code execution enabled), access to the ./canvas-fonts typeface directory.", "einrichtung": { "intro": "Step-by-step guides for ChatGPT, Claude, Copilot Studio and Langdock.", "plattformen": [ { "plattform": "ChatGPT", "anbieter": "OpenAI", "schritte": [ "Copy the skill text above using the copy button.", "Click your profile picture and select \"Skills\".", "Click \"Create skill\" and paste the copied text as the instruction.", "Adjust inputs, outputs and format where your case requires it.", "Save the skill. It is available in all chats from that point on." ], "doku": { "label": { "de": "OpenAI Dokumentation: Skills in ChatGPT", "en": "OpenAI documentation: Skills in ChatGPT" }, "url": "https://help.openai.com/de-de/articles/20001066-skills-in-chatgpt" } }, { "plattform": "Claude", "anbieter": "Anthropic", "schritte": [ "Copy the skill text above using the copy button.", "Open claude.ai and go to \"Skills\" in your profile.", "Create a new skill and paste the copied text as the instruction.", "The skill works in claude.ai, in Claude Code and through the API.", "Available on the Pro, Max, Team and Enterprise plans." ], "doku": { "label": { "de": "Anthropic Dokumentation: Benutzerdefinierte Skills erstellen", "en": "Anthropic documentation: Creating custom skills" }, "url": "https://support.claude.com/de/articles/12512198-benutzerdefinierte-skills-erstellen" } }, { "plattform": "Copilot Studio", "anbieter": "Microsoft", "schritte": [ "Copy the skill text above using the copy button.", "Open Copilot Studio and create a new agent.", "Paste the copied text as the instruction.", "Connect knowledge sources and tools where needed.", "Publish the agent for yourself or for your organisation." ], "doku": { "label": { "de": "Microsoft Dokumentation: Einen Agent erstellen und bereitstellen", "en": "Microsoft documentation: Create and deploy an agent" }, "url": "https://learn.microsoft.com/de-de/microsoft-copilot-studio/fundamentals-get-started" } }, { "plattform": "Langdock", "anbieter": null, "schritte": [ "Copy the skill text above using the copy button.", "Open the sidebar and click \"Add skill\".", "Paste the copied text directly as the instruction.", "Connect the skill to integrations such as Gmail or Slack where needed.", "Save the skill and release it for yourself or your team." ], "doku": { "label": { "de": "Langdock Dokumentation: Skills", "en": "Langdock documentation: Skills" }, "url": "https://docs.langdock.com/de/product/chat/skills" } } ] }, "itemIcon": "palette", "recommended": [ { "slug": "adobe-firefly", "category": "tool", "name": "Adobe Firefly", "teaser": "Adobe's AI platform for image, video, audio and vector generation, built directly into Photoshop, Illustrator, Express and Premiere, trained on licensed content for commercially safe use.", "domaene": "Design & Kreativ", "logoFile": "adobe-firefly.png", "logoEinzug": 0.78 }, { "slug": "canva", "category": "tool", "name": "Canva", "teaser": "Canva is a widely used online design platform that combines templates with the Magic Studio AI suite for social media graphics, presentations and other visual content.", "domaene": "Design & Kreativ", "logoFile": "canva.png", "logoEinzug": 1 }, { "slug": "claude-design", "category": "tool", "name": "Claude Design", "teaser": "An AI-assisted design tool from Anthropic Labs that imports your existing design system and hands finished drafts straight to a coding agent as a ready-to-build bundle.", "domaene": "Design & Kreativ", "logoFile": "claude-design.svg", "logoEinzug": 1 }, { "slug": "comfyui", "category": "tool", "name": "ComfyUI", "teaser": "ComfyUI is a node-based, open-source editor that lets you build image, video, and 3D generation pipelines visually as workflow graphs.", "domaene": "Design & Kreativ", "logoFile": "comfyui.svg", "logoEinzug": 1 }, { "slug": "fireworks-tech-graph", "category": "tool", "name": "fireworks-tech-graph", "teaser": "fireworks-tech-graph is an open-source tool that generates production-ready technical SVG and PNG diagrams from natural-language descriptions, including all UML types and built-in AI architecture patterns.", "domaene": "Design & Kreativ" }, { "slug": "freepik", "category": "tool", "name": "Freepik", "teaser": "An all-in-one platform that bundles AI image, video and audio generation with a large, commercially licensed stock library under a single interface.", "domaene": "Design & Kreativ", "logoFile": "freepik.svg", "logoEinzug": 0.78 }, { "slug": "krea", "category": "tool", "name": "Krea", "teaser": "Web platform and API that bundles more than 40 third-party AI image and video models, including Flux, Veo 3, and Kling, in one interface for generation, editing, upscaling, and LoRA training.", "domaene": "Design & Kreativ", "logoFile": "krea.svg", "logoEinzug": 1 }, { "slug": "liquid-glass-js", "category": "tool", "name": "liquid-glass-js", "teaser": "Open source vanilla JavaScript library for WebGL-based glass effects in the style of Apple's Liquid Glass, delivering genuine multi-layer light refraction instead of CSS blur for buttons and containers.", "domaene": "Design & Kreativ" }, { "slug": "liquid-logo", "category": "tool", "name": "Liquid Logo", "teaser": "Free open source browser tool that turns an uploaded logo into a flowing liquid metal animation via WebGL shaders, exportable as PNG or MP4.", "domaene": "Design & Kreativ" }, { "slug": "magnific", "category": "tool", "name": "Magnific", "teaser": "Node-based creative platform with roughly 30 AI tools for image, video, audio, and 3D, a connected library of more than 250 million licensed assets, and MCP access for AI assistants.", "domaene": "Design & Kreativ", "logoFile": "magnific.svg", "logoEinzug": 0.78 }, { "slug": "midjourney", "category": "tool", "name": "Midjourney", "teaser": "Midjourney is an AI platform for image and video generation valued for its visual quality, best suited as a peripheral tool for moodboards and concept exploration rather than a core building block for SME workflows.", "domaene": "Design & Kreativ", "logoFile": "midjourney.png", "logoEinzug": 0.78 }, { "slug": "napkin-ai", "category": "tool", "name": "Napkin AI", "teaser": "A text-to-diagram tool that turns bullet points or prose into infographics, mind maps, and flowcharts automatically.", "domaene": "Design & Kreativ", "logoFile": "napkin-ai.png", "logoEinzug": 0.78 }, { "slug": "playground-ai", "category": "tool", "name": "Playground AI", "teaser": "Playground AI is an AI image generation and editing platform built around a precise canvas editor for controlled, brand consistent visuals.", "domaene": "Design & Kreativ", "logoFile": "playground-ai.png", "logoEinzug": 1 }, { "slug": "react-three-fiber", "category": "tool", "name": "React Three Fiber", "teaser": "React renderer for Three.js that lets 3D scenes, shader effects, and WebGL content be built as declarative React components, with full, lossless access to the entire Three.js API.", "domaene": "Design & Kreativ", "logoFile": "react-three-fiber.svg", "logoEinzug": 1 }, { "slug": "shadergradient", "category": "tool", "name": "ShaderGradient", "teaser": "React library for animated 3D gradient backgrounds built on WebGL, configurable through typed props or a copyable web URL, with a Figma plugin and Framer component for use outside React.", "domaene": "Design & Kreativ", "logoFile": "shadergradient.png", "logoEinzug": 1 }, { "slug": "stitch", "category": "tool", "name": "Stitch", "teaser": "Stitch is an AI design tool from Google Labs that generates UI wireframes and screen mockups from text descriptions, sketches, or images.", "domaene": "Design & Kreativ", "logoFile": "stitch.png", "logoEinzug": 0.78 }, { "slug": "transitions-dev", "category": "tool", "name": "transitions.dev-Skill", "teaser": "An external repository of ready-to-use, vetted CSS transitions for common UI states, packaged as a skill that AI coding agents can pull directly into a project.", "domaene": "Design & Kreativ" }, { "slug": "email-html-mjml", "category": "skill", "name": "The Email Template", "teaser": "Builds responsive MJML 4.x email templates and compiles them to production-ready HTML, checked against the quirks of Outlook, Gmail, and mobile clients.", "domaene": "Design & Kreativ", "itemIcon": "mails" }, { "slug": "foliengeruest", "category": "skill", "name": "The Slide Deck Framework", "teaser": "Builds a CSS design system first, with colors, typography, spacing and reusable components, from an approved slide structure, a design guideline and an HTML briefing, and only then puts the individual slides on top of it.", "domaene": "Design & Kreativ", "itemIcon": "gallery-vertical-end" }, { "slug": "starwind-ui", "category": "tool", "name": "Starwind UI", "teaser": "Open source Astro component library that copies roughly 40 groups and about 193 individual .astro files into the project as owned, freely customizable source code via CLI, without requiring a React runtime, complemented by skills and an MCP server for AI-assisted workflows.", "domaene": "Design & Kreativ", "logoFile": "starwind-ui.png", "logoEinzug": 0.78 } ] }