Des pages web générées par IA qui sentent l'IA au premier regard ? Installez Hallmark v2 sur Claude Code / Codex : 48 thèmes, génération de la page et auto-vérification (test réel avec une clé API tierce)

Demandez à une IA d'écrire une landing page : huit fois sur dix, le résultat se ressemble. Grille de six cartes aux coins arrondis, boutons en dégradé, un seul mot coloré dans le titre, et en bas de page un champ d'inscription par e-mail. Le Hallmark de Together AI s'attaque justement à ces automatismes. Selon l'auteur @nutlope, le 23 octobre, dans sonpost, Hallmark a été entièrement réécrit après avoir atteint 30 000 stars et 60 000 installations avec la v1, pour donner la v2, utilisable dans Claude Code, Codex et OpenCode.

En résumé :

• Hallmark est un skill de design web : une seule commande npx skills add nutlope/hallmark suffit pour l'installer.README indique la prise en charge de Claude Code, Codex, Cursor et OpenCode.
• La v2 propose 48 thèmes. Selon votre demande, elle en présélectionne d'abord 3 pour que vous choisissiez, et ne commence à écrire la page qu'après votre choix.
• Une fois la page écrite, elle la vérifie avec sloplint --render dans un vrai Chrome (le README parle de 8 largeurs). Elle contrôle les automatismes « IA », le contraste, les anneaux de focus et la mise en page mobile, puis corrige d'elle-même ce qui échoue.
• Nous l'avons testé avec la clé API de ce site : Claude Code a mis 26 secondes pour proposer 3 thèmes, et 3 min 40 s pour écrire la page complète et la corriger jusqu'à 0 FAIL avec sloplint ;/hallmark audit sur une landing page IA ordinaire, 41 FAIL détectés ;/hallmark redesign refonte complète en 6 min 11 s, 0 FAIL après la refonte. Dans Codex, $hallmark a proposé 3 thèmes en 34 secondes.

Créer une clé API →

À quoi ressemble une page web qui sent l'IA

Le README de Hallmark liste sans détour les automatismes préférés des modèles. Vous en avez sûrement déjà croisé plusieurs :

Hallmark répartit les contrôles en trois niveaux :Floor à passer obligatoirement (contraste, focus, réduction des animations, faits inventés, mise en page mobile) ;Reflex correspond aux réflexes par défaut du modèle ; avec une justification consignée, on peut l'exempter ;Finish concerne le peaufinage des détails et ne bloque pas la publication.

Si c'est l'effet IA d'un article, et non d'une page web, que vous voulez traiter, consultezRéécrire un article IA avec Claude Code.

Ce que propose Hallmark v2

D'après le README de Hallmark et lesite officiel:

La FAQ du site officiel précise que Hallmark n'a pas besoin de clé API distincte : les photos viennent de sa propre bibliothèque sous licence ouverte, et la clé de génération d'images est facultative. Ce qui consomme réellement, c'est le modèle que vous utilisez dans Claude Code ou Codex.

Étape 1 : pointer Claude Code / Codex vers ce site

Claude Code

Dans le fichier global ~/.claude/settings.json , écrivez :

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

ANTHROPIC_BASE_URL Ne mettez pas de /v1. Pour ce test, nous avons utilisé Claude Code 2.1.309 + claude-sonnet-5-5.

Un build Hallmark appelle le modèle sur plusieurs tours, exécute des scripts et retouche la page à répétition : cela consomme plus de quota qu'une conversation ordinaire. Si vous utilisez un abonnement Claude, voyez d'abordQue faire quand le quota de Claude Code est épuisé.

Codex

Dans le fichier global ~/.codex/config.toml , déclarez un provider personnalisé, avec une syntaxe identique à celle dututoriel de configuration 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"

Pour notre test, nous avons utilisé Codex CLI 0.164.0 + gpt-6.1-sol.

Étape 2 : installer Hallmark

# 装给所有项目（-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

Node 18 ou supérieur est requis. Lors de notre test, l'installation seule pour Claude Code a pris 14 secondes. Emplacement après installation et mode d'appel :

L'auto-vérification dans le navigateur (sloplint --render) nécessite aussi Chrome et puppeteer-core :

npm i -g puppeteer-core

Sans ces deux éléments, Hallmark ne lance que les contrôles statiques. Notre machine dispose de /usr/bin/google-chrome, que le script a trouvé lui-même.

Étape 3 : créer une landing page pour une App de comptabilité, en choisissant d'abord 3 thèmes

Lancez Claude Code dans un répertoire vide, puis saisissez :

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

Hallmark exécute d'abord theme.mjs deal, puis sélectionne 3 thèmes parmi les 48 selon la demande : Grid (affiche en grille), Formwork (panneau de chantier en béton), Studio (épreuve d'agence de design). Chacun détaille palette, polices et pertinence pour une App de comptabilité. Il demande aussi des éléments : captures de l'App, nombre réel d'utilisateurs, prix et avis. À défaut, il indique clairement qu'il n'inventera rien et met des emplacements d'image. Ce tour a pris 26 secondes.

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

Notre réponse :

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

Il a ensuite fait ceci :

1. Avec theme.mjs scaffold , il a généré tokens.css et base.css, toutes les couleurs, tailles de police et espacements étant placés dans des tokens.
2. Il a ajouté des polices de secours chinoises (PingFang SC, Noto Sans SC, Microsoft YaHei) à la pile de polices anglaises de Grid.
3. Il n'a d'abord écrit que le premier écran, puis lancé sloplint.mjs --render, avec des captures aux trois tailles de premier écran 1280, 1440 et 1920, et aux deux tailles de page complète 1440 et 375.
4. Le premier contrôle a signalé un contraste de 1.00:1 sur l'étiquette « Données d'exemple », une zone de téléchargement trop mince, etc. Il a corrigé point par point, jusqu'à sloplint: clean. 0 FAIL, 0 REFLEX, 0 WARN.

Toute la boucle a pris 3 min 40 s. Voici le premier écran obtenu : le titre tient en une seule couleur, sans eyebrow ni mot coloré isolé, et les chiffres de la maquette mobile sont tous ¥ 00.00, marqués « Données d'exemple ».

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

Avec Codex, c'est pareil. Dans Codex, nous avons saisi $hallmark 给记账 App「账小记」做一个落地页。这一步只发 3 套主题让我挑，不要写页面。, et il a lui aussi commencé par lancer theme.mjs deal, cette fois, le tirage a donné Newsprint, Hedgerow et Editorial, en 34 secondes. La graine change à chaque tirage, d'où des 3 thèmes différents d'un client à l'autre.

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

Étape 4 : /hallmark audit note une page existante

Pour avoir un point de comparaison, nous avons d'abord laissé Hallmark de côté et demandé à Claude Code de « réaliser une landing page d'une seule page pour une application de comptabilité personnelle ». Il a terminé en 28 secondes : thème vert, maquette de téléphone dans le premier écran, grille de six cartes de fonctionnalités, prise en main en trois étapes, FAQ, bandeau de téléchargement coloré. Il a aussi pris l'initiative d'écrire une politique tarifaire. Nous avons supprimé cette mention inventée et les libellés de boutons associés avant de lancer l'audit.

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

audit produit uniquement un rapport et ne modifie aucun fichier. Au bout de 50 secondes, le résultat tombe : 41 FAIL, 18 REFLEX et 5 WARN. Voici quelques cas représentatifs :

• Floor: couleurs et polices écrites en dur, hors des tokens ; 10 emoji utilisés comme icônes ; contraste de l'anneau de focus de seulement 1,60:1 ; contraste de 3,45:1 pour les boutons à texte blanc sur fond vert.
• Reflex 38iii: « Fins de mois sans flou » est coloré à part, ce qui correspond exactement au « mot coloré isolé dans le titre » évoqué en introduction.
• Premier écran: sur un écran de 1440×900, le contenu du premier écran s'arrête à 575px ; 4 blocs de texte précèdent le bouton.
• Chiffres inventés: « trois secondes », « ¥ 2,368.50 », « budget utilisé à 68 % » et « en moins d'une minute » sont présentés comme des faits sur la page. Le script ne peut pas en juger la véracité, il les liste pour que vous les validiez.
• Structure stéréotypée: grille de six fonctionnalités, prise en main en trois étapes, FAQ, bandeau CTA. Cela fonctionnerait tel quel avec le nom de n'importe quelle autre application de comptabilité.

Enfin, l'outil indique quel niveau de correction est possible : restyle (on garde la mise en page, on change le système de styles) élimine l'essentiel des problèmes Floor ; les problèmes de premier écran, de volume et de structure ne se règlent qu'avec full (refonte de la mise en page).

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

Étape 5 : /hallmark redesign refait la page et compare

Nous avons copié cette page, puis demandé une refonte complète :

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

Le point clé de redesign est de « conserver le contenu et les liens ». Il commence par utiliser sloplint --before pour noter les liens, les champs et les titres de la page d'origine, puis, après la refonte, utilise sloplint --kept pour comparer et alerter dès qu'un élément manque. Lors du test, il a transformé le titre d'origine « Une dépense notée en trois secondes, des fins de mois sans flou » en « Une dépense notée d'un geste, des fins de mois sans flou », et--kept a aussitôt signalé headings gone or reworded. Il n'a laissé passer la modification qu'après avoir consigné sa justification dans l'enregistrement Hallmark, à la première ligne du CSS de la page.

Cette fois, il a choisi le thème Loom (papier crème, titres à empattement, un bandeau bleu indigo). Résultat :

• Les 4 ancres internes, les 6 fonctionnalités, les 3 étapes et la FAQ sont conservés.
• Les formules comme « trois secondes » ou « en moins d'une minute » sont supprimées ; ¥2,368.50, 68 % et +8,000.00 sont remplacés par 00.00 et marqués « données d'exemple ».
• Les icônes emoji et le cadre de téléphone disparaissent.
• sloplint --render --kept: 0 FAIL, 0 REFLEX, 1 WAIVED, 1 WARN. Le WAIVED concerne le volume un peu mince de la section « Questions fréquentes » : l'outil explique qu'une refonte ne doit pas ajouter de contenu absent de la page d'origine. Le WARN vient du lint, qui a coupé « 8,000 » au niveau de la virgule et n'a donc rien trouvé ; ce nombre n'apparaît plus dans le texte.

L'ensemble du cycle a pris 6 min 11 s.

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

À gauche, avant la refonte ; à droite, après, avec le même contenu (capture headless Chrome, premier écran en 1440×900) :

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

Récapitulatif des durées mesurées

Écrire une page avec Hallmark est bien plus lent que de l'écrire directement : le temps part surtout dans la boucle « une passe de modifications, une passe de rendu et de vérification ».

Conseils d'utilisation

• Fournissez d'abord la matière: Hallmark n'invente ni nombre d'utilisateurs, ni notes, ni avis. Plus vous en fournissez (captures, chiffres réels, couleurs de marque), plus la page ressemble à votre produit.
• Nommez-le pour modifier un site existant: il ne touche pas de lui-même aux pages existantes, il faut utiliser /hallmark redesign <路径>. Pour conserver la mise en page et ne changer que le style, dites keep the layout; pour ne retirer que les poncifs, dites polish.
• Sauvegardez avant un redesign, ou travaillez sur une copie: nous avons dupliqué la page avant de la refaire, pour comparer facilement.
• Nommez-le s'il ne se déclenche pas: s'il ne s'est pas activé tout seul, dites simplement « use hallmark to build ... ».
• Installez Chrome: sans Chrome ni puppeteer-core, seules les vérifications statiques sont possibles. Les problèmes qui exigent un rendu pour être mesurés, comme la hauteur du premier écran ou le contraste, passent à travers.

Créer une API Key →

Questions fréquentes

Qu'est-ce que Hallmark ?

Un skill de design web signé Together AI, pour Claude Code, Codex, Cursor et OpenCode. Il choisit d'abord 3 thèmes parmi 48 et vous laisse trancher, puis structure la page selon la tâche qu'elle doit accomplir, et enfin vérifie dans un vrai navigateur les poncifs « façon IA » et les problèmes d'accessibilité.

Comment installer le skill Hallmark ?

npx skills add nutlope/hallmark -g, avec Node 18 ou supérieur. Pour n'installer qu'un seul client, ajoutez --agent claude-code ou --agent codex. Pour la vérification dans le navigateur, il faut aussi npm i -g puppeteer-core et Chrome.

Comment l'appeler dans Claude Code et Codex ?

Dans Claude Code, utilisez /hallmark <需求>, et dans Codex, utilisez $hallmark <需求>. Décrire directement « faire une landing page » suffit généralement à le déclencher.

Peut-on choisir parmi les 48 thèmes ?

Oui. Il commence par en proposer 3, et il vous suffit de répondre avec le numéro. Si vous ne voulez pas de thème, dites custom : il conçoit alors la page uniquement d'après votre description.

Quelle différence entre audit et redesign ?

audit produit uniquement un rapport, qui classe les problèmes par niveau (Floor, Reflex, Finish), sans modifier de fichier. redesign refait la page, conserve par défaut le contenu et les liens, et utilise sloplint --kept pour vérifier que rien n'a été oublié.

Hallmark fonctionne-t-il avec une API Key tierce ?

Oui. Dans Claude Code, nous avons redirigé ANTHROPIC_BASE_URL vers https://api.aicodewith.ai, et nous avons redirigé le provider personnalisé de Codex vers https://api.aicodewith.ai/chatgpt/v1: dans Claude Code, l'installation, la proposition de thèmes, l'écriture de la page, l'audit et le redesign ont tous fonctionné, et dans Codex, la proposition de thèmes a fonctionné aussi. Hallmark n'a pas besoin de clé supplémentaire.

Les pages générées peuvent-elles être mises en ligne telles quelles ?

Il faut encore ajouter du vrai contenu. Lors de nos tests, les liens des boutons de téléchargement, les coordonnées du pied de page et les captures de l'App étaient des éléments provisoires. Hallmark liste en fin de session ce qu'il vous reste à fournir. Relisez la page vous-même dans le navigateur avant la mise en ligne.