Why we love this skill
Diese Funktion wandelt Code in schön hervorgehobene Bilder um, simuliert eine Terminaloberfläche und unterstützt hochauflösende Downloads. Damit ist sie ein ideales Werkzeug für Entwickler, um Code-Snippets zu teilen.
Anweisungen
Als erfahrener Frontend-Entwickler müssen Sie alle Code-Snippets im Inhalt in hervorgehobene Bilder umwandeln. Es ist entscheidend, alle Code-Snippets zu extrahieren! Beachten Sie, dass Code, der strikt in Markdown-Backticks (``) eingeschlossen ist, als ein einzelnes Snippet behandelt werden sollte. Achten Sie besonders auf JSX-Code. Behandeln Sie JS-Syntax für die Hervorhebung wie JSX-Syntax.
Farbschema: Dunkelgrau dient als Haupthintergrundfarbe. Codeblöcke verwenden einen dunklen Hintergrund mit farbigen Codehervorhebungen (Cyan und Hellgrün sind die wichtigsten Hervorhebungsfarben).
Layout: Die Codeblöcke simulieren das Erscheinungsbild eines Terminals/Codeeditors, jedoch wurden die Schaltflächen am oberen Rand entfernt, sodass nur der Code angezeigt wird. Jede Karte hat einen oberen und unteren Abstand von 15 Pixeln sowie einen linken und rechten Abstand von 25 Pixeln.
Technische Umsetzung: Layout und Styling basieren auf HTML5 und CSS (Codeblöcke sind farbig hervorgehoben); die Funktion `dom-to-image-more` ist integriert. Die Adresse des Skripts lautet https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Es ermöglicht das Herunterladen einzelner Bilder (Button unterhalb der Karte, Bilder müssen hochauflösend sein) und das Herunterladen aller Bilder mit einem Klick (nach dem Klicken eine Sekunde warten, bevor die Bilder nacheinander heruntergeladen werden). Vermeiden Sie unnötige Backticks (`\`) im Code, da dies zu Fehlern führen kann.
Bei der Umsetzung beachten Sie bitte Folgendes: Halten Sie die Deckkarte schlicht. Verwenden Sie keine Pseudo-Elemente für Icons, sondern direkt SVG. Heruntergeladene Bilder sollten hochauflösend sein und einen Maßstab von 2 haben. Benennen Sie die Bilder fortlaufend mit Nummern.
description
Wandeln Sie den gesamten Code im Artikel in Bilder um und laden Sie diese mit einem Klick herunter.
Related Skills
View all
ProduktFilmPromptGen
Dieses Tool unterstützt Nutzer bei der Erstellung von Werbefilmen in Kinoqualität für ihre Produkte. Basierend auf den von Ihnen bereitgestellten Produktinformationen generiert es intelligent eine umfassende Sammlung hochwertiger KI-gestützter Filmvorlagen – darunter Storyboard- und Poster-Vorlagen sowie Videogenerierungsvorschläge. Damit ist es ideal für Markenverantwortliche und Kreative, die ihr Publikum durch Atmosphäre und Emotionen statt durch Produktspezifikationen erreichen möchten. Durch die detaillierte Analyse von Produkteigenschaften und Markenton bestimmt das Tool Rhythmus, visuelles System (Farbpalette, Hauptfigur) und entwirft eine 12-teilige Sequenz mit einem vollständigen emotionalen Bogen. Es arbeitet nach dem Prinzip „geringe Informationsdichte, hohe emotionale Dichte“ – der Fokus liegt auf Licht, Atmosphäre und Textur statt auf der direkten Produktpräsentation. Nutzer geben lediglich grundlegende Informationen wie Produkttyp und Markenname an. Das Tool vervollständigt oder generiert dann automatisch fehlende Markenslogans und wählt die passendsten Beschreibungen aus einer umfangreichen Keyword-Bibliothek aus, um sowohl spezifische als auch künstlerisch ansprechende Vorlagen zu erstellen. Das Endergebnis umfasst eine detaillierte Produktanalyse sowie zwei eigenständige, sofort einsatzbereite Vorlagen für KI-gestützte Bild- und Videogenerierungstools – so wird die Erstellung fesselnder Marken-Inhalte zum Kinderspiel.
AI Color Stylist Pro
Professionelle Farbanalyse nach 4000-RMB-Standard mit 14 Modulen (präzise Bestimmung des 12-Jahreszeiten-Typs, Hauttonanalyse, Make-up-Tipps, Haarfarben- und Frisurenanalyse, Halsanalyse, Accessoire-Analyse u. v. m.). Das Ergebnis ist ein interaktiver Web-Bericht mit allen visualisierten Farben, inklusive spezifischer Marken-Nuancen und Einkaufslisten. 🎨 AI Color Stylist Pro – Professionelle Farbanalyse ✨ Vergleichbar mit einer professionellen Offline-Analyse für 4000 RMB, jetzt nur 99 Credits! 🎉 Zeitlich begrenztes Frühbucherangebot! Preisstaffelung: • Erste 10 Nutzer: 99 Credits ✨ (Aktueller Preis) • 11–100 Nutzer: 199 Credits • 101–200 Nutzer: 299 Credits • Ab 201 Nutzern: 399 Credits ⏰ Der Preis steigt automatisch mit der Nutzerzahl. Jetzt zugreifen und profitieren! ━━━━━━━━━━━━━━━━━━━━━ 📊 14 wichtige Module zur professionellen Analyse ✅ Präzise Zuordnung zu den zwölf Jahreszeiten (Warmer Frühling/Heller Frühling/Sanfter Frühling, Leichter Sommer/Kühler Sommer/Sanfter Sommer, Warmer Herbst/Sanfter Herbst/Spätherbst, Kühler Winter/Spätwinter/Heller Winter) ✅ Vollständige Farbkarte (20–30 Kernfarben mit HEX-Farbtönen) ✅ Make-up-Farbschemata (Foundation/Augenbrauen/Lidschatten/Rouge/Lippenstift, spezifische Markenfarben) ✅ Vorschläge für Frisuren und Haarfarben (Empfehlungen für Haarfarbe, Frisur und Pony) ✅ Kombinationsschemata für Kleidung (Farbabstimmungsformeln, Artikelempfehlungen, Ausschnittanalyse) ✅ Detaillierte Accessoire-Analyse (Metallic-Farben, Edelsteine, Ohrringe, Halsketten, Taschen, Brillen) ✅ Einkaufsliste (Marken + Farbtöne + Preisspanne) ✅ 3 komplette Outfit-Beispiele ━━━━━━━━━━━━━━━━━━━━━━ 🌟 Präsentiert in einem ansprechend gestalteten interaktiven Web-Report: • Visuelle Darstellung aller Farben • Farbverlauf im Hintergrund + Kartenlayout • Responsives Design, perfekt angepasst an Mobiltelefone und Computer • Teilen, Speichern und Drucken ━━━━━━━━━━━━━━━━━━━━ 👥 Zielgruppe • Alle, die ihr persönliches Image verbessern möchten • Alle, die sich bei der Farbauswahl unsicher sind Farben für Kleidung • Für alle, die die passende Make-up- und Haarfarbe suchen • Für alle, die sich auf den Saison-Einkauf vorbereiten und professionelle Beratung benötigen • Für alle, die ihren Farbtyp bestimmen möchten ━━━━━━━━━━━━━━━━━━━━ 💡 So funktioniert's: 1. Laden Sie ein Frontalfoto bei natürlichem Licht hoch (oder eine Textbeschreibung Ihres Aussehens). 2. Beantworten Sie einige einfache Multiple-Choice-Fragen. 3. Die KI führt eine professionelle Analyse anhand von 14 Modulen durch. 4. Sie erhalten einen ansprechend gestalteten, webbasierten Diagnosebericht. 5. Sie erhalten eine vollständige Einkaufsliste und Styling-Vorschläge. ━━━━━━━━━━━━━━━━━━━━ 🎁 Frühbucherrabatt Exklusive Vorteile Die ersten 10 Nutzer erhalten zusätzlich: • Eine kostenlose Folgeberatung • Exklusiven Farbabstimmungs-PDF-Leitfaden • Vorrangigen Zugriff auf zukünftige Upgrades ⏰ Zeitlich begrenztes Angebot, solange der Vorrat reicht!
Zeitbuchstabengenerator
Verwandeln Sie einen modernen, umgangssprachlichen Satz in einen Brieftext in verschiedenen Stilrichtungen (Überweisungsbriefe von Auslandschinesen/Republik China/1970er/1990er/Millennium) und generieren Sie entsprechende visuelle Bilder von handgeschriebenen Briefpapieren.
Code zu Bild
Why we love this skill
Diese Funktion wandelt Code in schön hervorgehobene Bilder um, simuliert eine Terminaloberfläche und unterstützt hochauflösende Downloads. Damit ist sie ein ideales Werkzeug für Entwickler, um Code-Snippets zu teilen.
Anweisungen
Als erfahrener Frontend-Entwickler müssen Sie alle Code-Snippets im Inhalt in hervorgehobene Bilder umwandeln. Es ist entscheidend, alle Code-Snippets zu extrahieren! Beachten Sie, dass Code, der strikt in Markdown-Backticks (``) eingeschlossen ist, als ein einzelnes Snippet behandelt werden sollte. Achten Sie besonders auf JSX-Code. Behandeln Sie JS-Syntax für die Hervorhebung wie JSX-Syntax.
Farbschema: Dunkelgrau dient als Haupthintergrundfarbe. Codeblöcke verwenden einen dunklen Hintergrund mit farbigen Codehervorhebungen (Cyan und Hellgrün sind die wichtigsten Hervorhebungsfarben).
Layout: Die Codeblöcke simulieren das Erscheinungsbild eines Terminals/Codeeditors, jedoch wurden die Schaltflächen am oberen Rand entfernt, sodass nur der Code angezeigt wird. Jede Karte hat einen oberen und unteren Abstand von 15 Pixeln sowie einen linken und rechten Abstand von 25 Pixeln.
Technische Umsetzung: Layout und Styling basieren auf HTML5 und CSS (Codeblöcke sind farbig hervorgehoben); die Funktion `dom-to-image-more` ist integriert. Die Adresse des Skripts lautet https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Es ermöglicht das Herunterladen einzelner Bilder (Button unterhalb der Karte, Bilder müssen hochauflösend sein) und das Herunterladen aller Bilder mit einem Klick (nach dem Klicken eine Sekunde warten, bevor die Bilder nacheinander heruntergeladen werden). Vermeiden Sie unnötige Backticks (`\`) im Code, da dies zu Fehlern führen kann.
Bei der Umsetzung beachten Sie bitte Folgendes: Halten Sie die Deckkarte schlicht. Verwenden Sie keine Pseudo-Elemente für Icons, sondern direkt SVG. Heruntergeladene Bilder sollten hochauflösend sein und einen Maßstab von 2 haben. Benennen Sie die Bilder fortlaufend mit Nummern.
description
Wandeln Sie den gesamten Code im Artikel in Bilder um und laden Sie diese mit einem Klick herunter.
Related Skills
View allProduktFilmPromptGen
Dieses Tool unterstützt Nutzer bei der Erstellung von Werbefilmen in Kinoqualität für ihre Produkte. Basierend auf den von Ihnen bereitgestellten Produktinformationen generiert es intelligent eine umfassende Sammlung hochwertiger KI-gestützter Filmvorlagen – darunter Storyboard- und Poster-Vorlagen sowie Videogenerierungsvorschläge. Damit ist es ideal für Markenverantwortliche und Kreative, die ihr Publikum durch Atmosphäre und Emotionen statt durch Produktspezifikationen erreichen möchten. Durch die detaillierte Analyse von Produkteigenschaften und Markenton bestimmt das Tool Rhythmus, visuelles System (Farbpalette, Hauptfigur) und entwirft eine 12-teilige Sequenz mit einem vollständigen emotionalen Bogen. Es arbeitet nach dem Prinzip „geringe Informationsdichte, hohe emotionale Dichte“ – der Fokus liegt auf Licht, Atmosphäre und Textur statt auf der direkten Produktpräsentation. Nutzer geben lediglich grundlegende Informationen wie Produkttyp und Markenname an. Das Tool vervollständigt oder generiert dann automatisch fehlende Markenslogans und wählt die passendsten Beschreibungen aus einer umfangreichen Keyword-Bibliothek aus, um sowohl spezifische als auch künstlerisch ansprechende Vorlagen zu erstellen. Das Endergebnis umfasst eine detaillierte Produktanalyse sowie zwei eigenständige, sofort einsatzbereite Vorlagen für KI-gestützte Bild- und Videogenerierungstools – so wird die Erstellung fesselnder Marken-Inhalte zum Kinderspiel.
AI Color Stylist Pro
Professionelle Farbanalyse nach 4000-RMB-Standard mit 14 Modulen (präzise Bestimmung des 12-Jahreszeiten-Typs, Hauttonanalyse, Make-up-Tipps, Haarfarben- und Frisurenanalyse, Halsanalyse, Accessoire-Analyse u. v. m.). Das Ergebnis ist ein interaktiver Web-Bericht mit allen visualisierten Farben, inklusive spezifischer Marken-Nuancen und Einkaufslisten. 🎨 AI Color Stylist Pro – Professionelle Farbanalyse ✨ Vergleichbar mit einer professionellen Offline-Analyse für 4000 RMB, jetzt nur 99 Credits! 🎉 Zeitlich begrenztes Frühbucherangebot! Preisstaffelung: • Erste 10 Nutzer: 99 Credits ✨ (Aktueller Preis) • 11–100 Nutzer: 199 Credits • 101–200 Nutzer: 299 Credits • Ab 201 Nutzern: 399 Credits ⏰ Der Preis steigt automatisch mit der Nutzerzahl. Jetzt zugreifen und profitieren! ━━━━━━━━━━━━━━━━━━━━━ 📊 14 wichtige Module zur professionellen Analyse ✅ Präzise Zuordnung zu den zwölf Jahreszeiten (Warmer Frühling/Heller Frühling/Sanfter Frühling, Leichter Sommer/Kühler Sommer/Sanfter Sommer, Warmer Herbst/Sanfter Herbst/Spätherbst, Kühler Winter/Spätwinter/Heller Winter) ✅ Vollständige Farbkarte (20–30 Kernfarben mit HEX-Farbtönen) ✅ Make-up-Farbschemata (Foundation/Augenbrauen/Lidschatten/Rouge/Lippenstift, spezifische Markenfarben) ✅ Vorschläge für Frisuren und Haarfarben (Empfehlungen für Haarfarbe, Frisur und Pony) ✅ Kombinationsschemata für Kleidung (Farbabstimmungsformeln, Artikelempfehlungen, Ausschnittanalyse) ✅ Detaillierte Accessoire-Analyse (Metallic-Farben, Edelsteine, Ohrringe, Halsketten, Taschen, Brillen) ✅ Einkaufsliste (Marken + Farbtöne + Preisspanne) ✅ 3 komplette Outfit-Beispiele ━━━━━━━━━━━━━━━━━━━━━━ 🌟 Präsentiert in einem ansprechend gestalteten interaktiven Web-Report: • Visuelle Darstellung aller Farben • Farbverlauf im Hintergrund + Kartenlayout • Responsives Design, perfekt angepasst an Mobiltelefone und Computer • Teilen, Speichern und Drucken ━━━━━━━━━━━━━━━━━━━━ 👥 Zielgruppe • Alle, die ihr persönliches Image verbessern möchten • Alle, die sich bei der Farbauswahl unsicher sind Farben für Kleidung • Für alle, die die passende Make-up- und Haarfarbe suchen • Für alle, die sich auf den Saison-Einkauf vorbereiten und professionelle Beratung benötigen • Für alle, die ihren Farbtyp bestimmen möchten ━━━━━━━━━━━━━━━━━━━━ 💡 So funktioniert's: 1. Laden Sie ein Frontalfoto bei natürlichem Licht hoch (oder eine Textbeschreibung Ihres Aussehens). 2. Beantworten Sie einige einfache Multiple-Choice-Fragen. 3. Die KI führt eine professionelle Analyse anhand von 14 Modulen durch. 4. Sie erhalten einen ansprechend gestalteten, webbasierten Diagnosebericht. 5. Sie erhalten eine vollständige Einkaufsliste und Styling-Vorschläge. ━━━━━━━━━━━━━━━━━━━━ 🎁 Frühbucherrabatt Exklusive Vorteile Die ersten 10 Nutzer erhalten zusätzlich: • Eine kostenlose Folgeberatung • Exklusiven Farbabstimmungs-PDF-Leitfaden • Vorrangigen Zugriff auf zukünftige Upgrades ⏰ Zeitlich begrenztes Angebot, solange der Vorrat reicht!
Zeitbuchstabengenerator
Verwandeln Sie einen modernen, umgangssprachlichen Satz in einen Brieftext in verschiedenen Stilrichtungen (Überweisungsbriefe von Auslandschinesen/Republik China/1970er/1990er/Millennium) und generieren Sie entsprechende visuelle Bilder von handgeschriebenen Briefpapieren.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
