jovd83/prototype-sketching-skill

Fähigkeit: Prototyp-Skizze

Machen Sie eine funktionierende Web-App so, dass sie aussieht, als wäre sie handgezeichnet – damit Kunden erkennen, dass es ein Prototyp und kein fertiges Produkt ist. Es handelt sich nur um ein Look-and-Feel-Skin. Es ist rein additiv und vollständig reversibel.

Scope-Guardrails (zuerst lesen, niemals verletzen)

1. Nur Styling-Einstiegspunkte und index.html bearbeiten. Ein Stylesheet anhängen, einen SVG-Block einfügen, zwei Attribute setzen. Sonst nichts.
2. Niemals Komponenten, Templates, .ts/.tsx/.jsx/.vue-Logik, Routing, State, Services oder Tests bearbeiten.
3. Niemals Komponenten durch skizzenhafte Komponentenbibliotheken (z. B. wired-elements) ersetzen – das würde Markup umschreiben. Verboten.
4. Niemals Logos, Fotos, Diagramme oder Icons, die scharf bleiben müssen, umfärben oder verzerren – die Opt-out-Klasse verwenden.
5. Das Rückgängigmachen muss trivial bleiben: Das Entfernen der beiden <html>-Attribute schaltet das gesamte Skin aus.

Funktionsweise (ein mentales Modell)

• Ein Stylesheet assets/sketch-skin.css definiert alle 5 Stile + die Skizzenhaftigkeitsrampe.
• Ein SVG-Block assets/sketch-filters.html definiert die Wackelfilter (#sketch-25 … #sketch-100).
• Die Aktivierung erfolgt durch zwei Attribute am <html>: data-sketch="<Stil>" und data-sketch-level="<0|25|50|75|100>".
• Der Look entsteht durch: Schriftartenwechsel (Handschrift) + handgezeichnete Boxen (unregelmäßige border-radius, flache Füllungen) + einen SVG-Verschiebungsfilter, dessen Stärke der Skizzenhaftigkeitsstufe entspricht. Die Schriftart trägt den Text; der Filter wackelt nur die Boxdekoration (verwischt niemals Text).

Kurzanleitung (in dieser Reihenfolge vorgehen)

1. Bestätigen, dass es sich um ein reines Skin handelt. Wenn der Benutzer Verhaltens-/Layout-Änderungen wünscht, anhalten – das ist nicht im Scope.
2. Framework erkennen und das globale Stylesheet + index.html finden (siehe Rezepttabelle unten).
3. Stil auswählen (Tabelle unter "Stile") und eine Stufe (0, 25, 50, 75 oder 100).
4. Das Skin-CSS zu den globalen Styles des Projekts hinzufügen:
   • assets/sketch-skin.css in das Projekt kopieren (z. B. src/styles.scss) oder per @import einbinden. Der @import für die Schriftart ist bereits in dieser Datei enthalten (für Online-Nutzung).
5. Die SVG-Filter aus assets/sketch-filters.html direkt nach dem öffnenden <body>-Tag in index.html einfügen. (Erforderlich – filter: url(#sketch-…) funktioniert nur, wenn diese Defs im DOM vorhanden sind.)
6. Aktivieren, indem Sie das <html>-Tag in index.html bearbeiten:

   <html lang="de" data-sketch="balsamiq" data-sketch-level="50">
   

7. Im Browser überprüfen. Zum Rückgängigmachen die beiden data-sketch*-Attribute löschen (das hinzugefügte CSS/SVG kann inaktiv bleiben – ohne die Attribute tun sie nichts).

Stile

data-sketch	Look	Schriftart	Verwendung für
balsamiq	Sauberes Graustufen-Wireframe, flache Boxen	Balsamiq Sans	Der Standard für "das ist ein Mockup"
sharpie	Fetter schwarzer Marker, dicker Strich	Permanent Marker	Whiteboard / Workshop-Skizze
pencil	Leichter Graphit, weiche Striche	Gaegu	Sanfter "Bleistift auf Papier"-Entwurf
doodle	Verspielt, helle Farbakzente	Short Stack	Freundliche, informelle Konzepte
blueprint	Weiße Tinte auf blauem Papier	Patrick Hand	Technisches "Zeichenbrett"-Gefühl

Skizzenhaftigkeitsstufe

data-sketch-level steuert, wie zittrig die Linien sind. Es wählt einen anderen SVG-Verschiebungsfilter aus:

Stufe	Effekt
0	Handgezeichnete Boxen + Schriftart, aber gerade, stetige Linien (am saubersten)
25	Dezentes Wackeln
50	Deutlich handgezeichnet (empfohlener Standard)
75	Lockerer, energischer Skizzenstil
100	Sehr grob, maximales "Gekritzel"

Wenn data-sketch gesetzt ist, data-sketch-level aber fehlt, wird standardmäßig Stufe 50 verwendet.

Diagonales Wasserzeichen (optional)

Um den gesamten Bildschirm als Entwurf zu kennzeichnen, ein drittes <html>-Attribut mit dem anzuzeigenden Text hinzufügen:

<html data-sketch="balsamiq" data-sketch-level="50" data-sketch-watermark="ENTWURF">

data-sketch-watermark zeichnet ein blasses, handgeschriebenes Wort diagonal über den Viewport. Es ist eine feste, nicht interaktive Ebene (pointer-events: none), sodass es niemals Klicks blockiert, das Layout nicht verändert und bei Seiten- und Routenwechseln an Ort und Stelle bleibt. Jeder Text ist möglich (ENTWURF, PROTOTYP, VERTRAULICH, ein Kundenname…). Entfernen Sie das Attribut, um es auszuschalten. Im Overlay legt ein Textfeld Wasserzeichen es live fest.

Modals, Popups & SPA-Navigation

Da das Skin durch Attribute am <html> aktiviert und mit globalen [data-sketch] …-Selektoren gestylt wird, erben alle Elemente, die nach der Aktivierung erscheinen, es automatisch – Dialoge, Popover, Dropdown-Menüs, Tooltips und Toasts (auch portal-gemountete) sowie jeder Bildschirm, zu dem in einer Single-Page-App navigiert wird. Es muss nichts pro Komponente oder pro Route verdrahtet werden.

Zwei Dinge sorgen für Konsistenz:

• Die Selektorlisten decken bereits dialog, [popover], [role="dialog"], [aria-modal="true"], .modal, .popover, Menüs, Tooltips und Toasts sowie den nativen ::backdrop ab.
• Das Overlay-Skript überwacht <body> und injiziert die SVG-Filter erneut, wenn ein Framework bei einem Routenwechsel den Body ersetzt, damit das Wackeln niemals stillschweigend verschwindet. (Beim statischen Attribut-Modell sketch-filters.html einmal nach <body> einfügen; SPA-Frameworks mounten in ein untergeordnetes Root und lassen es intakt.)

Framework-Injektionsrezepte

Das Skin ist Framework-unabhängig. Dies sind die genauen Ziele; vollständige Details in references/implementation.md.

Stack	CSS hinzufügen zu	SVG einfügen in	Attribute setzen auf
Angular	src/styles.scss (oder styles.css)	src/index.html nach <body>	<html> in src/index.html
React / Vite	src/index.css (importiert in main.tsx)	index.html nach <body>	<html> in index.html
Vue	src/assets/main.css (importiert in main.ts)	index.html nach <body>	<html> in index.html
Statisches HTML	sketch-skin.css im <head> verlinken	index.html nach <body>	<html> in index.html

Bestimmte Assets scharf halten (Opt-out)

Das Skin bearbeitet kein Markup, aber wenn der Benutzer explizit darum bittet, ein Element (Logo, Diagramm) zu schützen, ist die einzige erlaubte Markup-Änderung das Hinzufügen des Opt-out-Hooks zu diesem einzelnen Element:

<img src="logo.svg" class="no-sketch" alt="Logo">

.no-sketch (oder data-no-sketch) entfernt den Wackelfilter und Farbüberschreibungen von diesem Element. Spärlich und nur auf Anfrage verwenden.

Interaktives Vorschau-Overlay (optional)

Wenn der Benutzer Stile live umschalten möchte (z. B. einem Kunden einen Schalter zeigen), das Overlay anstelle statischer Attribute verwenden:

1. assets/sketch-skin.css zu den globalen Styles hinzufügen (wie in der Kurzanleitung).
2. Ein Script-Tag vor </body> hinzufügen:

   <script src="sketch-toggle.js" defer></script>
   

3. Fertig. Das Skript rendert ein schwebendes Panel mit AUS + je einen Radio-Button pro Thema, einen 0–100 %-Schieberegler für die Skizzenhaftigkeit und ein Textfeld für das Wasserzeichen, setzt die <html>-Attribute live und merkt sich die Auswahl im localStorage. Es injiziert die SVG-Filter automatisch (und injiziert sie erneut, wenn ein SPA den Body ersetzt), sodass Schritt 5 der Kurzanleitung (Einfügen von sketch-filters.html) nicht erforderlich ist.

Dies ist immer noch reines Skin und nicht destruktiv – das Skript setzt lediglich Attribute. Entfernen Sie das Tag, um es zu deaktivieren. Wählen Sie dieses Modell, wenn die Anfrage lautet "lassen Sie mich/den Kunden die Stile wechseln"; verwenden Sie statische Attribute für einen festen, bildschirmfoto-stabilen Look.

Screenshot-Galerie

README.md zeigt jeden Stil und die 0→100 %-Leiter anhand der PNGs in demo/screenshots/. Diese Bilder sind vorgerendert; die interaktive Demo-App und das Playwright-Erfassungsskript, die sie generieren, befinden sich im Entwicklungsquellcode des Projekts und werden nicht mit der installierten Fähigkeit gebündelt. Die Fähigkeit selbst besteht nur aus assets/ + references/ – kein Build-Schritt, keine Abhängigkeiten.

Beispiele

Beispiel 1 – Angular-Demo in Balsamiq, moderate Skizze

• Eingabe: "Lass diese Angular-App für die morgige Demo wie ein Balsamiq-Wireframe aussehen."
• Aktionen: sketch-skin.css an src/styles.scss anhängen; Filter in src/index.html einfügen; <html data-sketch="balsamiq" data-sketch-level="50"> setzen.
• Ergebnis: App läuft identisch; wird als Graustufen-Wireframe gerendert.

Beispiel 2 – React, maximaler Sharpie

• Eingabe: "React-App, kompletter Whiteboard-Marker-Look, richtig grob."
• Aktionen: sketch-skin.css in main.tsx importieren; Filter in index.html einfügen; data-sketch="sharpie" data-sketch-level="100" setzen.

Beispiel 3 – Ausschalten

• Eingabe: "Zurück zum echten UI."
• Aktion: data-sketch und data-sketch-level aus <html> löschen. Fertig – keine weiteren Änderungen nötig.

Fehlerbehebung

Symptom	Ursache	Lösung
Boxen sehen handgezeichnet aus, aber Linien sind perfekt gerade	SVG-Filter nicht im DOM oder Stufe 0	Sicherstellen, dass sketch-filters.html nach <body> eingefügt ist; Stufe ≥ 25 setzen
Nichts hat sich geändert	Attribute fehlen oder CSS nicht geladen	Überprüfen, ob <html data-sketch="…"> vorhanden ist und sketch-skin.css in den globalen Styles enthalten ist
Text sieht unscharf aus	Filter auf Text/gesamten <body> angewendet	Kein filter: auf body oder Text anwenden; das Skin filtert nur Boxdekoration – sketch-skin.css unverändert erneut kopieren
Schriftarten sind nicht handschriftlich	Offline / blockierte Google Fonts	Schriftarten selbst hosten – siehe assets/fonts/README.md
Seite fühlt sich bei großen Tabellen/Rastern träge an	feDisplacementMap-Aufwand bei großem DOM	Stufe senken oder die Wackel-Selektorliste eingrenzen (siehe references/implementation.md)
Ein Logo wurde entsättigt/wackelig	Kein Opt-out für dieses Asset	class="no-sketch" zu diesem einzelnen Element hinzufügen
Icon-Fonts / SVG-Icons verschwunden	Aggressive Vereinfachung	no-sketch zum Icon-Container hinzufügen oder den Icon-Hinweis in references/implementation.md beachten

Referenzdateien (nur bei Bedarf lesen)

• references/styles.md – exakte Schrift-/Paletten-/Strich-Spezifikation für jeden der 5 Stile und wie ein neuer Stil hinzugefügt wird.
• references/implementation.md – SVG-Filter-Mathematik, Schritt-für-Schritt pro Framework, Selektor-Anpassung, Offline-Schriftarten, Performance, Details zum Rückgängigmachen.