Code zu Bild
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://youmind.club/__ext/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.
Beschreibung
Warum wir diese Fähigkeit empfehlen
Dieser Skill wandelt Code in schön hervorgehobene Bilder um, simuliert eine Terminal-Oberfläche und unterstützt das Herunterladen in hoher Auflösung. Er ist das ideale Werkzeug für Entwickler, um Codeausschnitte zu teilen.
Konvertieren Sie den gesamten Code im Artikel in Bilder und laden Sie ihn mit einem Klick herunter.
Ähnliche Fähigkeiten
Alle anzeigen
Bild小小东 x Siebdruckgrafik x P086
Panel 086 lässt nur 3–5 visuelle Informationen übrig, die das Bild tragen. Mit Silhouetten, geometrischen Formen und klaren Farbflächen wird das Motiv neu gestaltet. Anschließend erzeugen 2–4 aus dem Foto abgeleitete Sonderfarben, Dry-Brush- und Brayer-Texturen, dragged ink, broken ink und ungleichmäßige Deckung einen Siebdruck im Stil des Mid-Century-Modernismus. Die Komposition strebt stets einen klaren Fokus, eine Hauptrichtung und einen bedeutungsvollen Bereich von Leerraum an. Geeignet für diese Fälle Mehr visuelle Ordnung im Foto: Nur 3–5 zentrale visuelle Informationen bleiben erhalten; Silhouetten, geometrische Formen und Farbflächen schaffen einen klaren Fokus. Authentische Druckgrafik-Textur: Trockenpinsel, gerollte Farbe, horizontal gezogene Farbe, ausgesparte Stellen, gebrochene Farbe und ungleichmäßige Deckung werden zur Bildsprache. Lebendige, aber zurückhaltende Farben: Die ausdrucksstärksten Farbbeziehungen des Originals werden auf 2–4 Sonderfarben reduziert, während Papiergrund und Leerraum aktiv an der Komposition beteiligt werden. Flexible Ausgabe: Unterstützt Hoch- und Querformat, reine Designs, mehrere Seitenverhältnisse und vierseitige Wallpaper. Auch Bildverzeichnisse können stapelweise verarbeitet werden.
Bild小小东 x Linien & Punkte P084
Panel 084 verdichtet Motive, Gebäude, Straßen und räumliche Beziehungen mit feinen schwarzen oder dunklen Linien. Vertikale, horizontale und gebrochene Linien, Bögen sowie perspektivische Führungslinien bilden ein geometrisches Gerüst. Anschließend formen variierende Dichten von stippling／dotted texture den Himmel, den Boden, den Hintergrund, Baumschatten, Licht und die atmosphärischen Ebenen rund um das Motiv. Komplexe Hintergründe werden bewusst reduziert – übrig bleiben ein klarer Fokus, großzügige Freiflächen und wenige, eindeutig aus dem Ausgangsbild stammende Akzentfarben. Geeignet für diese Fälle Städte, Gebäude und räumliche Beziehungen sollen klar erkennbar sein: Geometrische feine Linien, perspektivische Führungslinien und prägnante Konturen verdichten die Struktur von Straßen, Gebäuden und Szenen. Luft, Licht und Tiefenwirkung sollen sichtbar werden, ohne die Fläche mit Texturen zu füllen: Ein ruhiger Schichtaufbau entsteht durch abgestufte Dichten von stippling／dotted texture. Reduzierte Farben werden bevorzugt: Blau-Grau, Beige und Warmweiß bilden die Grundlage; nur wenige spot color aus dem Original setzen Akzente im Fokus. Eine flexible Ausgabe wird benötigt: Unterstützt werden vertikale, horizontale, reine Design-, verschiedene Seitenverhältnisse und vierseitige Hintergrundbilder. Außerdem lassen sich Bildverzeichnisse stapelweise verarbeiten.
Bild小小东 x Doodle x Naiv x P083
Panel 083 bewertet das Foto zunächst neu und lässt nur ein besonders erinnerungswürdiges Hauptmotiv sowie höchstens ein oder zwei notwendige Hinweise auf die Umgebung bestehen. Anschließend wird ein bestimmtes Größenverhältnis, eine Bewegung, ein Gesichtsausdruck oder eine Struktur gezielt schief, unbeholfen oder leicht absurd gezeichnet. Zittrige Konturen, absichtlich ungenaue Proportionen, grobe Wachsmalstift-Texturen und großzügige Leerflächen ergeben gemeinsam einen Ugly-cute naïve doodle. Das Motiv muss eindeutig erkennbar bleiben; der Humor muss aus dem Originalbild entstehen und darf nicht durch beliebige Gags hinzugefügt werden. Geeignet für diese Fälle Ein Foto enthält einen charakteristischen Moment, den man vergrößern möchte: Humor entsteht aus Bewegung, Gesichtsausdruck, Proportionen oder Kontrasten – nicht durch eine mechanische Umwandlung in eine Strichzeichnung. Du möchtest etwas hässlich-süßes, aber keine billige Niedlichkeit: Zeichne bewusst schief, unbeholfen und leicht absurd, während das Hauptmotiv auf den ersten Blick erkennbar bleibt. Du möchtest eine komplexe Szene auf das Wesentliche reduzieren: Behalte nur ein Hauptmotiv und höchstens ein oder zwei Hinweise auf die Umgebung. Grobe Farbflächen und großzügige Leerflächen verstärken den Erinnerungswert. Du brauchst flexible Ausgaben: Unterstützt Positionierungen oben, unten, links und rechts, reines Design, mehrere Seitenverhältnisse und Wallpaper für vier Endgeräte. Auch Bildordner lassen sich stapelweise verarbeiten.
Code zu Bild
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://youmind.club/__ext/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.
Beschreibung
Warum wir diese Fähigkeit empfehlen
Dieser Skill wandelt Code in schön hervorgehobene Bilder um, simuliert eine Terminal-Oberfläche und unterstützt das Herunterladen in hoher Auflösung. Er ist das ideale Werkzeug für Entwickler, um Codeausschnitte zu teilen.
Konvertieren Sie den gesamten Code im Artikel in Bilder und laden Sie ihn mit einem Klick herunter.
Ähnliche Fähigkeiten
Alle anzeigenBild小小东 x Siebdruckgrafik x P086
Panel 086 lässt nur 3–5 visuelle Informationen übrig, die das Bild tragen. Mit Silhouetten, geometrischen Formen und klaren Farbflächen wird das Motiv neu gestaltet. Anschließend erzeugen 2–4 aus dem Foto abgeleitete Sonderfarben, Dry-Brush- und Brayer-Texturen, dragged ink, broken ink und ungleichmäßige Deckung einen Siebdruck im Stil des Mid-Century-Modernismus. Die Komposition strebt stets einen klaren Fokus, eine Hauptrichtung und einen bedeutungsvollen Bereich von Leerraum an. Geeignet für diese Fälle Mehr visuelle Ordnung im Foto: Nur 3–5 zentrale visuelle Informationen bleiben erhalten; Silhouetten, geometrische Formen und Farbflächen schaffen einen klaren Fokus. Authentische Druckgrafik-Textur: Trockenpinsel, gerollte Farbe, horizontal gezogene Farbe, ausgesparte Stellen, gebrochene Farbe und ungleichmäßige Deckung werden zur Bildsprache. Lebendige, aber zurückhaltende Farben: Die ausdrucksstärksten Farbbeziehungen des Originals werden auf 2–4 Sonderfarben reduziert, während Papiergrund und Leerraum aktiv an der Komposition beteiligt werden. Flexible Ausgabe: Unterstützt Hoch- und Querformat, reine Designs, mehrere Seitenverhältnisse und vierseitige Wallpaper. Auch Bildverzeichnisse können stapelweise verarbeitet werden.
Bild小小东 x Linien & Punkte P084
Panel 084 verdichtet Motive, Gebäude, Straßen und räumliche Beziehungen mit feinen schwarzen oder dunklen Linien. Vertikale, horizontale und gebrochene Linien, Bögen sowie perspektivische Führungslinien bilden ein geometrisches Gerüst. Anschließend formen variierende Dichten von stippling／dotted texture den Himmel, den Boden, den Hintergrund, Baumschatten, Licht und die atmosphärischen Ebenen rund um das Motiv. Komplexe Hintergründe werden bewusst reduziert – übrig bleiben ein klarer Fokus, großzügige Freiflächen und wenige, eindeutig aus dem Ausgangsbild stammende Akzentfarben. Geeignet für diese Fälle Städte, Gebäude und räumliche Beziehungen sollen klar erkennbar sein: Geometrische feine Linien, perspektivische Führungslinien und prägnante Konturen verdichten die Struktur von Straßen, Gebäuden und Szenen. Luft, Licht und Tiefenwirkung sollen sichtbar werden, ohne die Fläche mit Texturen zu füllen: Ein ruhiger Schichtaufbau entsteht durch abgestufte Dichten von stippling／dotted texture. Reduzierte Farben werden bevorzugt: Blau-Grau, Beige und Warmweiß bilden die Grundlage; nur wenige spot color aus dem Original setzen Akzente im Fokus. Eine flexible Ausgabe wird benötigt: Unterstützt werden vertikale, horizontale, reine Design-, verschiedene Seitenverhältnisse und vierseitige Hintergrundbilder. Außerdem lassen sich Bildverzeichnisse stapelweise verarbeiten.
Bild小小东 x Doodle x Naiv x P083
Panel 083 bewertet das Foto zunächst neu und lässt nur ein besonders erinnerungswürdiges Hauptmotiv sowie höchstens ein oder zwei notwendige Hinweise auf die Umgebung bestehen. Anschließend wird ein bestimmtes Größenverhältnis, eine Bewegung, ein Gesichtsausdruck oder eine Struktur gezielt schief, unbeholfen oder leicht absurd gezeichnet. Zittrige Konturen, absichtlich ungenaue Proportionen, grobe Wachsmalstift-Texturen und großzügige Leerflächen ergeben gemeinsam einen Ugly-cute naïve doodle. Das Motiv muss eindeutig erkennbar bleiben; der Humor muss aus dem Originalbild entstehen und darf nicht durch beliebige Gags hinzugefügt werden. Geeignet für diese Fälle Ein Foto enthält einen charakteristischen Moment, den man vergrößern möchte: Humor entsteht aus Bewegung, Gesichtsausdruck, Proportionen oder Kontrasten – nicht durch eine mechanische Umwandlung in eine Strichzeichnung. Du möchtest etwas hässlich-süßes, aber keine billige Niedlichkeit: Zeichne bewusst schief, unbeholfen und leicht absurd, während das Hauptmotiv auf den ersten Blick erkennbar bleibt. Du möchtest eine komplexe Szene auf das Wesentliche reduzieren: Behalte nur ein Hauptmotiv und höchstens ein oder zwei Hinweise auf die Umgebung. Grobe Farbflächen und großzügige Leerflächen verstärken den Erinnerungswert. Du brauchst flexible Ausgaben: Unterstützt Positionierungen oben, unten, links und rechts, reines Design, mehrere Seitenverhältnisse und Wallpaper für vier Endgeräte. Auch Bildordner lassen sich stapelweise verarbeiten.
Finde deine nächste Lieblingsfähigkeit
Entdecke weitere kuratierte KI-Fähigkeiten für Recherche, Kreativität und den Arbeitsalltag.