Qu'est-ce que flawless-ui-ux ?
flawless-ui-ux est un skill de conception UI/UX et un CLI d'inspection local pour les agents de codage. Il aide les agents à créer, refondre, affiner et réviser des interfaces en fonction de l'audience, du contenu et de l'identité d'un produit.
Le skill guide les décisions relatives à la composition, à la typographie, aux couleurs et aux interactions pour les interfaces web, mobiles natives et de bureau. Le CLI inspecte les fichiers sources sélectionnés et les interfaces navigateur, fournissant des observations que l'agent peut utiliser pour trouver des problèmes et vérifier les corrections. Vous décrivez la tâche ; votre agent de codage applique les conseils dans votre projet existant.
Sans skill vs. avec skill
Créé dans Codex avec GPT 6.1 Sol (faible), puis affiné avec flawless-ui-ux en utilisant le même modèle et le même paramètre de raisonnement.
Installation
Depuis le répertoire de votre projet, exécutez une commande avec votre gestionnaire de paquets préféré :
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
Nécessite Node 22.12+. Dans un terminal, choisissez la portée du projet ou globale, sélectionnez un ou plusieurs agents, et confirmez les destinations avant la copie. Utilisez la barre d'espace pour sélectionner et Entrée pour continuer. Ctrl+C annule avant l'écriture des fichiers d'installation.
Les indicateurs explicites s'exécutent directement :
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes ignore le menu et utilise les valeurs par défaut lorsqu'aucun autre indicateur n'est fourni : tous les agents pris en charge dans le projet actuel. La sortie JSON, l'IC et l'exécution non-terminale restent non interactifs. Utilisez --format json pour une sortie lisible par machine.
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
Ceci installe le skill via le Skills CLI. Ses prérequis d'exécution et la sélection d'agent suivent cet installateur. Le CLI d'inspection est disponible séparément via les commandes npm de ce guide.
bash /chemin/absolu/flawless-ui-ux/install.sh --codex --project
L'alternative Bash nécessite --project pour une installation locale ; sa valeur par défaut est globale. Les utilisateurs Windows ont besoin de Git Bash ou WSL.
Utiliser le skill
Décrivez l'interface dont vous avez besoin et nommez le skill :
Utilisez le skill flawless-ui-ux pour créer un tableau de bord financier pour les freelances.
Dans Codex, invoquez $flawless-ui-ux. Les hôtes avec commandes slash utilisent /flawless-ui-ux ; Pi utilise /skill:flawless-ui-ux. Vous pouvez également demander le skill par son nom via le mécanisme de skill de votre hôte. Démarrez une nouvelle session après l'installation si la découverte doit être actualisée.
Continuez dans la même conversation à mesure que l'interface se développe :
| Tâche | Exemple de demande |
|---|---|
| Créer | Créez une page d'accueil pour une application qui coordonne les déploiements et les transferts d'incidents. |
| Refondre | Refondez cet écran de compte pour mobile en utilisant la palette de marque fournie. Préservez son contenu et son comportement. |
| Affiner | Donnez plus de présence à l'action principale tout en préservant le caractère visuel de la page. |
| Se concentrer | Améliorez la typographie et l'espacement. Préservez le libellé, les couleurs et les fonctionnalités. |
| Réviser | Révisez ce tableau de bord pour la lisibilité, la navigation, l'accessibilité et les motifs génériques répétés. Signalez les résultats sans modifier les fichiers. |
Comment ça fonctionne
Le skill guide la conception et l'implémentation. Il relie le contexte du produit à la composition, la typographie, la couleur, la densité, l'imagerie et l'interaction. Des références ciblées soutiennent la création, la refonte, l'affinement et la révision dans votre pile existante.
Pour les nouvelles interfaces et les refontes importantes, l'agent considère au moins trois compositions significativement différentes en interne avant l'implémentation, puis choisit une approche pour le produit et la tâche. Les affinements ciblés préservent la portée autorisée et les décisions établies.
Les conseils de conception s'appliquent aux interfaces web, mobiles natives et de bureau. Les vérisations rendues du CLI couvrent les interfaces navigateur ; la vérification native utilise les outils de plateforme et de projet appropriés.
L'affinement développe le caractère souhaité. Une interface peut avoir besoin de plus de présence, de moins d'emphase concurrente, ou d'une finition plus cohérente. L'intervention appropriée dépend du contenu et de la tâche. Le texte générique, la décoration répétitive et les motifs familiers sont révisés en contexte, aux côtés de l'utilisabilité et de l'accessibilité.
Le CLI vérifie l'implémentation. Collectez le contexte du projet, inspectez les fichiers sources sélectionnés ou une interface en cours d'exécution, et comparez le résultat après les corrections. Votre agent effectue les modifications ; le CLI fournit des observations et enregistre ce qui a été réellement vérifié.
Contexte du produit et workflows
Conservez les faits sur le produit et les décisions de conception dans vos documents Markdown existants. L'agent les réutilise entre les tâches ; les fichiers de contexte sont facultatifs. Utilisez context --source docs/brief.md pour sélectionner un document en dehors des emplacements conventionnels.
Pour préparer des enregistrements manquants, exécutez :
npx flawless-ui-ux init
Le CLI crée des modèles Markdown produit/conception ou réutilise les documents existants pris en charge, en préservant leur contenu. Votre agent remplit les enregistrements à partir du projet et de vos décisions. Lisez-les plus tard avec context ; l'initialisation ne génère pas un brief ou ne choisit pas un style visuel.
Inspectez les écrans associés avec des entrées --url répétées et --consistency pour un inventaire de style contextuel. Ajoutez --flow flows/edit-member.json pour exercer des actions, attentes et états nommés d'interface explicitement définis dans un environnement de test autorisé. La vérification nécessite que le fichier de flux inchangé soit à nouveau sélectionné. Voir exemples de workflows et limites.
Inspecter et vérifier
Utilisez le CLI directement, ou demandez à votre agent d'inclure ces vérifications dans son travail. Remplacez npx par pnpm dlx ou bunx partout.
Commencez par le contexte et la source
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
Vérifiez l'interface en cours d'exécution
Démarrez votre application et préparez le navigateur une fois :
npx [email protected] install chromium
# ou : pnpm dlx [email protected] install chromium
# ou : bunx [email protected] install chromium
Inspectez l'URL réelle du serveur de développement et enregistrez une référence :
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
Après les corrections, répétez la portée enregistrée :
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
La comparaison sépare les résultats persistants, nouveaux et non-observés. Les cibles confirmées manquantes et les conditions modifiées restent non vérifiées.
| Domaine | Preuve collectée |
|---|---|
| Accessibilité | Règles de contraste axe et de nom accessible sélectionnées, y compris les résultats incomplets pour révision |
| Texte et mise en page | Tailles de police calculées et débordement horizontal aux largeurs échantillonnées |
| Ressources et exécution | Images cassées visibles et u |
…
[tronqué pour la traduction]