Frontend & UI
Hallmark
Anti-Slop-Design-Flow mit 58 Gates und erzwungener struktureller Vielfalt.
Worum es geht
Ein Design-Skill für KI-Coding-Assistenten mit einem Standard-Build-Flow und drei Verben: audit, redesign und study. Er drängt auf strukturelle Vielfalt, damit zwei Builds nicht denselben Seitenrhythmus teilen.
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark
Warum das fürs Design zählt
- Diversifizierungsregeln erzwingen unterschiedliche Makrostrukturen, Navs und Footer über aufeinanderfolgende Builds.
- Gesperrte Tokens verbieten inline hex- oder font-family-Werte, die den Token-Block umgehen.
- Jede Ausgabe wird bei 320, 375, 414 und 768 Pixel Breite geprüft.
Was es abdeckt
- How to use this skill
- Disciplines that hold across every verb
- When the brief is a component, not a page
- Design flow (default)
- Hallmark study
- Output contract and scope
So installierst du es
Hallmark
-
Klone das Repo.
git clone https://github.com/Nutlope/hallmark -
Verweise Codex auf die Skill-Datei.
skills/hallmark/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Lass den Pre-Flight-Scan zuerst vorhandene Fonts, Palette und Motion-Bibliotheken lesen.
-
Beantworte das Gate zu Zielgruppe, Use Case und Ton, oder sag einfach los.
-
Führe hallmark audit auf einer Seite aus, für eine priorisierte Punch-List ohne Änderungen.
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.