design-dna
Aus Screenshots eine Stilbeschreibung machen und daraus Seiten bauen. Mit Hinweis zum Nachladen von außen.
- Drei Ebenen: Messbares wie Farben und Abstände, das Gefühl des Stils und besondere Effekte wie Animationen und 3D.
- Farben gemessen: Statt Farben nach Augenmaß zu schätzen, misst ein kleines Skript sie aus dem Bild.
- Dann bauen: Aus der Beschreibung entsteht eine fertige Seite im selben Stil, danach wird die Farbtreue nachgemessen.
Ein Skill von zanwei, nicht von uns. Wir haben ihn gelesen und listen ihn mit Verweis auf die Quelle.
Kostenfrei. Wir haben den Skill nicht in Claude Code, ChatGPT oder Grok ausgeführt und übernehmen dafür keine Gewähr. Urheber und Lizenz stehen in der Quelle.
Das Problem
Warum es diesen Skill gibt.
- Ein Stil lässt sich schwer in Worte fassen. „Mach es wie diese Seite“ führt bei KI meist zu einer ähnlichen, aber falschen Farbwelt.
- design-dna zerlegt das Vorbild in eine feste Beschreibung, die sich wiederverwenden und überprüfen lässt.
Was er macht
So arbeitet er.
- Drei Phasen: Aufbau der Beschreibung zeigen, Vorbilder daraus auslesen, Inhalte im Stil umsetzen. Man kann einzelne Phasen nutzen.
- Messung per Skript: Für Bilder installiert der Skill ein Hilfspaket (sharp) und führt ein Node-Skript aus, das Farben misst.
- Vorbilder abrufen: Bei Internetadressen ruft er die Seite ab und holt benötigte Bilder von der Originalquelle.
Ehrlich gesagt
Was er kann und was nicht.
- Grenze: Hinweis zum Nachladen von außen: Der Skill lässt ein Paket aus dem Netz installieren, führt Skripte aus, ruft fremde Seiten ab und bindet in seinen Anleitungen Bibliotheken über Internet-Verteiler ein. Das ist für seinen Zweck nachvollziehbar, aber mehr als bei einem reinen Text-Skill. Prüfen Sie, welche Adresse Sie ihm geben.
- Grenze: Die mitgelieferten Skripte arbeiten lokal. Wir haben darin keine Netzaufrufe gefunden.
- Grenze: Was fremde Seiten zum Abrufzeitpunkt ausliefern, sehen wir nicht und prüfen wir nicht.
- Getestet: Wir haben die Hauptdatei, die Leitfäden und alle Skripte gelesen und nach unsichtbaren Zeichen und kodierten Blöcken gesucht. Gefunden wurde nichts Verstecktes. Ausgeführt haben wir den Skill nicht.
- Herkunft: Entwickelt von zanwei, veröffentlicht unter der MIT-Lizenz. Wir haben nichts daran verändert.
Prüf-Protokoll
Das Ergebnis, offen gelegt.
Ein Siegel ist Sorgfalt, keine Garantie. Wir zeigen das Ergebnis als Ampel, nicht die Prüfmechanik dahinter. Die Verantwortung für den Einsatz bleibt bei Ihnen.
So laden Sie ihn ein
In vier Schritten einsatzbereit.
Quelle öffnen
Die Quellseite auf GitHub aufrufen und den Ordner mit der SKILL.md herunterladen.
Einlegen
Den Skill-Ordner in den Skills-Ordner Ihres Werkzeugs legen, z. B. .claude/skills/. Der Unterordner bleibt dabei.
Benutzen
Die Aufgabe so beschreiben, wie im Beispiel unten. Der Skill springt von selbst an.
Aktuell bleiben
Fragen Sie Ihre KI hin und wieder, ob der Skill noch zur Quelle passt. Wir verlinken auf die Quelle, damit der Stand dort der aktuelle bleibt.
Beispiel
So sieht das aus.
„Lies den Stil aus diesem Screenshot aus und baue meine Startseite so.“
Zuerst eine Stilbeschreibung mit gemessenen Farben, dann die Seite im selben Stil und zuletzt einen Vergleich, wie nah die Farben am Vorbild liegen.
Passt dazu
Gut zusammen mit.
- handschrift gibt eigene Gestaltung vor, design-dna übernimmt sie aus einem Vorbild.
- code-guard prüft die erzeugte Seite vor der Veröffentlichung.