Frontend & UI
design-skills · Dithered
Punktmuster-Schattierung und eine begrenzte Palette für retro, kontraststarke Screens.
Worum es geht
Ein Richtlinien-Skill für geditherte Interfaces, die Punktmuster nutzen, um Schattierungen aus einer begrenzten Palette zu simulieren. Open Sans für Fließtext, Space Grotesk für Display, IBM Plex Mono, Akzente in Blau und Violett.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Warum das fürs Design zählt
- Punktmuster ersetzen Verläufe, damit Schattierung ein bewusst eingeschränktes Farbset übersteht.
- Kontraststarkes Rendering hält Text lesbar, selbst wenn Flächen dichte Mustertextur tragen.
- Regeln verbieten dekorative Motion und verhindern, dass die Retro-Optik zu visuellem Rauschen wird.
Was es abdeckt
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
So installierst du es
design-skills · Dithered
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/dithered/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Nenn Codex zuerst das Palettenlimit und lass ihn dann musterbasierte Schattierungsregeln ableiten.
-
Verlange Empty-, Loading- und Error-States, damit gemusterte Flächen lesbar bleiben.
-
Prüfe Hit Areas und Focus-States, die dieser Skill explizit hervorhebt.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.