ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)
Fournit des conseils UI/UX et des données de design locales sur styles, palettes, polices, règles UX et graphiques pour 22 stacks.
ui-ux-pro-max : exécute son script de design system à chaque fois, mais les pages jugées en aveugle ne sont pas meilleures (contrôle 4.0, une phrase 3.9, skill 4.0) pour 1.4 fois les tokens
Codex CLI · gpt-6-astra
20.9 / 30
Gain par rapport à sans skill : -0.04 · Selon les cas · 18 exécutions
Selon les cas : le total 20.9/30 est inférieur à 22 et le gain -0.04 est inférieur à +1.0. Pour être recommandé, il faut un total de 22/30, une qualité de sortie de 3.5 et un gain de +1.0.
SOTA
RéussiTesté avec Codex.
Couvre Codex, Claude Code
Codex CLI 0.166 (palier SOTA) : 18 exécutions notées. Une réussite ici couvre aussi Claude Code selon notre règle de palier ; elle ne dit rien du second palier.
Scores
Chaque dimension va de 0 à 5 et les six forment le total sur 30. 5 est la meilleure note dans chaque dimension. Coût 5 signifie bon marché et rapide. Installation 5 signifie facile.
- Fiabilité du déclenchement
- 5.0
- Gain par rapport à sans skill
- 2.0
- Qualité de sortie
- 4.0
- Coût en tokens et en temps
- 3.0
- Installation et portabilité
- 3.0
- Sécurité
- 4.0
Revue de sécurité
SûrScan statique : 0 CRITIQUE / 3 ÉLEVÉ / 3 MOYEN. Revue manuelle : sûr à exécuter dans un bac à sable sans réseau (résultats du scanner expliqués). Un scan propre ne prouve pas qu'un skill est sûr.
Installer
npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
Commit épinglé: 3a13158ff1f32156cbe144108de48eda2ecaed9a
Testé: 2026-11-02
Ce que nous avons testé
- Nouvelle page d'accueil à partir d'un brief — Créez un site d'accueil d'une page pour Tidepool, une petite marque de snacks aux algues vendus par abonnement (trois saveurs, $14/boîte, livraison mensuelle). Écrivez un seul index.html autonome avec CSS en ligne et un minimum de JS si nécessaire. Pas de frameworks, pas d'étape de build…
- Interface de tableau de bord dense — Créez une page de tableau de bord pour une équipe municipale de surveillance de la qualité de l'eau : relevés actuels de 6 stations (pH, turbidité, chlore, température), une tendance sur 7 jours pour chacune, et un panneau d'alertes. Un seul dashboard.html autonome avec CSS/JS en ligne et des relevés codés en dur…
- Refondre une page fade existante — old.html est la page d'accueil actuelle de Granite Peak Climbing Gym (Boulder, CO). Refondez-la en new.html : conservez tout son contenu réel (tarifs, cours, horaires, adresse) mais faites ressembler la page à cette salle d'escalade précise. HTML/CSS autonome, sans framework…
Points forts
- Le skill a été détecté sans être nommé : son fichier a été lu dans 6/6 exécutions avec skill.
Points faibles
- Aucun gain mesurable par rapport à sans skill (-0.04, dans le bruit).
- Un prompt d'une phrase obtient 3.92, contre 3.96 avec le skill (+0.04).
- Réserve de test : le script de design system du skill a été exécuté dans 6 des 6 exécutions avec skill, mais les planches contact en aveugle n'ont montré aucun gain visible.
- n=2 par tâche et par bras ; les écarts inférieurs à environ 1 point sont du bruit.
Avis
Codex CLI 0.166 (gpt-6-astra, low reasoning) sur un PC Windows de test dédié, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (traitement) ou absent (contrôle) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « prompt d'une phrase »), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous). Trois tâches, même prompt pour tous les groupes : une page d'accueil pour une marque fictive d'abonnement de snacks (Tidepool), un tableau de bord d'administration pour un réseau municipal de qualité de l'eau, et une refonte d'une page d'accueil de salle d'escalade fade (old.html) en conservant tout le contenu. Le groupe « une phrase » ajoute une phrase listant les priorités du skill (contraste 4.5:1, cibles de 44 px, mobile-first, icônes SVG, une échelle typographique, mouvement réduit). Les pages ont été capturées hors ligne (desktop et mobile) et notées en aveugle à partir de planches contact mélangées, sans étiquettes de condition.
Comparaison à trois bras
| Bras | Score moyen (0-5) | Tokens par exécution |
|---|---|---|
| Sans le skill | 4.0 | 116k |
| Prompt d'une phrase | 3.92 | 123k |
| Avec le skill | 3.96 | 160k |
Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 20.9 / 30, verdict Selon les cas.
Divulgation : le script de design system du skill a été exécuté dans 6 des 6 exécutions avec skill, mais les planches contact en aveugle n'ont montré aucun gain visible.
Verdict : Selon les cas (20.9 / 30). Source : nextlevelbuilder/ui-ux-pro-max-skill, .claude/skills/ui-ux-pro-max, épinglé au commit 3a13158. Installation : npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. Licence : MIT (LICENSE du dépôt).
Ce que c'est
Le skill ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill) : une base de connaissances de design UI/UX avec un outil de recherche Python local (scripts/search.py) sur des données CSV embarquées (styles, palettes, duos typographiques, règles par type de produit, principes UX). Son flux principal consiste à générer une recommandation de « design system » pour le produit (--design-system -p <name>), puis à construire l'interface en conséquence, avec un ensemble de règles par ordre de priorité (accessibilité, cibles tactiles, responsive, mouvement).
Comment nous avons testé
Codex CLI 0.166 (gpt-6-astra, raisonnement faible) sur un PC de test Windows dédié, un projet temporaire neuf et des caches HOME/TMPDIR temporaires à chaque exécution, skill installé (groupe avec skill) ou absent (groupe témoin) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée à la fin du prompt (groupe prompt d'une phrase), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous).
Trois tâches, même prompt pour tous les groupes : une page de destination pour une marque fictive d'abonnement de snacks (Tidepool), un tableau de bord administrateur pour un réseau municipal de qualité de l'eau, et une refonte d'une page d'accueil fade de salle d'escalade (old.html) en conservant tout le contenu. Le groupe prompt d'une phrase ajoute une phrase listant les priorités du skill (contraste 4.5:1, cibles de 44 px, mobile-first, icônes SVG, échelle typographique, réduction des animations). Les pages ont été capturées hors ligne (bureau et mobile) et notées en aveugle à partir de planches-contacts mélangées, sans libellés de condition.
- Nouvelle page de destination à partir d'un brief — Créez un site de destination d'une page pour Tidepool, une petite marque de snacks aux algues vendus par abonnement (trois saveurs, $14/boîte, expédition mensuelle). Écrivez un seul index.html autonome avec CSS en ligne et un minimum de JS si nécessaire. Pas de frameworks, pas d'outil de build st…
- Interface de tableau de bord dense en données — Créez une page de tableau de bord pour une équipe municipale de surveillance de la qualité de l'eau : les relevés actuels de 6 stations (pH, turbidité, chlore, température), une tendance sur 7 jours pour chacune, et un panneau d'alertes. Un seul dashboard.html autonome avec CSS/JS en ligne et des données de re…
- Refondre une page existante fade — old.html est la page d'accueil actuelle de Granite Peak Climbing Gym (Boulder, CO). Refondez-la en new.html : conservez tout son contenu réel (tarifs, cours, horaires, adresse) mais faites en sorte que la page appartienne à cette salle d'escalade précise. HTML/CSS autonome, sans fra…
Les scores proviennent d'une lecture en aveugle par Grok Bot (identifiants mélangés, aucune condition affichée) selon une grille fixe, de 0 à 5 par exécution ; un juge IA, donc les petits écarts relèvent du bruit.
Résultats
Le prompt d'une phrase donné au troisième groupe : "Suivez les bonnes pratiques UI/UX par ordre de priorité : l'accessibilité d'abord (contraste 4.5:1, texte alternatif, anneaux de focus visibles, libellés), des cibles tactiles d'au moins 44 px avec 8 px d'espacement, une mise en page responsive mobile-first avec meta viewport et sans défilement horizontal, un style adapté au produit avec des icônes SVG (pas d'emoji), une échelle typographique cohérente (base 16 px, hauteur de ligne 1.5) et des jetons de couleur sémantiques, et des animations qui respectent prefers-reduced-motion."
| Tâche | Score sans skill | Prompt d'une phrase | Avec le skill | Tokens sans skill | Tokens prompt d'une phrase | Tokens avec skill | Skill lu |
|---|---|---|---|---|---|---|---|
| t1-landing | 4.12 | 3.75 | 4.12 | 125k | 96k | 152k | 2/2 |
| t2-dashboard | 3.88 | 3.88 | 3.75 | 124k | 123k | 147k | 2/2 |
| t3-redesign | 4.0 | 4.12 | 4.0 | 99k | 149k | 179k | 2/2 |
Score moyen : 4.0 sans le skill contre 3.96 avec (delta -0.04). Tokens par exécution : 116k contre 160k (1.37x) ; temps 186s contre 184s. Groupe prompt d'une phrase : 3.92 (gain du skill par rapport au prompt d'une phrase : +0.04 ; gain du prompt d'une phrase par rapport à l'absence de skill : -0.08) ; 123k tokens par exécution pour le prompt d'une phrase, donc le skill coûte 1.30x le prompt d'une phrase.
Ce qui s'est passé
- Aucune différence de qualité visible : moyenne en aveugle 4.00 témoin, 3.92 prompt d'une phrase, 3.96 skill (n=6 chacun). Par tâche, les groupes diffèrent d'au plus 0.25 point, ce qui est sous ce que deux exécutions par cellule peuvent résoudre. Les 18 pages sont soignées, responsives et partagent un aspect similaire (fond crème ou vert pâle, accent vert foncé, titres serif).
- Le skill a réellement été utilisé : les 6 exécutions avec skill ont lu SKILL.md et lancé
search.py --design-system(par exemple pour « snack subscription playful coastal »). Le script fonctionne sous Windows avec le Python du système. - Les bases de l'accessibilité sont déjà standard dans la sortie de Codex seul : meta viewport, requêtes @media et styles de focus dans 18/18 pages, et prefers-reduced-motion dans 17/18 (le seul oubli était un tableau de bord du témoin). Les règles d'accessibilité d'abord du skill avaient donc peu à ajouter.
- Coût : 160k tokens par exécution pour le skill contre 116k pour le témoin et 123k pour le prompt d'une phrase (1.4x et 1.3x) ; le temps réel était le même (~185 s). Les exécutions avec skill ont aussi copié le dossier du skill dans le projet (.agents), et c'est là que passent les tokens supplémentaires.
- Une vérification a mal fonctionné : « conserve les prix ($22/$79/$720) » a échoué pour 4 des 6 exécutions de refonte des groupes témoin et skill parce que ces pages écrivaient le signe dollar dans un élément
<sup>séparé (<sup>$</sup>79) ; les captures d'écran montrent les prix intacts. Elle n'alimente pas le score.
Scores par dimension
| Dimension | Score | Pourquoi |
|---|---|---|
| 1_output_quality | 3.96 | Score moyen 3.96/5 avec le skill (vérifications programmatiques, voir le tableau par tâche). |
| 2_lift_vs_no_skill | 1.96 | -0.04 point contre 4.00 sans le skill (n=2 par tâche ; moins d'environ 1 point relève du bruit). |
| 3_trigger | 5.0 | Fichier du skill lu dans 6/6 exécutions avec skill. |
| 4_instructions_portability | 3 | SKILL.md et un dossier de références, plus des scripts Python avec des données CSV embarquées ; le script de recherche ne nécessite que Python 3. |
| 5_efficiency | 3 | 1.37x tokens (160k contre 116k par exécution) et 0.99x temps (184s contre 186s). |
| 6_safety_hygiene | 4 | Scanner 0 CRITICAL / 3 HIGH / 3 MEDIUM, tous bénins (variable d'environnement de couleur de terminal ; subprocess/eval uniquement dans les tests unitaires). |
Limites de ce test
- Jugement visuel en aveugle par le relecteur à partir de planches-contacts pleine page (bureau 600 px de large par page, mobile 300 px) ; des écarts de 0.25 relèvent du bruit du juge. Les pages ne sont pas comparées en pleine résolution ni de façon interactive.
- Seulement n=2 par cellule et trois tâches ; la valeur du skill sur un produit long et multipage n'est pas couverte.
- Les recommandations pilotées par les données du skill (palettes et duos de polices) ne pouvaient pas charger de polices web hors ligne ; les pages se rabattent sur les polices système, ce qui masque les choix typographiques.
- n = 2 par groupe et par tâche : les écarts inférieurs à environ 1 point relèvent du bruit.
- Jugement IA en aveugle : juge unique, aucun contrôle inter-évaluateurs ; les exécutions d'origine témoin/skill et les exécutions ultérieures du prompt d'une phrase ont été jugées lors de sessions distinctes (prompt d'une phrase le 2026-11-02), une dérive entre sessions est donc possible.
Sécurité
Voir security.md. Scan : 0 CRITICAL / 3 HIGH / 3 MEDIUM. Verdict : exécution sûre (bac à sable hors ligne). Un scan propre ne prouve pas qu'un skill est sûr.
En résumé
Avec un modèle de base compétent, les pages sont déjà bonnes ; le skill ajoute une étape de recommandation de design system mais aucun gain de qualité mesurable ici, pour 1.4x tokens. Utilisez-le comme générateur d'idées ou liste de contrôle, pas comme une amélioration de qualité attendue.
Transcription
Journal d'exécution : ui-ux-pro-max (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Colonnes : tâche, groupe-exécution, score (0-5), tokens, secondes, vérifications réussies, fichiers de la skill ouverts par l'agent. t1-landing control-1: score 4.25, tokens 123829, s 182.9, vérifications 5/5, rien ouvert t1-landing control-2: score 4.0, tokens 126682, s 204.0, vérifications 5/5, rien ouvert t1-landing oneliner-1: score 3.75, tokens 108982, s 162.5, vérifications 5/5, rien ouvert t1-landing oneliner-2: score 3.75, tokens 83600, s 165.0, vérifications 5/5, rien ouvert t1-landing treatment-1: score 4.25, tokens 121048, s 155.5, vérifications 5/5, ouvert ui-ux-pro-max t1-landing treatment-2: score 4.0, tokens 184353, s 178.8, vérifications 5/5, ouvert ui-ux-pro-max t2-dashboard control-1: score 4.0, tokens 138942, s 215.4, vérifications 5/5, rien ouvert t2-dashboard control-2: score 3.75, tokens 109416, s 178.3, vérifications 4/5, rien ouvert t2-dashboard oneliner-1: score 3.75, tokens 132667, s 205.9, vérifications 5/5, rien ouvert
18 exécutions, 3 artefacts
Exemple de sortie
SOTA · With the skill: index.html (t1-landing, run 1, Codex)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="#f7f3e7"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big-hearted flavours. Find your favourite and make it a monthly ritual for $14 a box."> <title>Tidepool — A little ocean. A lot of crunch.</title> <style> :root{--paper:#f7f3e7;--ink:#183e47;--yellow:#f6d975;--green:#b6cab0;--pink:#eaa78f;--line:#183e4733}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit}button,input{font:inherit}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible+span{outline:3px solid var(--ink);outline-offset:5px}.skip{position:absolute;top:-100px;left:20px;background:var(--paper);padding:10px;z-index:5}.skip:focus{top:10px}.announcement{background:var(--ink);color:var(--paper);text-align:center;font-size:11px;letter-spacing:1.8px;padding:9px 16px;text-transform:uppercase}header{max-width:1370px;margin:auto;padding:21px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-family:Georgia,serif;font-weight:900;font-size:38px;letter-spacing:-2px;text-decoration:none;line-height:1}.logo small{font-family:Arial,sans-serif;font-size:10px;letter-spacing:0;vertical-align:top;display:inline-block;margin:5px 0 0 3px}nav{display:flex;gap:32px;align-items:center;font-size:13px}nav a{text-decoration:none}nav a:hover{text-decoration:underline;text-underline-offset:5px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 25px;border-radius:40px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;transition:background .2s,transform .2s}.pill:hover{background:#2d5960;transform:translateY(-2px)}nav .pill{padding:10px 20px}.hero{max-width:1370px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;min-height:640px;padding:60px 5% 55px;gap:30px;align-items:center}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:normal;letter-spacing:-3.5px;line-height:1.02}h1{font-size:clamp(64px,6.2vw,90px);margin-bottom:24px}h1 em{font-weight:normal} .intro{max-width:350px;font-size:16px;line-height:1.75;margin-bottom:28px}.fine{font-size:12px;margin:13px 0 0}.hero-art{position:relative;min-width:0}.hero-art svg{display:block;width:100%;height:auto;overflow:visible}.art-note{text-align:center;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:0}.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--yellow);display:flex;justify-content:space-evenly;gap:20px;padding:17px 20px;font-size:11px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase}.ticker span:before{content:'✳';font-size:20px;ver [... excerpt: first 3200 of 17993 characters]