← Back to Home

Hallmark — Anti-AI-Slop Design Skill for Claude Code, Cursor, and Codex

2026-07-14

Hallmark — Anti-AI-Slop Design Skill

If you've ever asked an AI coding agent to build a landing page, you've seen the pattern: hero section → three feature cards → CTA → footer. Every time, same rhythm, same layout, just different colours.

Hallmark fixes this. Created by Nutlope (Hassan El Mghari) and powered by Together AI, Hallmark is a design skill for Claude Code, Cursor, and Codex that refuses to produce AI-generated-looking UIs. It encodes 57 slop-test gates, 20 distinct themes, and a pre-emit self-critique system that scores every output before it reaches your screen.

Hallmark Architecture

Why It's Trending

Hallmark hit 5,400+ GitHub stars in its first weeks because it solves a universal pain: every AI coding agent defaults to the same layout patterns. Hallmark forces structural variety — two pages for two different briefs shouldn't share the same hero → features → CTA → footer rhythm. They should feel like different websites, not colour-swaps of the same template.

The skill was built on the consensus of the anti-AI-slop design field: Anthropic's frontend-design skill, the Claude cookbook on frontend aesthetics, and the 2026 "tactile rebellion" movement. It's MIT-licensed and installs in seconds.

How It Works

Hallmark follows a 5-step pipeline that turns a plain-English design brief into a production-ready page or component.

Step 0 — Pre-Flight Scan

Before touching any code, Hallmark reads your project's DNA: font stack, colour palette, framework (Next.js, Astro, SvelteKit, vanilla), motion libraries, and spacing scale. It caches these findings in .hallmark/preflight.json so subsequent runs don't re-scan.

If a design.md file exists at the project root, Hallmark treats it as a locked design system and defers to it for all token values — typography, colour, spacing, and motion.

Step 1 — Genre and Signal Detection

Hallmark classifies the brief into one of four genres: Editorial, Modern-Minimal, Atmospheric, or Playful. It also detects creative-intent signals — if the user names a brand colour or asks for something the 20 catalog themes can't carry, it dispatches to a Custom branch that constructs a one-off OKLCH palette with a free-font pairing.

Step 2 — Theme and Macrostructure

Catalog mode (default) picks from 20 named themes — Hum, Cobalt, Carnival, Lumen, Garden, Riso, and more. Each theme defines a colour anchor, type-pairing, and spacing ethos.

Custom mode fires only when the brief carries creative intent that no catalog theme fits. It builds a made-to-measure palette, type, and layout from scratch.

Hallmark then selects a macrostructure — the whole-page shape — from catalogue of patterns. This is the key differentiator: two briefs of the same type get different structural fingerprints (section-heading placement, body composition, divider language, button voice, image treatment, and reveal pattern).

Step 3 — Design Generation

The design is rendered with locked tokens (no inline OKLCH/hex values), honest copy (no invented metrics like "+47% conversion"), and six disciplines that apply to every verb: pre-emit self-critique, no re-drawn chrome, mobile responsiveness at 320/375/414/768px, and no italic headers (a reliable AI tell).

Step 4 — Slop-Test Gates (57 Checks)

Before any output is delivered, it passes through 57 slop-test gates. These catch:

  • Anti-patterns: fake testimonials, invented numbers, stock-photo clichés
  • Token discipline: every colour and font must reference a named var(--token)
  • Mobile safety: no horizontal scroll, no two-line clickable text, collapsible section heads
  • Typography purity: no italic headers, no re-drawn browser chrome

Component-Scope Flow

If the brief targets a single element (button, card, modal, input), Hallmark switches to Component scope. It skips macrostructures and hero patterns, and instead produces the component plus an 8-state demo wrapper showing default, hover, focus, active, disabled, loading, error, and success states — all rendered in a single preview file.

Installation

Install Hallmark in seconds using npx:

npx skills add nutlope/hallmark

Run this command any time to update. Or copy the SKILL.md and references/ directory into:

  • Claude Code: ~/.claude/skills/hallmark/
  • Cursor: .cursor/rules/hallmark.mdc
  • Codex: ~/.codex/skills/hallmark/

Usage

Hallmark has one default behaviour and three explicit verbs:

Verb What it does
(default) Build new UI. Picks macrostructure, applies rules and slop test.
hallmark audit <target> Score existing code against anti-patterns. Punch list, no edits.
hallmark redesign <target> Keep copy + IA + brand, rebuild visual structure with a different fingerprint.
hallmark study <screenshot | URL> Extract the design DNA: macrostructure, type-pairing, colour anchor.

Examples

# Build a landing page (default)
"Build a landing page for a sourdough starter kit"

# Audit an existing page
hallmark audit ./index.html

# Redesign with a specific mood
hallmark redesign ./src/pages/ --mood atmospheric

# Study a design from a URL
hallmark study https://example.com

Resources

← Retour à l'Accueil

Hallmark — Un Skill de Design Anti-AI-Slop pour Claude Code, Cursor et Codex

2026-07-14

Hallmark — Un Skill de Design Anti-AI-Slop

Si vous avez déjà demandé à un agent de codage IA de construire une page d'accueil, vous avez vu le motif : hero section → trois cartes de fonctionnalités → CTA → pied de page. À chaque fois, le même rythme, la même mise en page, juste des couleurs différentes.

Hallmark résout ce problème. Créé par Nutlope (Hassan El Mghari) et propulsé par Together AI, Hallmark est un skill de design pour Claude Code, Cursor et Codex qui refuse de produire des UI d'apparence générique. Il encode 57 tests anti-slop, 20 thèmes distincts et un système d'auto-critique pré-émission qui évalue chaque sortie avant qu'elle n'atteigne votre écran.

Architecture Hallmark

Pourquoi ça Cartonne

Hallmark a atteint plus de 5 400 étoiles GitHub en quelques semaines parce qu'il résout un problème universel : chaque agent de codage IA par défaut sur les mêmes motifs de mise en page. Hallmark impose une variété structurelle — deux pages pour des briefs différents ne devraient pas partager le même rythme hero → fonctionnalités → CTA → pied de page. Elles devraient ressembler à des sites web différents, pas à des variations de couleurs du même modèle.

Le skill a été construit sur le consensus du domaine du design anti-AI-slop : le skill de design frontend d'Anthropic, le cookbook Claude sur l'esthétique frontend et le mouvement « tactile rebellion » de 2026. Il est sous licence MIT et s'installe en quelques secondes.

Comment ça Marche

Hallmark suit un pipeline en 5 étapes qui transforme un brief de design en anglais simple en une page ou un composant prêt pour la production.

Étape 0 — Analyse Pré-Vol

Avant de toucher au code, Hallmark lit l'ADN de votre projet : la pile de polices, la palette de couleurs, le framework (Next.js, Astro, SvelteKit, vanilla), les bibliothèques d'animation et l'échelle d'espacement. Il met en cache ces résultats dans .hallmark/preflight.json pour que les exécutions suivantes ne réanalysent pas.

Si un fichier design.md existe à la racine du projet, Hallmark le considère comme un système de design verrouillé et s'y réfère pour toutes les valeurs de tokens — typographie, couleur, espacement et mouvement.

Étape 1 — Détection du Genre et du Signal

Hallmark classifie le brief dans l'un des quatre genres : Éditorial, Moderne-Minimal, Atmosphérique ou Ludique. Il détecte aussi les signaux d'intention créative — si l'utilisateur nomme une couleur de marque ou demande quelque chose que les 20 thèmes du catalogue ne peuvent pas porter, il envoie vers une branche Custom qui construit une palette OKLCH sur mesure avec un appariement de polices libres.

Étape 2 — Thème et Macrostructure

Mode Catalogue (par défaut) choisit parmi 20 thèmes nommés — Hum, Cobalt, Carnival, Lumen, Garden, Riso, et plus. Chaque thème définit une ancre de couleur, un appariement typographique et une éthique d'espacement.

Mode Custom ne s'active que lorsque le brief porte une intention créative qu'aucun thème du catalogue ne peut satisfaire. Il construit une palette, une typographie et une mise en page sur mesure à partir de zéro.

Hallmark sélectionne ensuite une macrostructure — la forme de la page entière — à partir d'un catalogue de motifs. C'est le différenciateur clé : deux briefs de même type reçoivent des empreintes structurelles différentes (placement des titres de section, composition du corps, langage des séparateurs, voix des boutons, traitement des images et motif de révélation).

Étape 3 — Génération du Design

Le design est rendu avec des tokens verrouillés (pas de valeurs OKLCH/hex inline), un contenu honnête (pas de métriques inventées comme « +47% de conversion ») et six disciplines qui s'appliquent à chaque verbe : auto-critique pré-émission, pas de chrome redessiné, responsive mobile à 320/375/414/768px et pas de titres en italique (un signe révélateur d'IA).

Étape 4 — Tests Anti-Slop (57 Vérifications)

Avant qu'une sortie ne soit livrée, elle passe par 57 tests anti-slop. Ceux-ci détectent :

  • Anti-patrons : faux témoignages, chiffres inventés, clichés de photos stock
  • Discipline des tokens : chaque couleur et police doit référencer un var(--token) nommé
  • Sécurité mobile : pas de défilement horizontal, pas de texte cliquable sur deux lignes, titres de section repliables
  • Pureté typographique : pas de titres en italique, pas de chrome de navigateur redessiné

Flux Composant

Si le brief cible un élément unique (bouton, carte, modal, champ de saisie), Hallmark passe en mode Composant. Il saute les macrostructures et les motifs de hero, et produit plutôt le composant plus un wrapper de démo à 8 états montrant les états default, hover, focus, active, disabled, loading, error et success — tous rendus dans un seul fichier de prévisualisation.

Installation

Installez Hallmark en quelques secondes avec npx :

npx skills add nutlope/hallmark

Exécutez cette commande à tout moment pour mettre à jour. Ou copiez le répertoire SKILL.md et references/ dans :

  • Claude Code : ~/.claude/skills/hallmark/
  • Cursor : .cursor/rules/hallmark.mdc
  • Codex : ~/.codex/skills/hallmark/

Utilisation

Hallmark a un comportement par défaut et trois verbes explicites :

Verbe Ce qu'il fait
(par défaut) Construire une nouvelle UI. Choisit la macrostructure, applique les règles et le test anti-slop.
hallmark audit <cible> Évaluer le code existant contre les anti-patrons. Liste de correctifs, sans modification.
hallmark redesign <cible> Garder le contenu + l'architecture + la marque, reconstruire la structure visuelle avec une empreinte différente.
hallmark study <capture | URL> Extraire l'ADN du design : macrostructure, appariement typographique, ancre de couleur.

Exemples

# Construire une page d'accueil (par défaut)
"Construis une page d'accueil pour un kit de démarrage au levain"

# Auditer une page existante
hallmark audit ./index.html

# Redesign avec une ambiance spécifique
hallmark redesign ./src/pages/ --mood atmospheric

# Étudier un design depuis une URL
hallmark study https://example.com

Ressources