{
  "slug": "canvas-design",
  "category": "skill",
  "name": "Das Bildwerk",
  "domaene": "Design & Kreativ",
  "typTags": [
    "gestaltend",
    "generierend",
    "ausführbar"
  ],
  "teaser": "Erstellt als ausführbarer Claude-Skill mit echter Code-Ausführung ein originales visuelles Werk als PDF oder PNG: zunächst eine eigene Design-Philosophie, danach deren museal anmutende Umsetzung mit minimalem, integriertem Text.",
  "hat": {
    "schritte": true,
    "beispiel_szenario": true,
    "ausgabebeispiel": false,
    "konfiguration": false,
    "betrieb": false,
    "arbeitsprompts": false,
    "einrichtung": true,
    "umsetzung": true,
    "export": false,
    "staerken": false,
    "ki_funktionen": false,
    "einschraenkungen": false,
    "weniger_geeignet_fuer": false
  },
  "sections": [
    {
      "id": "beschreibung",
      "title": "Beschreibung",
      "html": "<p>Das Bildwerk ist ein ausführbarer Claude-Skill: Er läuft mit echter Code-Ausführung in Claude Code oder in Claude.ai mit aktivierter Code-Ausführung, nicht als reiner Chat-Prompt. Aus einem Anlass oder Thema entsteht zunächst eine benannte ästhetische Bewegung, in vier bis sechs Absätzen zu Form, Raum, Farbe und Komposition festgehalten, und erst danach das eigentliche Werk: ein einzelnes, stark visuelles PDF oder PNG, in dem Text nur als seltene, essenzielle Geste vorkommt.</p>\n<p>Gedacht ist der Skill für Poster, Editorial-Illustrationen, Einladungen oder andere einseitige visuelle Stücke, bei denen ein fertiges, museal wirkendes Ergebnis gefragt ist, keine Vorlage zum Ausfüllen. Der thematische Bezug wird bewusst subtil eingewoben, wie ein Zitat, das nur erkennt, wer das Original kennt, während alle anderen schlicht eine überzeugende Komposition sehen.</p>\n<p>Die ehrliche Grenze: Der Skill erzeugt originale Kompositionen, niemals Kopien bestehender künstlerischer Arbeiten. Er bewertet die eigene Wirkung nicht objektiv, ein zweiter Verfeinerungsdurchgang gehört fest zum Ablauf, ersetzt aber keine externe Freigabe oder Ihr eigenes Urteil vor der Veröffentlichung.</p>\n"
    },
    {
      "id": "skill-text",
      "title": "Skill-Text",
      "html": "<p>Dies ist ein offen attribuierter externer Skill von Anthropic. Quelle: <a href=\"https://github.com/anthropics/skills\">https://github.com/anthropics/skills</a></p>\n<p>Kopieren Sie die Anleitung unten in Ihre eigene Skill-Umgebung mit Code-Ausführung, wenn Sie diesen Skill selbst einrichten möchten. Sie beschreibt den zweistufigen Ablauf aus Design-Philosophie und visueller Umsetzung. Als Datei: <a href=\"/ai-library/canvas-design.de.json\">canvas-design.de.json</a></p>\n"
    }
  ],
  "schritte": [
    {
      "nr": 1,
      "titel": "Thema und Rahmen angeben",
      "beschreibung": "Thema oder Anlass des Werks, ein optionaler subtiler Bezug sowie Format und Stimmung werden benannt.",
      "rolle": "mensch"
    },
    {
      "nr": 2,
      "titel": "Design-Philosophie entwickeln",
      "beschreibung": "Eine benannte ästhetische Bewegung entsteht in vier bis sechs Absätzen zu Form, Raum, Farbe und Komposition und wird als eigene .md-Datei gespeichert.",
      "rolle": "automatisch"
    },
    {
      "nr": 3,
      "titel": "Werk erstellen und verfeinern",
      "beschreibung": "Das Werk setzt Philosophie und subtilen inhaltlichen Bezug auf einer Fläche um, ein zweiter Durchgang präzisiert die Komposition, statt neue Elemente hinzuzufügen.",
      "rolle": "automatisch"
    },
    {
      "nr": 4,
      "titel": "Fertiges Werk",
      "beschreibung": "Design-Philosophie als .md-Datei und das visuelle Werk als .pdf oder .png liegen vor, bei Bedarf ergänzt um weitere Seiten im selben Duktus.",
      "rolle": "ergebnis"
    },
    {
      "nr": 5,
      "titel": "Prüfen und freigeben",
      "beschreibung": "Das Werk wird vor der Veröffentlichung gegen den ursprünglichen Anlass und die eigene Wirkung geprüft, da der Skill diese Wirkung nicht selbst objektiv beurteilen kann.",
      "rolle": "freigabe"
    }
  ],
  "herausgeber": "Voyage Digital",
  "version": "2.0",
  "stand": "2026-07-26",
  "umsetzung": [
    {
      "titel": "Thema konkret fassen",
      "text": "Ein prägnanter Anlass mit einer optionalen inhaltlichen Referenz liefert die beste Grundlage für die Design-Philosophie."
    },
    {
      "titel": "Code-Ausführung sicherstellen",
      "text": "Der Skill läuft nur in Claude Code oder in Claude.ai mit aktivierter Code-Ausführung, eine reine Chat-Umgebung reicht nicht."
    },
    {
      "titel": "Philosophie zuerst lesen",
      "text": "Die erzeugte .md-Datei zeigt, welche Interpretation das Werk gewählt hat, bevor das fertige Ergebnis geprüft wird."
    },
    {
      "titel": "Zweiten Durchgang abwarten",
      "text": "Der eingebaute Verfeinerungsschritt bringt spürbar mehr Präzision als die erste Fassung."
    },
    {
      "titel": "Vor Veröffentlichung freigeben",
      "text": "Da der Skill die eigene Wirkung nicht objektiv beurteilt, entscheidet vor der Veröffentlichung ein Mensch über die Freigabe."
    }
  ],
  "zutaten": [
    "Thema oder Anlass",
    "Code-Ausführungsumgebung",
    "Format"
  ],
  "beispielSzenario": "Eine Agentur bereitet die Einladung zum zehnjährigen Bestehen eines Kunden vor. Statt einer gewöhnlichen Grafikvorlage entwickelt der Skill zunächst eine eigene, benannte Design-Philosophie zu Form, Raum und Farbe. Das Jubiläum selbst taucht nirgends als Text auf, sondern nur als feine, wiederkehrende Zahlenreihe im Hintergrundmuster. Am Ende liegt eine einseitige .pdf-Einladung vor, die wie ein museales Kunstwerk wirkt, mit dem Anlass als leisem, nur für Eingeweihte erkennbarem Bezug.",
  "eingaben": [
    {
      "feld": "Thema oder Anlass des Werks",
      "pflicht": true
    },
    {
      "feld": "Zugriff auf eine Code-Ausführungsumgebung",
      "pflicht": true
    },
    {
      "feld": "Format",
      "pflicht": false
    },
    {
      "feld": "Stimmung oder Assoziationen",
      "pflicht": false
    }
  ],
  "ausgabe": "Eine eigenständige Design-Philosophie als .md-Datei und ein fertiges visuelles Werk als .pdf oder .png, mit minimalem, integriertem Text und musealer Verarbeitungstiefe.",
  "prompt": "# ROLLE\nSie erstellen originale visuelle Kunstwerke als .png- oder .pdf-Datei, ausgehend von einer eigens entwickelten Design-Philosophie. Sie kopieren niemals die Arbeit bestehender Künstlerinnen und Künstler, um Urheberrechtsverletzungen auszuschließen. Der Ablauf hat zwei Schritte: zuerst die Design-Philosophie als .md-Datei, danach deren visuelle Umsetzung als .pdf- oder .png-Datei.\n\n# SCHRITT 1: DESIGN-PHILOSOPHIE ENTWICKELN\nEntwickeln Sie eine visuelle Philosophie, keine fertige Vorlage. Was Sie erhalten, ist ein knapper inhaltlicher Anstoß, der als Grundlage dient, die kreative Freiheit aber nicht einschränken soll. Was Sie erzeugen, ist eine Design-Philosophie, eine ästhetische Bewegung. Der nächste Schritt setzt genau diese Philosophie visuell um, mit einem Werk, das zu etwa neunzig Prozent aus visueller Gestaltung und zu zehn Prozent aus essenziellem Text besteht.\n\nBenennen Sie die Bewegung in ein bis zwei Worten. Formulieren Sie die Philosophie in vier bis sechs substanziellen Absätzen: wie sie sich durch Raum und Form, Farbe und Material, Maßstab und Rhythmus, Komposition und Balance sowie visuelle Hierarchie ausdrückt.\n\nWichtige Leitplanken:\n- Vermeiden Sie Redundanz. Jeder gestalterische Aspekt wird einmal benannt, nicht wiederholt, außer er gewinnt dadurch echte zusätzliche Tiefe.\n- Betonen Sie wiederholt die handwerkliche Tiefe: Das Ergebnis soll wirken, als hätte es unzählige Stunden gekostet, mit Sorgfalt gearbeitet von jemandem an der Spitze seines Fachs. Formulierungen wie mit größter Sorgfalt gestaltet, Ergebnis tiefer Fachkenntnis, meisterhafte Ausführung gehören bewusst wiederholt in die Philosophie.\n- Lassen Sie kreativen Raum. Bleiben Sie in der ästhetischen Richtung konkret, aber knapp genug, dass die visuelle Umsetzung eigene Interpretationsentscheidungen treffen kann, auf durchgehend hohem handwerklichem Niveau.\n\nDie Philosophie führt zur visuellen statt zur textlichen Vermittlung von Ideen. Information lebt im Design, nicht im Fließtext. Halten Sie die Philosophie generisch, ohne die eigentliche Absicht des Werks zu benennen, damit sie überall einsetzbar bleibt. Speichern Sie sie als .md-Datei.\n\n# SCHRITT 2: DEN SUBTILEN BEZUG HERAUSARBEITEN\nBevor Sie das Werk erstellen, identifizieren Sie den feinen inhaltlichen Faden aus der ursprünglichen Anfrage. Das Thema ist ein feiner, unaufdringlich eingewobener Bezug, nicht immer wörtlich, aber immer anspruchsvoll umgesetzt. Wer mit dem Thema vertraut ist, soll es intuitiv spüren, alle anderen erleben schlicht eine meisterhafte, abstrakte Komposition. Die Design-Philosophie liefert die ästhetische Sprache, der herausgearbeitete Bezug liefert die Seele: die leise konzeptionelle Grundierung in Form, Farbe und Komposition. Der Bezug muss so verfeinert sein, dass er die Tiefe des Werks erhöht, ohne sich anzukündigen, ähnlich einem Musiker, der ein anderes Stück zitiert: nur wer es kennt, erkennt es, alle anderen genießen schlicht die Musik.\n\n# SCHRITT 3: DAS WERK ERSTELLEN\nSetzen Sie Philosophie und herausgearbeiteten Bezug gemeinsam auf einer Fläche um. Auch bei Themen aus Film, Spiel oder Buch bleibt die Umsetzung anspruchsvoll, niemals comichaft oder amateurhaft.\n\nErzeugen Sie, sofern nicht mehr Seiten verlangt sind, eine einzelne, stark visuelle, gestaltungsgetriebene PDF- oder PNG-Ausgabe. Nutzen Sie meist wiederkehrende Muster und exakte Formen. Behandeln Sie die abstrakte philosophische Gestaltung wie ein wissenschaftliches Grundlagenwerk: dichte Anhäufung von Markierungen, wiederholte Elemente oder geschichtete Muster, die Bedeutung durch geduldige Wiederholung aufbauen und wiederholtes Betrachten belohnen. Ergänzen Sie karge, klinische Typografie und systematische Referenzmarkierungen, die an ein Diagramm aus einer imaginären Disziplin erinnern, und behandeln Sie das unsichtbare Thema mit derselben Ehrfurcht, die sonst der Dokumentation beobachtbarer Phänomene vorbehalten ist. Verankern Sie das Werk mit einer oder wenigen, subtil platzierten Formulierungen, in einer begrenzten, stimmigen Farbpalette.\n\nText ist immer minimal und visuell geprägt, aber der Kontext entscheidet, ob das flüsterleise Beschriftungen oder mutige typografische Gesten bedeutet. Meist sollte die Schrift dünn sein. Jede Typografie muss gestaltungsgetrieben sein und die visuelle Kommunikation priorisieren. Unabhängig von der Textgröße darf nichts über den Rand hinausragen und nichts sich überlappen. Jedes Element bleibt innerhalb der Leinwandgrenzen mit sauberem Rand, das ist für eine professionelle Ausführung nicht verhandelbar. Nutzen Sie bei Bedarf unterschiedliche Schriftarten aus dem Verzeichnis ./canvas-fonts, bringen Sie bei abstrakten Werken die Schrift wo sinnvoll direkt auf die Fläche, statt sie rein digital zu setzen.\n\nFolgen Sie dem gestalterischen Instinkt innerhalb der Philosophie, mit voller kreativer Freiheit, an der Grenze des gestalterisch Machbaren.\n\nUm handgefertigt statt KI-generiert wirkende Qualität zu erreichen: Das Werk soll wirken, als hätte es unzählige Stunden gekostet, ausgeführt von jemandem an der Spitze seines Fachs, mit peinlich genauer Sorgfalt in jedem Detail. Prüfen Sie doppelt, dass sich nichts überlappt, die Formatierung makellos ist und jedes Detail stimmt.\n\nLiefern Sie das Endergebnis als einzelne herunterladbare .pdf- oder .png-Datei, zusammen mit der verwendeten Design-Philosophie als .md-Datei.\n\n# SCHRITT 4: VERFEINERUNG\nGehen Sie davon aus, dass die erste Fassung noch nicht makellos genug ist. Vermeiden Sie es, weitere grafische Elemente hinzuzufügen, verfeinern Sie stattdessen das Bestehende, machen Sie es außergewöhnlich klar und respektieren Sie dabei die Design-Philosophie und die Prinzipien des Minimalismus vollständig. Statt einen verspielten Filter aufzulegen oder eine Schriftart auszutauschen, fragen Sie sich bei jedem Impuls, eine neue Form oder Funktion hinzuzufügen: Wie lässt sich das Bestehende noch mehr zu einem Kunstwerk machen? Nehmen Sie einen zweiten Durchgang vor und verfeinern Sie weiter, bis das Werk philosophisch durchdacht und museumsreif wirkt.\n\n# MEHRSEITIGE OPTION\nAuf Wunsch entstehen weitere Seiten entlang derselben Philosophie, jede deutlich eigenständig. Bündeln Sie diese Seiten in derselben .pdf-Datei oder als mehrere .png-Dateien. Behandeln Sie die erste Seite wie eine einzelne Seite eines ganzen Bildbands, der noch gefüllt werden will, lassen Sie die folgenden Seiten eigene Varianten und Erinnerungen an das Original sein, mit voller kreativer Freiheit.\n\n# DEFINITION OF DONE\n[ ] Design-Philosophie als eigene .md-Datei, vier bis sechs Absätze, mit wiederholter Betonung handwerklicher Tiefe\n[ ] Subtiler inhaltlicher Bezug herausgearbeitet, ohne sich aufzudrängen\n[ ] Werk als einzelne .pdf- oder .png-Datei, überwiegend visuell, minimaler integrierter Text\n[ ] Nichts überlappt, nichts ragt über den Rand hinaus, durchgängiger Rand eingehalten\n[ ] Zweiter Verfeinerungsdurchgang durchgeführt, ohne neue Elemente hinzuzufügen\n[ ] Bei mehreren Seiten: jede Seite eigenständig, im selben philosophischen Duktus\n\n# ABHÄNGIGKEITEN\nCode-Ausführungsumgebung (Claude Code oder Claude.ai mit aktivierter Code-Ausführung), Zugriff auf das Schriftartenverzeichnis ./canvas-fonts.",
  "einrichtung": {
    "intro": "Schritt-für-Schritt-Anleitungen für ChatGPT, Claude, Copilot Studio und Langdock.",
    "plattformen": [
      {
        "plattform": "ChatGPT",
        "anbieter": "OpenAI",
        "schritte": [
          "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.",
          "Klicken Sie auf Ihr Profilbild und wählen Sie „Skills“.",
          "Klicken Sie auf „Skill erstellen“ und fügen Sie den kopierten Text als Anweisung ein.",
          "Passen Sie Eingaben, Ausgaben und Format an, wo es für Ihren Fall nötig ist.",
          "Speichern Sie den Skill. Er steht ab sofort in allen Chats zur Verfügung."
        ],
        "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": [
          "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.",
          "Öffnen Sie claude.ai und gehen Sie in Ihrem Profil auf „Skills“.",
          "Legen Sie einen neuen Skill an und fügen Sie den kopierten Text als Anweisung ein.",
          "Der Skill arbeitet in claude.ai, in Claude Code und über die API.",
          "Verfügbar in den Tarifen Pro, Max, Team und Enterprise."
        ],
        "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": [
          "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.",
          "Öffnen Sie Copilot Studio und legen Sie einen neuen Agent an.",
          "Fügen Sie den kopierten Text als Anweisung ein.",
          "Verbinden Sie bei Bedarf Wissensquellen und Werkzeuge.",
          "Veröffentlichen Sie den Agent für sich selbst oder für Ihre 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": [
          "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.",
          "Öffnen Sie die Seitenleiste und klicken Sie auf „Skill hinzufügen“.",
          "Fügen Sie den kopierten Text direkt als Anweisung ein.",
          "Verbinden Sie den Skill bei Bedarf mit Integrationen, etwa Gmail oder Slack.",
          "Speichern Sie den Skill und geben Sie ihn für sich oder Ihr Team frei."
        ],
        "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": "Adobes KI-Plattform für Bild, Video, Audio und Vektor-Generierung, nativ eingebettet in Photoshop, Illustrator, Express und Premiere.",
      "domaene": "Design & Kreativ",
      "logoFile": "adobe-firefly.png",
      "logoEinzug": 0.78
    },
    {
      "slug": "canva",
      "category": "tool",
      "name": "Canva",
      "teaser": "Eine breit genutzte Design-Plattform, mit der auch Teams ohne Design-Hintergrund Social-Media-Posts, Präsentationen und andere visuelle Inhalte erstellen.",
      "domaene": "Design & Kreativ",
      "logoFile": "canva.png",
      "logoEinzug": 1
    },
    {
      "slug": "claude-design",
      "category": "tool",
      "name": "Claude Design",
      "teaser": "KI-gestütztes Design-Werkzeug von Anthropic Labs, das beim Onboarding ein bestehendes Design-System einliest und fertige Entwürfe per Handoff-Bundle direkt an einen Coding-Agenten übergibt.",
      "domaene": "Design & Kreativ",
      "logoFile": "claude-design.svg",
      "logoEinzug": 1
    },
    {
      "slug": "comfyui",
      "category": "tool",
      "name": "ComfyUI",
      "teaser": "Node-basierter Open-Source-Editor für Bild-, Video- und 3D-Generierungs-Pipelines, mit voller Kontrolle über Sampler, Modelle und einzelne Verarbeitungsschritte.",
      "domaene": "Design & Kreativ",
      "logoFile": "comfyui.svg",
      "logoEinzug": 1
    },
    {
      "slug": "fireworks-tech-graph",
      "category": "tool",
      "name": "fireworks-tech-graph",
      "teaser": "Open-Source-Werkzeug zur bilingualen Generierung produktionsreifer technischer SVG- und PNG-Diagramme aus natürlichsprachigen Beschreibungen, mit UML- und KI-Architektur-Mustern.",
      "domaene": "Design & Kreativ"
    },
    {
      "slug": "freepik",
      "category": "tool",
      "name": "Freepik",
      "teaser": "All in One Plattform für KI Bild, Video und Audio mit Zugang zu über 30 Modellen sowie einer großen Stock Bibliothek mit kommerzieller Lizenz.",
      "domaene": "Design & Kreativ",
      "logoFile": "freepik.svg",
      "logoEinzug": 0.78
    },
    {
      "slug": "krea",
      "category": "tool",
      "name": "Krea",
      "teaser": "Web-Plattform und API, die mehr als 40 KI-Bild- und Videomodelle verschiedener Anbieter, darunter Flux, Veo 3 und Kling, in einer gemeinsamen Oberfläche für Generierung, Editing, Upscaling und LoRA-Training bündelt.",
      "domaene": "Design & Kreativ",
      "logoFile": "krea.svg",
      "logoEinzug": 1
    },
    {
      "slug": "liquid-glass-js",
      "category": "tool",
      "name": "liquid-glass-js",
      "teaser": "Quelloffene Vanilla-JavaScript-Bibliothek für WebGL-basierte Glaseffekte im Stil von Apples Liquid Glass, mit echter Multi-Layer-Lichtbrechung statt CSS-Unschärfe für Buttons und Container.",
      "domaene": "Design & Kreativ"
    },
    {
      "slug": "liquid-logo",
      "category": "tool",
      "name": "Liquid Logo",
      "teaser": "Kostenloses Open-Source-Browser-Tool, das aus einem hochgeladenen Logo per WebGL-Shader eine fließende Liquid-Metal-Animation erzeugt und wahlweise als PNG oder MP4 exportiert.",
      "domaene": "Design & Kreativ"
    },
    {
      "slug": "magnific",
      "category": "tool",
      "name": "Magnific",
      "teaser": "Node-basierte Kreativplattform mit rund 30 KI-Werkzeugen für Bild, Video, Audio und 3D, einer angebundenen Lizenz-Bibliothek von über 250 Millionen Assets und MCP-Zugriff für KI-Assistenten.",
      "domaene": "Design & Kreativ",
      "logoFile": "magnific.svg",
      "logoEinzug": 0.78
    },
    {
      "slug": "midjourney",
      "category": "tool",
      "name": "Midjourney",
      "teaser": "KI-Plattform für Bild und Video-Generierung mit hoher ästhetischer Qualität, inklusive Moodboards und Personalization für konsistente Markenwelten.",
      "domaene": "Design & Kreativ",
      "logoFile": "midjourney.png",
      "logoEinzug": 0.78
    },
    {
      "slug": "napkin-ai",
      "category": "tool",
      "name": "Napkin AI",
      "teaser": "Text-zu-Diagramm-Tool, das aus Stichpunkten oder Fließtext automatisch Infografiken, Mindmaps und Flowcharts erzeugt.",
      "domaene": "Design & Kreativ",
      "logoFile": "napkin-ai.png",
      "logoEinzug": 0.78
    },
    {
      "slug": "playground-ai",
      "category": "tool",
      "name": "Playground AI",
      "teaser": "KI Bildgenerierungs- und Bearbeitungsplattform mit Canvas Editor, mehreren Modellen und Style Training für konsistente Marken Visuals.",
      "domaene": "Design & Kreativ",
      "logoFile": "playground-ai.png",
      "logoEinzug": 1
    },
    {
      "slug": "react-three-fiber",
      "category": "tool",
      "name": "React Three Fiber",
      "teaser": "React-Renderer für Three.js, mit dem sich 3D-Szenen, Shader-Effekte und WebGL-Content als deklarative React-Komponenten aufbauen lassen, bei vollem, verlustfreiem Zugriff auf die komplette Three.js-API.",
      "domaene": "Design & Kreativ",
      "logoFile": "react-three-fiber.svg",
      "logoEinzug": 1
    },
    {
      "slug": "shadergradient",
      "category": "tool",
      "name": "ShaderGradient",
      "teaser": "React-Bibliothek für animierte 3D-Gradient-Hintergründe auf WebGL-Basis, konfigurierbar über typisierte Props oder eine kopierbare Web-URL, mit Figma-Plugin und Framer-Komponente für den Einsatz außerhalb von React.",
      "domaene": "Design & Kreativ",
      "logoFile": "shadergradient.png",
      "logoEinzug": 1
    },
    {
      "slug": "stitch",
      "category": "tool",
      "name": "Stitch",
      "teaser": "KI-Design-Tool von Google Labs, das aus Textbeschreibungen, Skizzen oder Bildern UI-Wireframes und mehrstufige Screen-Flows erzeugt, mit Export nach Figma oder als Frontend-Code.",
      "domaene": "Design & Kreativ",
      "logoFile": "stitch.png",
      "logoEinzug": 0.78
    },
    {
      "slug": "transitions-dev",
      "category": "tool",
      "name": "transitions.dev-Skill",
      "teaser": "Externes Repository mit zwölf geprüften, portablen CSS-Übergängen für Standard-UI-Zustände (Modal, Dropdown, Erfolg, Fehler u. a.), gepackt als Skill für KI-Coding-Agenten.",
      "domaene": "Design & Kreativ"
    },
    {
      "slug": "email-html-mjml",
      "category": "skill",
      "name": "Das E-Mail-Muster",
      "teaser": "Erstellt responsive MJML-4.x-E-Mail-Vorlagen und kompiliert sie zu produktionsreifem, client-geprüftem HTML für Outlook, Gmail, Apple Mail und mobile Clients, inklusive Dark-Mode-Muster und Barrierefreiheits-Checkliste.",
      "domaene": "Design & Kreativ",
      "itemIcon": "mails"
    },
    {
      "slug": "foliengeruest",
      "category": "skill",
      "name": "Das Foliengerüst",
      "teaser": "Baut aus freigegebener Folienstruktur, Design-Guideline und HTML-Briefing zuerst ein Designsystem in CSS mit Farben, Typografie, Abständen und wiederverwendbaren Komponenten und setzt die einzelnen Folien erst danach darauf auf.",
      "domaene": "Design & Kreativ",
      "itemIcon": "gallery-vertical-end"
    },
    {
      "slug": "starwind-ui",
      "category": "tool",
      "name": "Starwind UI",
      "teaser": "Quelloffene Astro-Komponentenbibliothek, die rund 40 Gruppen mit etwa 193 einzelnen .astro-Dateien als eigenen, frei anpassbaren Quellcode per CLI ins Projekt kopiert, ohne React-Laufzeit vorauszusetzen, ergänzt um Skills und einen MCP-Server für KI-gestützte Workflows.",
      "domaene": "Design & Kreativ",
      "logoFile": "starwind-ui.png",
      "logoEinzug": 0.78
    }
  ]
}