jenreh/hallmark

Was macht hallmark?

Macht die UIs, die ein Codierungs-Assistent generiert, so, dass sie gemacht und nicht generiert aussehen: ein harter Boden gegen die Defaults, auf die jedes Modell trainiert wurde, eine gezielte Richtung, damit aufeinanderfolgende Builds nicht konvergieren, eine Idee pro Bildschirm. Oberhalb des Bodens gehört die Seite dir: Du bist ein fähiger Designer.

Powered by Together AI.

Der Boden

Bindet jede Ausgabe in jedem Kontext, nichts davon ist verzichtbar, selbst wenn sonst nichts gelesen wird.

1. Jede Farbe und jede Schriftart durchläuft ein Token, das bei :root (oder einem deklarierten Theme-Block) deklariert ist. Keine wörtliche Farbe oder font-family jenseits des Token-Blocks. (48)
2. Niemals transition: all. Niemals width, height, top oder left animieren. (10a)
3. Niemals ein kursives Wort innerhalb einer römischen Überschrift. (38i)
4. overflow-x: clip sowohl auf html als auch auf body. Niemals hidden, niemals 100vw. (34)
5. Bildtragende Grid-Tracks verwenden minmax(0, 1fr); Display-Überschriften tragen overflow-wrap: break-word; min-width: 0. (50)
6. Jedes interaktive Element hat ein :focus-visible, das sofort erscheint. (26a, 15)
7. Jede Animation hat einen prefers-reduced-motion: reduce Fallback, und der Inhalt ist ohne Skripting sichtbar. (27, 62)
8. Niemals eine erfundene Metrik, ein Testimonial, eine Logo-Wand oder eine Fallstudien-Anzahl. (46a)
9. Niemals eine Augenbraue und niemals ein Label in gesperrten Kapitälchen oder Small Caps: Labels, Captions, Tabellenköpfe, Tags und Nav-Links sind der Body-Font (oder der Theme-Label-Font), eine Stufe kleiner, Satz- oder Kleinschreibung, ungesperrt. (54, 67)
10. Niemals durch Mittelpunkte verbundene Meta-Strings, Pfeile, die an Link-Text geklebt sind, oder dekorative Statuspunkte. (63)
11. Niemals ein Lila-zu-Blau-Verlauf, eine Karte in einer Karte, ein Emoji als Icon oder ein handgezeichnetes Browser- oder OS-Fenster. (2a, 4, 30a, 47a)
12. Die Überschrift des Hero, ein Satz und die primäre Aktion sind bei 1280 x 800 ohne Scrollen sichtbar. (44b)
13. Etwa 80 Wörter auf einem Bildschirm; der Text des Hero ist die Überschrift, ein Satz und seine Aktionen. (58)
14. Der Container ist gedeckelt und zentriert: bei 1920 wachsen die Ränder, das Maß und die Grids nicht. (44d)
15. Die erste nicht leere Zeile der CSS-Quelle ist der Hallmark-Stempel, dann die Kritikzeile, dann etwaige Ausnahmen. (20)
16. Wenn Node verfügbar ist, führe node <skill-dir>/scripts/sloplint.mjs <output> --render aus, bevor du die Arbeit übergibst. Behebe jedes FAIL; behebe oder waiver jedes REFLEX.

Oberhalb des Bodens ist ein Reflex-Gate ein Default, in den ein Modell verfällt, der mit einem echten Grund dokumentiert waived werden kann, und ein Finish-Check ist ein handwerkliches Detail, das beantwortet wird, nie blockiert (references/gates.md § 1 und § 2).

Ablauf

0. Pre-flight: Lies das Projekt, bevor du etwas fragst.
1. Frage einmal: Material, Zielgruppe, Verwendung, Ton.
2. Form: Gestalte die Seite, dann benenne sie.
3. Richtung: Teile ein Thema aus oder gestalte frei, wenn eine individuelle Gestaltung gewünscht wird.
4. Lade die Layout-, Bild-, Craft-, Genre- und Theme-Dateien sowie gates.md § 1 bis § 4.
5. Der Picks-Block, einmal.
6. Bau: zuerst der Hero, dann die Seite; Stempel, tokens.css, Log.
7. Durchlauf: sloplint --render bis zur Sauberkeit, die beurteilten Gates, die Finish-Review, die Materialfrage.

Verben, nur wenn der Benutzer Hallmark nennt: redesign <ziel> (ein komplettes Redesign unter Beibehaltung von Inhalt und Verkabelung) und audit <ziel> (ein Bericht); lies zuerst references/redesign.md. Jede andere Änderung an einem bestehenden Design ist kein Hallmark-Durchlauf: Führe sie wie gewünscht im eigenen System des Projekts aus.

Codex CLI und OpenCode lesen zuerst references/flow.md § Harnesses; andere Kontexte führen diese Datei wie geschrieben aus.

0. Pre-flight

Signale, in dieser Reihenfolge: design.md oder DESIGN.md im Root (ein gesperrtes System: es überschreibt alles unten stehende, und Seiten teilen es sich); .hallmark/brand-spec.md oder ein Prompt, der eine reale Marke nennt (führe references/brand-truth.md aus; theme niemals eine reale Marke aus dem Gedächtnis); die Schriftarten, Palette, Abstände, Bewegungsbibliotheken und das Framework des Projekts (package.json, Tailwind-Konfiguration, :root, Tokens, Font-Links); das Produkt selbst: eine URL, ein laufender Dev-Server, ein Projekt, das mit einem Befehl startet, oder eine App auf dem Rechner, die der Build mit scripts/capture.mjs erfasst (imagery.md § 4); ein Inspo MCP-Server (mcp__inspo__* Werkzeuge: Signal 8, flow.md § Signal 8; ein /hallmark-Prompt, Hallmark genannt oder eine individuelle Anfrage, schlägt es); TOGETHER_API_KEY gesetzt (Signal 9, der Komp-Schritt).

Gib einen Block aus (Datei:Zeilen-Zitate, was erhalten bleibt, was eingeführt wird), gecached in .hallmark/preflight.json (flow.md § Pre-flight).

1. Frage einmal

Eine Nachricht, selbst bei einem Fünf-Wörter-Prompt:

Bevor ich baue, vier Dinge. 1. Material, das, das am meisten zählt: Was kann die Seite zeigen? Screenshots oder eine Bildschirmaufnahme (oder weise mich auf die App, ihre URL oder ihren Ordner hin, und ich werde sie ausführen und die Aufnahmen machen), deine Fotos, echte Zahlen (Kunden, Verfügbarkeit, Preise), ein Zitat mit dem Namen desjenigen, der es gesagt hat, Logos, die du verwenden darfst. Füge sie ein oder gib Pfade an; ohne Fotos platziere ich Platzhalter aus Hallmarks Fotobibliothek, die du später durch deine eigenen ersetzt, und ich erfinde niemals eine Zahl, ein Zitat oder ein Logo. 2. Zielgruppe: Wer nutzt dies und was ist ihnen wichtig? 3. Verwendung: Die eine Aktion, die die Seite antreiben soll. 4. Ton: Wähle ein Extrem (redaktionell, brutalistisch, weich, utilitaristisch, luxuriös, verspielt, technisch, asketisch); „sauber und modern“ ist kein Ton. Plus die Stimmung in 4 bis 8 Wörtern und eine Ankerfarbe, falls du eine hast. Oder sage mach weiter, und ich werde ableiten und dir sagen, was ich ausgewählt habe.

Übersprungene Felder sind Opt-Outs: Leite sie ab, gib die Ableitungen in einer Zeile oben in der Antwort an, stemple sie; keine Nachfragen. Fakten werden niemals abgeleitet: Eine Zahl, ein Zitat oder ein Logo, das nicht gegeben wurde, ist abwesend; ein Bild, das nicht gegeben wurde, ist ein Platzhalter in einem Slot. Wenn der Prompt alle vier beantwortet oder niemand antworten kann (ein headless Run, ein Batch), frage nicht.

Genre, stillschweigend: AI-Tool, generativ, Musik, Video, Stimme, dunkel, atmosphärisch → atmosphärisch; SaaS, Enterprise, API, Plattform, Entwickler-Tool, Infra, B2B → modern-minimal; verspielt, lustig, freundlich, weich, Kinder, Spiele, Gemeinschaft → verspielt; andernfalls redaktionell, was die meisten Verbraucher- und Familien-Prompts abdeckt. Sobald ein Thema ausgeteilt ist, gewinnt dessen Genre (Genre-Datei, Stempel, --genre). Wenn zwei nicht-Standard-Genres ausgelöst werden, füge dem Prompt eines von beiden hinzu, oder entscheide bei „mach weiter“ und sage dies.

Umfang. Ein Prompt, der ein einzelnes Element nennt (Button, Eingabefeld, Karte, Modal, Nav, Footer, Tab-Leiste, Chip) oder „nur das X“ sagt, ist eine Komponente (flow.md § Komponentenumfang). Ein Bildschirm, in dem jemand arbeitet (ein Dashboard, ein Admin, Einstellungen, ein Werkzeug) ist ein App-Bildschirm (flow.md § App-Bildschirme).

2. Form

Material zuerst. Das Inventar, eine Zeile: echt (jedes konkrete Ding, das der Prompt und das Projekt liefern: Name, Behauptung, Zahlen, Orte, Daten, Bilder), Bilder (was die Seite zeigt und woher jedes kommt: die des Benutzers, Screenshots des echten Produkts, das gebaute Produkt, die Bibliothek), abwesend (jeder Beweis, den es nicht haben wird: Logos, Zitate, Metriken, die niemand gegeben hat). Die Form folgt daraus: Eine Seite mit Bildern führt mit ihnen (imagery.md § 1); eine Seite über Worte trägt Schrift und Fakten (Langes Dokument, Brief, Index-Zuerst, Manifest).

Der Auftrag. Nenne, was ein Besucher tut (abonnieren, buchen, besuchen, teilnehmen, kaufen, ausprobieren, anmelden, einstellen, beitreten, zuhören) und lies diesen Auftrag in references/anatomy.md: wo reale Seiten in der Kategorie die Aktion platzieren, um welche Abschnitte sie aufgebaut sind (das Menü, die Aufstellung, die Themen, die Aufzeichnung) und wie sie enden. Die Seite wird aus dieser Anatomie gebaut, niemals aus einem Standard-Durchlauf von Abbildungen, Schritten und einer E-Mail-Band (85).

Dann gestalte die Seite: ihre Form, wie sie sich öffnet, Inhalt und Zusammensetzung jedes Abschnitts, die Nav, den Footer, was den Hero trägt. Ausgangspunkte: 21 Formen in references/macrostructures.md (lade nur die Datei, die du auswählst); Kompositionen, Navs und Footer in layout.md.

Der Zug. Bei einem Theme-Build, sobald Schritt 3 das Theme ausgewählt hat, führe node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <auftrag> --theme <slug> [--log .hallmark/log.json] aus. Bereinigt von Log und dem Theme-Bild, teilt es eine Form, die Hero-Haltung, die Nav, den Footer, den ersten Abschnitt, wo die Aktion sitzt, zwei Kompositionen, die ausgelassen werden sollen, und womit der Hero führt. Übernimm es, es sei denn, das Material verweigert eine Auswahl, und nenne jeden Tausch im Picks-Block: Ein Prompt in einem Theme, zweimal gebaut, ergibt zwei Seiten. Spiegeltest: Würde ein benachbarter Prompt in derselben Kategorie genau diese Kombination erhalten? Wenn ja, ändere eine Entscheidung und sage welche.

Signatur. Das eine, woran sich ein Besucher erinnern würde: das stärkste reale Ding des Prompts, gezeigt in seinem besten Licht (das Foto, das der Ort ist, das Produkt, das seine eine Aufgabe erfüllt, ein Preis riesig gesetzt, weil es das Angebot ist, ein Bedienelement zum Ausprobieren). Mache es im Material des Themes (bei einem individuellen Durchlauf in seinem eigenen Look), zeige es auf dem ersten Bildschirm, nenne es im Picks-Block und im Stempel. Eine Zahl, die als Striche gezeichnet wird, ist ein Mittel, keine Signatur (82).

Halte alles davon; es wird einmal gesagt, bei Schritt 5.

3. Richtung

Der erste Treffer gewinnt.

1. Der Benutzer hat ein Theme genannt → baue es (Stempel theme: <name> (auf Wunsch)).
2. Der Benutzer hat eine individuelle Gestaltung verlangt („individuell“, „leite es ab“, „maßgeschneidert“, „kein Theme“, „eine eigene Welt“) → references/direction.md: das Design ist deins. Es ersetzt den Zug, die Formen, layout.md, die Genre-Datei und die Kompositions- und Fold-Regeln von Schritt 6; der Boden, die Gates und der Durchlauf bleiben bestehen. Schweigen nimmt niemals diesen Weg.
3. Alles andere teilt ein Theme aus:

node <skill-dir>/scripts/theme.mjs deal --genre <genre> --prompt "<der prompt>" [--log .hallmark/log.json]

Es teilt drei Themes aus, die zum Prompt passen und das Log bereinigen. Sieh dir die drei Bilder an, wähle dasjenige, dessen Material den Prompt tragen kann (Bewegung, Fotografien, Code), sage welches und warum, und lade nur references/themes/<slug>.md. Teile nur auf Anfrage neu aus (--reroll 1). Kein Node: Wähle manuell aus references/themes/index.json aus und stemple deal: manual.

Ein Theme ist ein Material, kein Plan: Es legt niemals fest, was die Seite enthält oder in welcher Reihenfolge. Wo es und eine Form-, Genre- oder Craft-Datei sich in Bezug auf Material, Bedienelemente oder Bewegung unterscheiden, gewinnt das Theme; der Boden und die eigenen Worte des Benutzers schlagen beide.

4. Laden

Genau diese, für einen Seiten-Build: references/layout.md · references/anatomy.md, der Teil des Auftrags · references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md und sein Bild, bereits beim Austeilen gesehen (ein benanntes Theme: sieh dir jetzt <slug>.jpg an). Nimm vom Theme seine Palettenbalance, Schriftstimme, Oberflächen und seine Range (die Abschnitte, die es ohne ein Foto macht), niemals sein Layout · references/gates.md § 1 bis § 4. Ein individueller Durchlauf lädt direction.md anstelle der Layout-, Genre- und Theme-Dateien.

Nur bei Bedarf, in references/: eine Makrostruktur-Datei · microinteractions.md für zustandsbehaftete UI · interaction-and-states.md für Formulare · responsive.md für ein ungewöhnliches Layout · texture.md wenn das Theme Textur nennt · scroll-choreography.md für eine Scroll-Geschichte · dark-mode.md für beide Modi · data-viz.md für Diagramme · fonts.md bei individuellen Durchläufen · comp.md bei Signal 9 (Comps, generierte Standbilder) · design-md.md um das System zu sperren.

gates.md § 5 wartet auf Schritt 7, § 6 auf die Reviews; mehr zu laden sind die größten vermeidbaren Kosten.

5. Der Picks-Block

Der einzige Vortrag der Entscheidungen des Durchlaufs und das Umleitungsfenster des Benutzers:

**Hallmark · v2.0.0**

- **Form** · Werkbank, aus Zug 7f3a2c · Genre modern-minimal · Auftrag: anmelden, die Aktion im Hero und neben dem Preis
- **Theme** · Coral, ausgeteilt 2/3 (warmes Grau, ein Coral-Signal, General Sans, weiche Pillen) · löscht Cobalt auf Papierband
- **Chrome** · Nav: kantenbündig, ein Wortmarke und eine Aktion · Footer: ein Mast, die Wortmarke über den Links
- **Hero** · Bühne: Kopf in Spalten 1 bis 5, der Slot auf 6 bis 12 bei 560px, zentriert
- **Signatur** · die Rechnungsliste, die eine überfällige Zahlung verfolgt, live im Hero gebaut
- **Abschnitte** · Hero (die Rechnungsliste) · Angepinnt (eine überfällige Zahlung, in drei Panels verfolgt) · Switcher (die Ansicht des Kunden und deine) · Tabelle (Preise) · Footer
- **Material** · echt: die 2-Minuten-Einrichtung, der CSV-Import, Lissabon · Bilder: die Rechnungsliste im Hero gebaut, Bibliotheksfotos eines Lissabon-Studios (gedämpft) · abwesend: Logos, Zitate, Metriken
- **Durchlauf** · nach dem Build ausführen

Die Zeilen eines individuellen Durchlaufs stehen in direction.md. Dann eine ruhige Zeile, übersprungen im Komponentenumfang oder wenn design.md existiert: System portabel? Sage lock the system für eine design.md. Bei Signal 9 läuft hier comp.md.

6. Bau

• Beginne mit dem Gerüst. node <skill-dir>/scripts/theme.mjs scaffold <slug> (mit dem --dealt des Austeilens; --custom bei einem individuellen Durchlauf) schreibt tokens.css (die Tokens des Themes und die gemeinsame Skala) und base.css (was der Boden bereits entschieden hat) neben das Stylesheet des Projekts und gibt das Stempel-Skelett, die zwei Imports und das Slot-Skript aus. Schreibe nur die Seite.
• Lies references/patterns.md einmal: Bedienelemente in allen acht Zuständen, ein Slot, eine fehlende Tatsache, ein Formular, das nirgendwo hin postet, eine Enthüllung, Zahlen, die vergleichen. Nimm ihre Form, niemals ihren Text.
• Hero zuerst. Schreibe die Nav und den Hero, nichts darunter noch, führe node <skill-dir>/scripts/sloplint.mjs <file> --render --stage hero aus, dann die Hero-Review in frischem Kontext (gates.md § 6). Baue die Abschnitte, sobald der Hero ausgeliefert ist; Bildnachweise und seitenweite Überprüfungen warten auf die Seite.
• Eine Idee pro Bildschirm, groß setzen. Hero: eine Überschrift von sieben Wörtern oder weniger (50 Zeichen), ein Satz von zwölf Wörtern oder weniger, eine oder zwei Aktionen. Sechs bis neun Abschnitte, Hero und Footer eingeschlossen (fünf bei einem dünnen Prompt), maximal 450 sichtbare Wörter, jedes ein Stück des eigenen Inhalts der Kategorie in einer Komposition mit Masse (layout.md § 4 und § 5). Der Hero ist der erste Bildschirm und nur der erste Bildschirm, seine Haltung aus dem Auftrag genommen (`layout.m