Sieht jede KI-Webseite sofort nach KI aus? Hallmark v2 für Claude Code / Codex installieren, Seiten mit 48 Themes erzeugen und selbst prüfen lassen (Praxistest mit Drittanbieter-API-Key)

Lassen Sie eine KI eine Landingpage schreiben, sehen acht von zehn Ergebnissen fast gleich aus: Karten mit runden Ecken im Sechser-Raster, Verlaufs-Buttons, ein einzelnes farbiges Wort in der Überschrift und am Seitenende ein Feld für das E-Mail-Abo. Genau gegen diese Muster richtet sich Hallmark von Together AI. Wie der Autor @nutlope am 23. Oktober in einemPost, wurde Hallmark nach 30.000 Stars und 60.000 Installationen mit v1 von Grund auf neu geschrieben und als v2 veröffentlicht. Es läuft in Claude Code, Codex und OpenCode.

Vorab das Fazit:

• Hallmark ist ein Webdesign-Skill und lässt sich mit einer einzigen Zeile npx skills add nutlope/hallmark installieren.README führt Claude Code, Codex, Cursor und OpenCode als unterstützte Tools auf.
• v2 bringt 48 Themes mit. Je nach Anforderung schlägt es zunächst 3 davon zur Auswahl vor und beginnt erst nach Ihrer Entscheidung mit der Seite.
• Nach dem Schreiben prüft es mit sloplint --render in einem echten Chrome (laut README bei 8 Breiten) auf KI-typische Muster, Kontrast, Fokusring und Mobil-Layout und korrigiert sich selbst, wenn etwas durchfällt.
• Wir haben es mit dem API Key dieser Seite getestet: Claude Code brauchte 26 Sekunden für 3 Themes und 3 Minuten 40 Sekunden, um die komplette Seite zu schreiben und auf sloplint 0 FAIL zu bringen;/hallmark audit fand bei einer gewöhnlichen KI-Landingpage 41 FAIL;/hallmark redesign überarbeitete alles in 6 Minuten 11 Sekunden, danach 0 FAIL. In Codex brauchte $hallmark für 3 Themes 34 Sekunden.

API Key erstellen →

Woran man eine KI-Webseite erkennt

Die README von Hallmark listet die Lieblingsmuster der Modelle ganz offen auf. Einige davon kennen Sie wahrscheinlich:

Hallmark teilt die Prüfungen in drei Stufen:Floor muss bestanden werden (Kontrast, Fokus, reduzierte Bewegung, erfundene Fakten, Mobil-Layout);Reflex sind die Gewohnheits-Defaults des Modells, mit Begründung können sie dokumentiert und freigestellt werden;Finish ist Feinschliff und blockiert die Veröffentlichung nicht.

Wenn Sie nicht eine Webseite, sondern den KI-Ton eines Artikels bearbeiten wollen, lesen SieMit Claude Code KI-Artikel umschreiben.

Was Hallmark v2 bietet

Die folgenden Angaben stammen aus der Hallmark-README und deroffiziellen Website:

Laut FAQ der Website braucht Hallmark selbst keinen eigenen API Key: Die Fotos stammen aus der eigenen Bibliothek mit offener Lizenz, ein Key für Bildgenerierung ist optional. Verbraucht wird das Modell, das Sie in Claude Code oder Codex nutzen.

Schritt 1: Claude Code / Codex auf diese Seite verweisen

Claude Code

Tragen Sie in die globale Datei ~/.claude/settings.json ein:

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.aicodewith.ai",
    "ANTHROPIC_AUTH_TOKEN": "你的 API Key"
  },
  "model": "claude-sonnet-5-5"
}

ANTHROPIC_BASE_URL nicht anhängen /v1. Unser Test lief mit Claude Code 2.1.309 + claude-sonnet-5-5.

Ein Hallmark-Build ruft das Modell mehrfach auf, führt Skripte aus und überarbeitet die Seite wiederholt; das verbraucht mehr Kontingent als ein normaler Chat. Wenn Sie ein Claude-Abo nutzen, lesen Sie zur Kontingentberechnung vorabWas tun, wenn das Claude-Code-Kontingent aufgebraucht ist.

Codex

Tragen Sie in die globale Datei ~/.codex/config.toml einen benutzerdefinierten Provider ein. Die Schreibweise ist dieselbe wie in derAnleitung zur Codex config.toml:

model = "gpt-6.1-sol"
model_reasoning_effort = "medium"
model_provider = "aicodewith"

[model_providers.aicodewith]
name = "aicodewith"
base_url = "https://api.aicodewith.ai/chatgpt/v1"
wire_api = "responses"
experimental_bearer_token = "你的 API Key"

Unser Test lief mit Codex CLI 0.164.0 + gpt-6.1-sol.

Schritt 2: Hallmark installieren

# 装给所有项目（-g），Claude Code 和 Codex 都装
npx skills add nutlope/hallmark -g

# 只装给一个客户端
npx skills add nutlope/hallmark -g --agent claude-code
npx skills add nutlope/hallmark -g --agent codex

Voraussetzung ist Node 18 oder höher. Allein die Installation von Claude Code dauerte bei uns 14 Sekunden. Installationsort und Aufruf:

Für die Browserprüfung (sloplint --render) brauchen Sie zusätzlich Chrome und puppeteer-core:

npm i -g puppeteer-core

Ohne diese beiden führt Hallmark nur statische Prüfungen aus. Auf unserem Rechner ist /usr/bin/google-chrome, und das Skript hat es selbst gefunden.

Schritt 3: Landingpage für eine Budgetbuch-App erstellen, zuerst 3 Themes wählen

Starten Sie Claude Code in einem leeren Verzeichnis und geben Sie ein:

/hallmark 给记账 App「账小记」做一个落地页，写成 /workspace/hm/build/index.html。先给我 3 套主题挑。

Hallmark startet zuerst theme.mjs deal, und wählt nach Bedarf 3 von 48 Themes: Grid (Raster-Poster), Formwork (Betonbaustellenschild), Studio (Korrekturabzug eines Designstudios). Zu jedem stehen Farben, Schriften und die Eignung für eine Buchhaltungs-App dabei. Außerdem fragt es nach Material: App-Screenshots, echte Nutzerzahlen, Preise und Bewertungen. Gibt es keine, sagt es ausdrücklich, dass es nichts erfindet, und lässt Bildplatzhalter stehen. Diese Runde dauerte 26 Sekunden.

Claude Code 里 /hallmark 先发 3 套主题并追问素材的终端输出

Wir antworteten:

选 1 Grid。受众是上班族，转化动作是下载 App，调性偏轻松。没有截图和真实数据，用占位，不要编数字。

Danach hat es Folgendes getan:

1. Mit theme.mjs scaffold erzeugte es tokens.css und base.css, alle Farben, Schriftgrößen und Abstände landen in Tokens.
2. Für den englischen Schriftstapel von Grid ergänzte es chinesische Fallbacks (PingFang SC, Noto Sans SC, Microsoft YaHei).
3. Zuerst schrieb es nur den ersten Screen und startete einmal sloplint.mjs --render; Screenshots entstanden bei den Screen-Größen 1280, 1440 und 1920 sowie bei den Ganzseiten-Größen 1440 und 375.
4. Die erste Prüfung meldete unter anderem einen Kontrast von 1.00:1 beim Label „Beispieldaten“ und einen zu dünnen Download-Bereich. Es korrigierte alles der Reihe nach, bis sloplint: clean. 0 FAIL, 0 REFLEX, 0 WARN.

Die ganze Runde dauerte 3 Minuten 40 Sekunden. So sieht der fertige erste Screen aus: Die Überschrift hat durchgehend eine Farbe, es gibt keinen Eyebrow und kein einzeln eingefärbtes Wort; alle Zahlen in der Handy-Vorschau sind ¥ 00.00 und als „Beispieldaten“ gekennzeichnet.

Hallmark 用 Grid 主题做出的记账 App 落地页首屏（headless Chrome 截图）

Mit Codex ist es genauso. Wir gaben in Codex $hallmark 给记账 App「账小记」做一个落地页。这一步只发 3 套主题让我挑，不要写页面。, ein, und es startet ebenfalls zuerst theme.mjs deal, diesmal mit Newsprint, Hedgerow und Editorial, in 34 Sekunden. Der Seed der Auswahl ist bei jedem Durchlauf ein anderer, deshalb unterscheiden sich die 3 Themes der beiden Clients.

Codex 里 $hallmark 发出 3 套主题的终端输出

Schritt 4: /hallmark audit bewertet bestehende Seiten

Als Vergleichsbasis verzichten wir zunächst auf Hallmark und lassen Claude Code direkt „eine einseitige Landingpage für eine Buchhaltungs-App“ bauen. Nach 28 Sekunden war sie fertig: grünes Theme, Handy-Mockup im ersten Bildschirm, Feature-Karten im Sechser-Raster, drei Schritte zum Einstieg, FAQ und ein Download-Band. Außerdem hat Claude Code eigenmächtig eine Gebührenregelung dazugeschrieben. Diese erfundene Aussage und die zugehörigen Button-Texte haben wir gelöscht und die Seite dann prüfen lassen.

/hallmark audit /workspace/hm/bare/index.html

audit erstellt nur einen Bericht und ändert keine Dateien. Nach 50 Sekunden lag das Ergebnis vor: 41 FAIL, 18 REFLEX, 5 WARN. Hier einige repräsentative Punkte:

• Floor: Farben und Schriften sind fest verdrahtet, außerhalb der Tokens; 10 Emojis dienen als Icons; der Fokusring hat nur ein Kontrastverhältnis von 1,60:1; der Button mit weißer Schrift auf grünem Grund kommt auf 3,45:1.
• Reflex 38iii: „am Monatsende kein Chaos“ ist einzeln eingefärbt. Das ist genau das eingangs erwähnte einzelne farbige Wort in der Überschrift.
• Erster Bildschirm: Auf einem Display mit 1440×900 endet der Inhalt des ersten Bildschirms schon bei 575px; vor dem Button stapeln sich 4 Textblöcke.
• Erfundene Zahlen: „drei Sekunden“, „¥ 2,368.50“, „Budget zu 68 % verbraucht“ und „innerhalb einer Minute“ stehen als Fakten auf der Seite. Das Skript kann nicht beurteilen, ob sie stimmen, und listet sie deshalb zur Bestätigung auf.
• Schablonenhafter Aufbau: Das Sechser-Raster der Funktionen, die drei Einstiegsschritte, die FAQ und das CTA-Band würden auch mit dem Namen jeder beliebigen Buchhaltungs-App funktionieren.

Am Ende sagt audit, welche Stufe das Problem beheben kann: restyle (Layout beibehalten, Stilsystem austauschen) räumt den Großteil der Floor-Probleme ab; Probleme beim ersten Bildschirm, beim Umfang und bei der Struktur lassen sich nur mit full (Layout neu aufbauen) lösen.

/hallmark audit 对普通 AI 落地页的审计报告终端输出

Schritt 5: /hallmark redesign überarbeitet die Seite und vergleicht

Wir kopieren die Seite und lassen sie komplett neu aufbauen:

/hallmark redesign /workspace/hm/redo/index.html 做 full 重做，这个目录是干净的副本。页面里的编造数字一律改成占位或删掉。

Entscheidend bei redesign ist, dass „Inhalte und Links erhalten bleiben“. Zuerst notiert es mit sloplint --before alle Links, Felder und Überschriften der Originalseite und vergleicht nach dem Neuaufbau mit sloplint --kept , ob etwas fehlt. Im Test hat es die ursprüngliche Überschrift „In drei Sekunden gebucht, am Monatsende kein Chaos“ in „Mal eben notiert, am Monatsende kein Chaos“ geändert,--kept schlug sofort mit headings gone or reworded, an. Erst als es die Begründung für die Änderung in den Hallmark-Eintrag in der ersten CSS-Zeile der Seite geschrieben hatte, ließ es die Änderung durch.

Diesmal wählte es das Theme Loom (cremeweißes Papier, Serifen-Überschriften, ein indigoblaues Band). Das Ergebnis:

• 4 Anker auf der Seite, 6 Funktionen, 3 Schritte und die FAQ bleiben erhalten.
• Aussagen wie „drei Sekunden“ und „innerhalb einer Minute“ wurden gestrichen; ¥2,368.50, 68% und +8,000.00 wurden durch 00.00 ersetzt und als „Beispieldaten“ gekennzeichnet.
• Emoji-Icons und der Handyrahmen entfallen.
• sloplint --render --kept: 0 FAIL, 0 REFLEX, 1 WAIVED, 1 WARN. WAIVED betrifft den eher dünnen Umfang der FAQ; als Begründung nennt es, dass ein Redesign keine Inhalte hinzufügen darf, die auf der Originalseite fehlen. Die WARN entstand, weil lint „8,000“ am Komma trennt und deshalb nichts findet; diese Zahl steht im Text gar nicht mehr.

Die gesamte Runde dauerte 6 Minuten und 11 Sekunden.

/hallmark redesign 全量重做后的终端输出

Links vor dem Redesign, rechts danach, mit identischem Inhalt (Screenshot in headless Chrome, erster Bildschirm mit 1440×900):

普通 AI 落地页与 Hallmark redesign 后的首屏对比（headless Chrome 截图）

Gemessene Zeiten im Überblick

Eine Seite mit Hallmark zu schreiben dauert deutlich länger als direktes Schreiben. Die Zeit geht vor allem in die Schleife aus „eine Runde überarbeiten, eine Runde rendern und prüfen“.

Empfehlungen

• Zuerst Material liefern: Hallmark erfindet keine Nutzerzahlen, Bewertungen oder Rezensionen. Je mehr Sie liefern (Screenshots, echte Zahlen, Markenfarben), desto mehr wirkt die Seite wie Ihr Produkt.
• Bestehende Seiten ausdrücklich nennen: Hallmark ändert vorhandene Seiten nicht von sich aus. Sie müssen es ausdrücklich mit /hallmark redesign <路径>. Wenn das Layout bleiben und nur der Stil getauscht werden soll, sagen Sie keep the layout; wenn nur die Schablonen entfernt werden sollen, sagen Sie polish.
• Vor einem redesign sichern oder mit einer Kopie arbeiten: Wir haben die Seite kopiert und dann neu aufgebaut, damit sich beide Fassungen gut vergleichen lassen.
• Bei Nichtauslösung ausdrücklich nennen: Wenn Hallmark nicht automatisch greift, schreiben Sie direkt „use hallmark to build ...“.
• Chrome installieren: Ohne Chrome und puppeteer-core gibt es nur statische Prüfungen. Probleme, die sich erst beim Rendern messen lassen, etwa die Höhe des ersten Bildschirms oder der Kontrast, bleiben dann unentdeckt.

API Key erstellen →

FAQ

Was ist Hallmark?

Ein Webdesign-Skill von Together AI für Claude Code, Codex, Cursor und OpenCode. Er wählt zunächst 3 von 48 Themes zur Auswahl aus, gestaltet das Layout dann nach der Aufgabe, die die Seite erfüllen soll, und prüft am Ende in einem echten Browser auf typische KI-Muster und Barrierefreiheitsprobleme.

Wie installiere ich den Hallmark-Skill?

npx skills add nutlope/hallmark -g, erforderlich ist Node 18 oder höher. Installieren Sie nur einen Client plus --agent claude-code oder --agent codex. Für die Browserprüfung benötigen Sie außerdem npm i -g puppeteer-core und Chrome.

Wie rufe ich ihn in Claude Code und Codex auf?

In Claude Code verwenden Sie /hallmark <需求>, in Codex $hallmark <需求>. Auch die einfache Beschreibung „Erstelle eine Landingpage“ löst ihn in der Regel aus.

Kann ich eines der 48 Themes festlegen?

Ja. Zuerst schlägt Hallmark 3 Themes vor, Sie antworten einfach mit der Nummer. Wenn Sie kein Theme möchten, sagen Sie custom, dann gestaltet es nur nach Ihrer Beschreibung.

Was ist der Unterschied zwischen audit und redesign?

audit erstellt nur einen Bericht, ordnet die Probleme nach Floor, Reflex und Finish und ändert keine Dateien. redesign baut die Seite neu auf, behält standardmäßig Inhalte und Links bei und prüft mit sloplint --kept prüft, ob etwas fehlt.

Läuft Hallmark auch mit einem API Key eines Drittanbieters?

Ja. Wir haben bei Claude Code ANTHROPIC_BASE_URL auf https://api.aicodewith.ai, gesetzt und den benutzerdefinierten Provider von Codex auf https://api.aicodewith.ai/chatgpt/v1: In Claude Code liefen Installation, Theme-Auswahl, Seitenerstellung, audit und redesign durch, in Codex lief die Theme-Auswahl durch. Hallmark selbst braucht keinen zusätzlichen Key.

Kann ich die generierte Seite direkt live schalten?

Echte Inhalte müssen Sie noch ergänzen. Im Test waren die Links der Download-Buttons, die Kontaktdaten im Footer und die App-Screenshots Platzhalter. Hallmark listet am Ende auf, was Sie noch nachtragen müssen. Sehen Sie sich die Seite vor dem Livegang selbst im Browser an.