IA Skills: Hallmark vs Impeccable

Beaucoup de développeurs utilisent Claude Code pour générer leurs landing pages mais peu exploitent réellement tout son potentiel.

La plupart du temps Claude produit des sites propres et fonctionnels mais qui finissent par tous se ressembler: mêmes structures, mêmes sections, mêmes composants et une direction artistique souvent très conventionnelle. Il peut parfois générer de très belles interfaces, mais il reste souvent cette impression qu’il manque quelque chose: davantage de personnalité, d’originalité et de cohérence visuelle.

C’est justement là que les skills deviennent intéressantes. Elles permettent d’orienter Claude vers une approche beaucoup plus poussée du design et d’éviter ce fameux effet d’“AI slop”: ces interfaces générées par IA immédiatement reconnaissables, génériques et sans véritable identité.

J’ai récemment testé deux skills particulièrement intéressantes: Hallmark et Impeccable

Leur objectif est assez similaire: pousser Claude à produire des interfaces plus travaillées, plus originales et plus professionnelles. Pourtant elles n’aboutissent pas exactement aux mêmes résultats ni aux mêmes choix de design.

Et c’est justement ce qui les rend intéressantes: plutôt que de les opposer, Hallmark et Impeccable pourraient même être utilisées de manière complémentaire.

À retenir :

• Hallmark est particulièrement intéressant grâce à sa fonctionnalité `study` qui permet de s’inspirer du design d’autres sites.
• Impeccable est très intéressant pour développer une idée et mettre en œuvre des concepts plus complexes. Il permet également d’enrichir et d’étendre l’idée de départ.
• Les deux skills sont complémentaires et peuvent être utilisés conjointement.

Mon cas d'usage

Pour faire ce test, j’avais besoin d’une landing page pour un projet nommé Remotus, que vous pouvez retrouver sur la page d’accueil, dans la section « Mes projets ».

J’ai commencé de la manière la plus simple possible: j’ai demandé à Claude Code d’analyser le projet, d’en comprendre les principales fonctionnalités et de générer une landing page en mettant l’accent sur certains points que je lui avais indiqués.

Le résultat était tout à fait convenable. Claude m’a fourni une landing page propre, fonctionnelle et suffisamment aboutie pour que je puisse l’utiliser telle quelle pour une première version moyennant quelques petites corrections.

Vous pouvez d’ailleurs voir cette première version ici.

Pour ce premier essai, j’ai utilisé Claude Sonnet 5 avec un niveau d’effort réglé sur High. Il est donc tout à fait possible qu’un modèle plus performant ou un niveau d’effort supérieur aurait produit un résultat encore meilleur dès le premier passage.

Mais cette première version allait justement me servir de base de comparaison.

J’ai ensuite décidé d’itérer sur exactement le même design en testant successivement les deux skills Hallmark, puis Impeccable, afin de voir si elles tenaient réellement leurs promesses et jusqu’à quel point elles pouvaient transformer une landing page déjà correcte.

L’idée était essentiellement de demander à Claude de redesigner la landing page en utilisant la skill concernée, tout en lui précisant soit une direction visuelle particulière, soit de conserver l’esprit général du design existant.

L’objectif était justement de ne pas surcharger le prompt, afin d’observer ce que chaque skill pouvait réellement apporter par elle-même au résultat final.

Hallmark - version 1

Prompt

/hallmark redesign

Claude m'a ensuite posé quelques questions afin de mieux cerner la direction à prendre.

Questions

· Which feeling should the redesigned Remotus landing page have? (The current one is dark, violet, terminal-flavoured.) → Keep dark, restructure
· How far may I go on the existing implementation? → Full rebuild of these files

Résultat

http://remotustestlandingpage-usehallmark1-294q-f3d020-188-245-77-74.sslip.io/

Avis

Hallmark a globalement conservé la direction artistique du design de base, ce qui correspondait à ce que je lui avais demandé. La majorité des sections ont cependant été retravaillées et sont à mon sens de meilleure qualité.

Je regrette néanmoins la disparition de l'effet de curseur dans le header, au niveau du titre. Je trouvais que ce petit détail apportait une vraie touche « tech » et correspondait particulièrement bien à l'univers de Remotus.

Autre changement que j'apprécie moins: la disparition du Bento Grid, remplacé par une grille beaucoup plus classique. Le résultat reste propre et l'animation au scroll fonctionne plutôt bien mais je trouve que le Bento Grid donnait davantage de rythme et de personnalité à la page. Visuellement il rendait la section plus vivante qu'une simple grille de fonctionnalités.

Je préfère également le Hero de la version originale, notamment dans sa partie supérieure. En revanche la partie située juste en dessous, avec les quatre arguments de vente principaux, est clairement mieux réussie dans cette nouvelle version.

Ces quatre éléments sont mieux hiérarchisés, plus lisibles et ressortent davantage visuellement. Le message principal est donc plus facile à comprendre en quelques secondes.

Conclusion

Dans ce premier test, Hallmark a surtout effectué comme demandé, une refonte du design existant et de sa structure, sans chercher à repartir dans une direction artistique complètement différente.

Et le résultat est déjà suffisamment propre pour être utilisé en production à mon sens.

L'idéal serait toutefois de réaliser un mélange entre le design original et cette nouvelle version :

• reprendre la partie supérieure du Hero de l'ancien design ;
• réintégrer le Bento Grid original à la place de la nouvelle section « Fonctionnalités » ;
• remettre l'effet de curseur dans le header ;
• conserver les quatre arguments de vente retravaillés par Hallmark ;
• garder le footer de la version master.

On obtiendrait ainsi une version qui conserverait la personnalité du design original tout en profitant des améliorations de structure et de lisibilité apportées par Hallmark.

Hallmark - version 2

Prompt

Cette fois, j’ai simplement lancé la commande Hallmark sans lui donner davantage d’instructions, afin de voir comment la skill allait me guider.

/hallmark

Claude m’a ensuite répondu avec plusieurs questions destinées à préciser la direction du redesign.

Questions

1. Audience: Who will use this, and what do they care about?
2. Use case: What is the one action the page should drive?
3. Tone: Pick an extreme: editorial, brutalist, soft, utilitarian, luxury, playful, technical or austere. "Clean and modern" isn't a tone.

I also need to know the scope. Should I:
- audit the current page and return a ranked punch list without editing,
- redesign it inside the existing implementation (index.html, src/input.css, tokens.css), or
- build something new, such as a new section or a separate page?

Or say "go ahead" and I'll infer everything from the existing page. I'll tell you what I picked.

Réponse

J’ai volontairement donné une réponse très simple :

Redesign le projet avec le ton "soft".

Résultat

http://remotustestlandingpage-usehallmark2-pzxx-7484a8-188-245-77-74.sslip.io/

Avis

Quelques sections ont été modifiées mais les changements les plus importants concernent surtout la direction artistique générale de la landing page.

Sur ce point Hallmark a bien respecté ma consigne: le résultat est effectivement beaucoup plus soft, avec une interface plus douce, plus légère et moins agressive visuellement.

En revanche c’est également là que le design me convainc beaucoup moins.

Je trouve le résultat assez similaire à de nombreuses landing pages qui adoptent déjà ce type de direction artistique. Il faut aussi reconnaître qu’il n’existe probablement pas une infinité de façons de produire une interface réellement « soft » sans retomber sur certains codes graphiques assez classiques.

Le résultat n’est donc pas mauvais en soi mais il manque selon moi de personnalité.

Surtout je trouve que cette direction visuelle correspond beaucoup moins à Remotus. L’application possède un univers plutôt technique et orienté développeurs et ce redesign atténue justement une partie de cette identité.

Conclusion

Hallmark a ici correctement interprété le ton que je lui avais demandé et le résultat montre bien l’influence qu’une simple indication comme « soft » peut avoir sur toute la direction artistique d’une page.

Pour autant cette version ne correspond pas à ce que je recherche pour Remotus.

Le design est propre et cohérent mais je le trouve trop générique et moins adapté à l’identité du projet que la version originale ou que le premier redesign réalisé avec Hallmark.

Ce test reste néanmoins intéressant car il montre que la skill est capable de faire évoluer assez fortement l’atmosphère d’une interface à partir d’une consigne très courte.

Hallmark - version 3

Ici j’ai voulu faire quelque chose de complètement différent: au lieu de simplement lui demander de retravailler le design existant, je lui ai demandé de s’inspirer d’un site que je lui fournissais comme référence.

Hallmark possède justement une fonction très intéressante qui permet d’étudier un design à partir d’une URL ou d’un screenshot. Je n’ai pas trouvé de fonctionnalité directement équivalente dans Impeccable.

Pour ce test j’ai choisi https://laravel.com/cloud, tout simplement parce que j’aime beaucoup la direction artistique de cette page.

Prompt

Je lui ai fourni un screenshot de la page complète de https://laravel.com/cloud:

/hallmark study [screenshot]

Question

Hallmark a commencé par analyser en détail la page de référence avant d’écrire le moindre code :

● Voici le diagnostic de study sur le screenshot (laravel.com/cloud). Je n'ai écrit aucun code.

Ce que vous m'avez envoyé : un Narrative Workflow, avec un peu de Workbench.

Structure
- La page est découpée en 8 étapes numérotées (Deploy, Run, Scale, Private cloud, Native, Pricing, Developers, FAQ). Chaque étape est un rail horizontal, avec un numéro dans la marge à gauche.
- Chaque rail contient un label en bleu, en capitales et en monospace (DEPLOY). À droite, une ligne grise en monospace imite un ticket ou un commit (francisco madeira · [cloud-5192] add managed queues…), puis une zone hachurée en fin de ligne.
- Le hero est un H1 centré (Marquee) avec deux CTA. En dessous, un onglet Deploy / Run / Scale affiche une maquette de produit dans un cadre (Workbench).
- Les sections fonctionnent en paires : un grand titre à gauche, puis une grille 2 puis 3 colonnes séparée par des filets d'un pixel. Chaque cellule contient une phrase courte dont le début est en gras, et une mini-interface (commentaire de PR,
  menu de ressources, globe en points, toggle de prix).
- Le hero est un H1 Marquee. Le pitch est un F-stack en grille à filets.
- Le nav est un N1b : logo Laravel, séparateur, logo Cloud, liens avec menus déroulants, et Sign in / Sign up à droite. Au-dessus, un bandeau bleu d'annonce avec compte à rebours.
- Le footer est un Ft3 sombre, en colonnes, avec un énorme mot « Laravel » rogné en bas.

Typographie
- Titres : sans-serif géométrique grotesque, poids moyen (~500), très serré (tracking négatif). Il n'y a pas d'italique.
- Corps : la même famille. Une phrase est coupée en deux tons, l'amorce en noir et la suite en gris.
- Labels : monospace, en petites capitales espacées.
- Je ne peux pas identifier les polices exactes depuis une image. Les plus proches dans le canon sont Instrument Sans, Geist ou Inter Tight pour les titres et le corps, et Geist Mono pour les labels.

Surface et couleur
- Papier : blanc quasi pur (L > 95 %, neutre-froid), avec un motif de points très léger dans le hero.
- Accent : bleu électrique (~hue 260) sur les labels, les liens, l'onglet actif et le bouton « Visit », mais aussi le bandeau. Il occupe moins de 5 % de la surface. Le noir sert aux CTA principaux.
- Contraste : une bande pleine largeur, quasi noire avec un halo bleu diffus (la section « Private cloud »), coupe la page blanche.
- Traitements : grille de filets visibles sur toute la page, points, halos flous bleutés, hachures. Aucun ombrage lourd.

Densité et asymétrie
- Densité : moyenne à généreuse. Les titres ont beaucoup d'air, les cellules sont plus denses.
- Asymétrie : alignement à gauche pour les sections, centré pour le hero.

Mouvement : impossible à voir sur une image fixe. Je suppose des révélations par défaut, avec un onglet animé et une boucle de témoignages.

Anti-patterns à ne pas reprendre
- Halos flous bleutés derrière le hero, à ne pas recopier tels quels.
- Le mur de témoignages en boucle : c'est du template.
- Les logos de conformité (ISO, SOC2, HIPAA…) ne sont à reprendre que si vous les avez réellement.

Points à retenir pour votre page
- Le système de rails numérotés avec une ligne monospace « ticket » est le cœur de l'identité. Il est réutilisable, mais il tient à Laravel. Chez vous, il faudrait y mettre du vrai contenu (par exemple de vraies étapes ou des vrais commits de
  Remotus), pas des noms inventés.
- Le thème du catalogue le plus proche est Cobalt (Space Grotesk + mono, accent bleu). Il diffère sur le papier et l'accent.

Limites : polices non identifiables, rythme jugé à l'œil, mouvement inconnu. Les images du site (maquettes, globe) ne sont jamais copiées.

Trois suites possibles :
1. build it : je construis votre landing Remotus avec cette ADN (macrostructure, papier, accent, rôles typographiques). Les thèmes du catalogue sont suspendus pour ce build. Je vous demanderai d'abord les trois infos de cadrage (audience, action
   principale, ton), et je listerai les fichiers que je compte modifier avant de toucher au projet.
2. lock the DNA : j'écris un design.md portable. Comme la source est une URL, je dois d'abord savoir si c'est votre site, une référence publique pour votre marque, ou autre. Pour un site tiers, je refuse.
3. Stop : le diagnostic suffit.

Que voulez-vous faire ?

Réponse

Je lui ai alors simplement demandé d’appliquer cette direction artistique au projet courant :

Je veux que tu redesign le projet courant avec un design similaire à celui du screenshot

Résultat

http://remotustestlandingpage-usehallmark3-mdub-9d0ad7-188-245-77-74.sslip.io/

Avis

Là je dois reconnaître que le résultat m’a vraiment bluffé.

Dès le premier essai Hallmark a réussi à produire une landing page qui reprend très bien l’ADN visuel de la référence sans pour autant simplement recopier Laravel Cloud.

On retrouve notamment la structure très éditoriale, les séparations fines, la typographie plus technique, les labels en monospace, les grandes zones aérées et cette alternance entre sections claires et blocs plus contrastés.

Et surtout: la page me plaît beaucoup.

C’est probablement parmi les différentes versions générées jusque-là, celle qui possède le plus de personnalité et qui correspond le mieux à ce que je recherchais pour Remotus.

La seule chose que j’ai ajoutée ensuite a été un passage avec le skill web-animation-design, afin d’apporter un peu plus de mouvement à l’ensemble.

J’ai notamment ajouté :

• une progress bar animée tout en haut de la page ;
• une animation sur les compteurs ;
• plusieurs effets de reveal au scroll.

Ces quelques animations suffisent à rendre la page plus vivante sans dénaturer le design initial produit par Hallmark.

Conclusion

C’est probablement le test qui m’a le plus convaincu jusqu’ici.

La fonction study est particulièrement intéressante, car elle permet de partir d’une direction artistique existante que l’on apprécie déjà, puis de demander à Hallmark d’en extraire les principes visuels et structurels pour les appliquer à son propre projet.

Et surtout, le résultat est arrivé dès le premier essai, avec très peu d’instructions supplémentaires.

Pour quelqu’un qui sait reconnaître un design qu’il aime mais qui a du mal à expliquer précisément pourquoi, cette fonctionnalité peut clairement faire gagner énormément de temps.

Impeccable - version 1

Prompt

Cette fois, j’ai simplement lancé /impeccable, puis je lui ai demandé de redesigner complètement le site.

Questions

J’ai malheureusement perdu la session, donc je ne peux pas retranscrire exactement toutes les questions qu’il m’a posées.

De mémoire, Impeccable m’a demandé quatre ou cinq précisions, notamment sur le ton à adopter, le public auquel s’adresse l’application et la direction à donner au Hero.

Pour ce dernier point, il m’a notamment proposé trois pistes :

• Démo produit vivante: une flotte de machines animée, où une tâche est créée, envoyée, exécutée, puis où le diff et la pull request apparaissent.
• Scène 3D / WebGL: un réseau de nœuds 3D interactif représentant les machines connectées et réagissant aux mouvements de la souris.
• Typographie et motion spectaculaires: un titre géant et cinétique, des transitions plein écran et un scroll beaucoup plus narratif et éditorial.

C’est à ce moment-là qu’Impeccable a commencé à me surprendre.

Le skill ne se contente pas simplement de demander une direction artistique avant d’exécuter un redesign : il propose lui-même des concepts, parfois relativement ambitieux et techniquement complexes.

J’ai finalement choisi la démo produit vivante. Je voulais quelque chose de visuel et d’original mais sans tomber dans une expérience trop lourde comme pouvait potentiellement l’être une scène 3D complète.

Résultat

Autre différence intéressante : Impeccable a itéré de lui-même plusieurs fois sur le résultat.

Il a lancé plusieurs sous-agents chargés de produire, analyser et vérifier différentes parties du travail. Après chaque étape, il m’indiquait précisément ce qui avait été réalisé, ce qui avait été corrigé et les éléments qui restaient encore à vérifier.

Voici, par exemple, l’un des outputs obtenus après une itération :

La redesign est faite, mais elle n'est pas encore validée : la revue a demandé une passe de corrections et je n'ai pas fait de seconde revue après. DESIGN.md est en cours d'écriture par un sous-agent, dont j'attends le retour. Le build Vite passe.

Ce qui a changé par rapport à la première version, suite à la revue :
- Hero : la démo occupe maintenant environ 57 % de la largeur et déborde du bord droit de l'écran. Les modules sont plus grands et les câbles plus longs, avec un branchement lisible dès l'arrivée.
- Matériau rack sous le hero :
  - une prise colorée en haut à droite de chaque tuile de fonctionnalités ;
  - une prise posée sur chaque filet de la section sécurité ;
  - des en-têtes « gravés » (mono, majuscules) dans le tableau de comparaison.
- Bloc confiance : la grille de points a disparu. L'équation « Votre serveur + Vos machines + Votre configuration = Votre infrastructure » est maintenant faite de modules reliés par des câbles.
- CTA : trois câbles se branchent sur une plaque avec des prises GITHUB, DOCS et DAEMON. J'ai corrigé la couleur du câble vermillon et ajouté un fondu à gauche pour qu'ils ne passent plus sous les boutons. Je n'ai pas revérifié ce dernier réglage
  à l'écran.

Pas fait, ou pas vérifié :
- Skip link : le reviewer l'a vu superposé au hero dans les captures. Je pense que c'est un artefact des captures pleine page (il est caché hors écran tant qu'il n'a pas le focus), mais je ne l'ai pas confirmé avec un vrai Tab.
- Bento de fonctionnalités : je n'ai pas remplacé les tuiles par des modules rack entièrement câblés, comme le reviewer le suggérait. J'ai seulement ajouté les prises. Les mini-visuels restent des tuiles. Si tu veux aller plus loin, c'est le
  chantier suivant.
- Câbles entre les sections : non ajoutés. Seuls les câbles du hero, des étapes, du bloc confiance et du CTA existent.
- Mobile : vérifié seulement à 500 px de large (limite de ma fenêtre de test), pas à 390 px. Les événements tactiles n'ont pas été testés.

PRODUCT.md est créé à la racine et .impeccable/ contient le brief de surface et les captures. Rien n'est commité. Pour voir le résultat : npm run dev.

Puis, à la fin du processus :

DESIGN.md et .impeccable/design.json sont écrits à la racine du projet, donc le cycle « revue puis documentation » est bouclé.

Ils décrivent le système tel qu'il est livré : la palette, les trois polices, les formes, les ombres, le mouvement, ainsi que les composants principaux comme le patch bay. Trois règles nommées y figurent : celle des couleurs de câble, celle du
mono réservé aux données, et celle de l'émail doux.

Deux écarts que le documenteur a notés sans les corriger :
- Taille du titre du hero : le titre utilise sa propre taille (clamp jusqu'à 3,9 rem sur mobile/tablette, 3,5 rem sur desktop après la passe de correction) et non le token --text-display. DESIGN.md mentionne la première valeur, qui est désormais
  un peu dépassée pour le desktop.
- Plafond de 6 rem du contrat : le contrat de direction annonce un plafond de 6 rem, alors que le build ne dépasse pas 3,9 rem. C'est volontaire : la colonne du hero est étroite depuis que la démo déborde à droite.

Le documenteur n'a pas relu index.html ni main.js, et n'a regardé aucun rendu. Je n'ai relancé aucune seconde revue visuelle après la passe de corrections, donc l'état final n'est pas certifié par la revue.

Le dev server est arrêté et rien n'est commité. Pour voir la page : npm run dev.

Résultat final

http://remotustestlandingpage-useimpeccable1-lr-982ee9-188-245-77-74.sslip.io/

Avis

J’ai été très agréablement surpris par ce skill.

Le design est réussi mais ce n’est même pas ce qui m’a le plus impressionné.

La véritable différence vient de la démo interactive intégrée directement dans le Hero. Elle fonctionne bien, elle est visuellement cohérente avec le reste de la page et surtout, elle représente réellement ce que fait Remotus.

Ce n’est donc pas une animation ajoutée uniquement pour faire joli: elle participe directement à la compréhension du produit.

Et c’est probablement là que pour moi Impeccable commence à faire une vraie différence par rapport à Hallmark.

Là où Hallmark excelle surtout dans l’analyse et la transformation d’une direction artistique existante, Impeccable semble beaucoup plus disposé à proposer lui-même des idées visuelles et interactives, y compris des concepts relativement complexes puis à les implémenter directement.

Dans mon test il ne s’est pas contenté de me proposer une « démo produit vivante » comme concept, il l’a réellement construite et intégrée proprement à la landing page.

Le fait qu’il réalise ensuite plusieurs passes de revue avec des sous-agents renforce également cette impression d’avoir un véritable processus de conception plutôt qu’un simple « prompt → génération → terminé ».

Conclusion

Après ces différents tests, je trouve finalement que Hallmark et Impeccable sont davantage complémentaires que concurrents.

Hallmark est très efficace pour restructurer et améliorer un site existant mais là où il m’a le plus impressionné, c’est clairement avec sa fonctionnalité study.

Si vous trouvez un site ou un design dont vous appréciez particulièrement la direction artistique, Hallmark est capable de l’analyser, d’en comprendre les principes visuels et de les transposer de manière très convaincante à votre propre projet.

La version 3 inspirée de Laravel Cloud est probablement le meilleur exemple: avec un screenshot et très peu d’instructions supplémentaires, le résultat était déjà extrêmement proche de ce que je recherchais.

Impeccable, de son côté m’a davantage impressionné par sa capacité à imaginer une expérience visuelle complète.

Il ne se contente pas de travailler les couleurs, les espacements ou la disposition des sections. Il peut proposer des concepts plus ambitieux: démonstrations interactives, animations avancées, scènes 3D, storytelling au scroll…

Et surtout il semble capable de transformer ces idées en véritables composants fonctionnels.

Pour le choix final de la landing page de Remotus, j’hésite encore entre Hallmark version 3 et Impeccable version 1.

Les deux proposent des approches très différentes mais ce sont aussi les deux versions qui m’ont le plus convaincu.

Dans les deux cas, ces skills changent radicalement ce que Claude Code est capable de produire par rapport à une génération classique sans instructions de design spécialisées.

Note

Par curiosité, j’ai également demandé à Impeccable de tester les deux autres concepts qui m’avaient été proposés :

Version avec scène 3D : http://remotustestlandingpage-usehallmark32-h9r-c87ab5-188-245-77-74.sslip.io/

Version avec typographie et motion spectaculaires : http://remotustestlandingpage-usehallmark33-uo2-d55324-188-245-77-74.sslip.io/

La version 3D est intéressante.

En revanche, j’ai trouvé la version basée sur la typographie et les animations spectaculaires nettement plus décevante que les autres expérimentations.