印花集 · PRINTSTREAM 前端设计

Was macht 印花集 · PRINTSTREAM 前端设计?

Die flache grafische Sprache des CS2 „Printstream“-Aufklebersets als vollständiges Frontend-Codesystem umgesetzt. Kernprinzip: Die Wiedererkennbarkeit dieser Sprache liegt vollständig in den Motiven (Rasterpunkte, Strichcodes, X-Treppe, Eckmarken, Regenbogenband, gestrichelte Bögen), nicht im Hintergrund. Nur die Hintergrundfarbe zu ändern, ohne die Motive anzufassen, ergibt einen „Hellmodus“, kein neues Design.

Arbeitsablauf (streng in dieser Reihenfolge)

1. Zuerst die Regeln lesen, dann coden – references/rules-and-antipatterns.md. 12 Regeln + 12 bestätigte Antipatterns (jeweils mit Begründung, warum sie nicht funktionieren). Wer diesen Schritt überspringt, wird mit Sicherheit in Fallen tappen.
2. Tokens festlegen – references/design-tokens.md lesen, assets/tokens.css ins Projekt einbinden (oder die Variablen in das bestehende Theme kopieren). Alle Komponenten verwenden ausschließlich Variablen, keine rohen Hex-Werte (außer für Regenbogenband-Definitionen und Geräte-LED-Farben).
3. Grundgerüst aufbauen – references/components.md: Vollständige Rezepte für Panels, Buttons, Tabellen, Statistik-Karten, Fortschrittsbalken, Warnmeldungen, Leerzustände, Markenleisten und Fußzeilensiegel, inklusive aller Interaktionszustände.
4. Motive platzieren – references/motifs.md: Parametrische Generatoren für neun Motive, gemäß den dortigen Platzierungsempfehlungen und unter Beachtung der Mengenbeschränkungen (groß × ganzseitig nur einmal usw.).
5. Grafiken, Symbole, Schriften und Rasterung – references/asset-library.md + assets/ (50 deduplizierte Motiv-SVGs, 10 OFL-Schriftarten, einzelne Demoseiten).
6. Abnahme – Die 11-Punkte-Checkliste am Ende von rules-and-antipatterns.md Punkt für Punkt durchgehen.

Die drei wichtigsten Regeln (selbst wenn du alles andere vergisst, behalte diese)

1. Rahmen sind die Tinte selbst (#0d1117), nicht hellgrau; alle Ecken sind rechtwinklig; die einzige „Räumlichkeit“ ist der harte Versatz (2–3px Versatz mit massivem Tintenschatten). Gedrucktes leuchtet nicht, schwebt nicht und hat keine Farbverläufe.
2. Farbe gibt es nur im Regenbogenband (drei dicke horizontale Streifen: Rosa #f8a8a0 → Magenta #f088f0 → Cyan #20e0e0). Die funktionalen Dreizustands-Farben sind „Messwerte“, keine Dekoration, und müssen auf dem Papierhintergrund lesbar sein (eine Stufe dunkler).
3. Inverse Bereiche verwenden eigenständig benannte --inv- Variablen, niemals zwei Variablen, die aufeinander verweisen* (CSS-Variablen haben keine Swap-Semantik); die Inversion ändert nur die Containerfarben, die ok/idl/bad-Beurteilung bleibt unverändert – Messwerte dürfen nicht lügen.

Asset-Liste

Pfad	Verwendung
assets/tokens.css	Sofort einsatzbereit: Alle Design-Tokens + @font-face, direkt per <link> einbindbar
assets/demo-printstream.html	Musterkonsole mit allen neun Motiven – zuerst ansehen, um eine visuelle Basis zu schaffen
assets/motifs/	50 deduplizierte Motiv-SVGs + manifest.json (nach Kategorien annotiert)
assets/fonts/	10 OFL-Schriftarten + Lizenzen + Ladeanleitung
references/design-tokens.md	Farb‑, Schrift‑, Form‑, Abstands-Tokens und getestete Proportionen
references/motifs.md	Generator für neun Motive (Kernwert dieses Skills)
references/components.md	Komponentenrezepte und Interaktionszustände
references/rules-and-antipatterns.md	Regeln + Antipatterns + Abnahmeliste
references/asset-library.md	Materialbibliothekskarte, Motivfehler, ISO/GHS- und Rasterungsverwendung
scripts/curate_motifs.py	Deduplizierung der Motivbibliothek nach (Kategorie, Größe±3px, Skalierung±15%)

Ausführungshinweise

• Motive werden per Code generiert, nicht als Bitmaps eingefügt. Bitmaps mit fester Auflösung verraten sich bei anderen Größen; die SVG-Vorlagen in assets/motifs/ dienen nur als Formreferenz. Produktiv die parametrisierten Versionen aus motifs.md verwenden.
• Jedes Motiv nur begrenzt einsetzen: Groß × ganzseitig nur einmal; dicke schwarze Balken nur bei Abschnittsüberschriften; Rautencluster nur auf freiem Raum. Alles vollzustopfen = Rückschritt zu reiner Materialanhäufung.
• Textmarken sind Platzhaltertexte: Nummer; / Signatur; (z. B. _B42, DESIGN BY WyHXnR;), austauschbar, keine festen Grafiken.
• Mobilansicht: Unter 620px Höhe und Schriftgröße reduzieren, Motive nicht entfernen; feste Eingabebreiten mit max-width:100% versehen.
• Kombination mit Dark Theme: Wie in der Referenz implementiert, können zwei Variablensets pro Seite verwendet werden (hell = Printstream / dunkel = Schatten). Beim Theme-Wechsel werden nur die Werte getauscht, die Struktur bleibt unverändert.
• Ausgabeformat (HTML/CSS, React, Tailwind, Vue) frei wählbar – Austausch der Ausgabe, nicht der Sprache; Token- und Motivregeln bleiben identisch.

Anwendungsbereich

Geeignet für: Tool-Konsolen, Dashboards, Audit-/Wartungs-Produktseiten sowie Marketingseiten mit „Industriedruck-Optik“. Nicht geeignet für: Seiten mit Verlaufsglas-Neumorphismus (Sprachkonflikt) oder solche mit Fotografie/Illustration als Hauptvisuel (Printstream kann Fotos nur durch Rasterung integrieren, siehe asset-library.md).