impeccable
Créer des interfaces frontend raffinées avec l'IA
Les interfaces générées par l'IA ont souvent un aspect générique et templaté. Impeccable guide l'IA à travers des décisions de conception expertes, produisant un code frontend distinctif de qualité production.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "impeccable". Créer une section hero pour un portfolio d'agence créative avec une typographie audacieuse et une mise en page asymétrique
Résultat attendu:
Une section hero responsive avec typographie display fluide utilisant clamp(), une mise en page en grille asymétrique avec des espacements variés, un pairing de polices distinctif choisi grâce à la procédure de sélection de polices, et une hiérarchie visuelle claire qui passe le test du plissement des yeux.
Utilisation de "impeccable". Extraire les jetons réutilisables d'une page avec des valeurs de couleur incohérentes
Résultat attendu:
Un système de jetons de conception cohérent avec des couleurs primitives basées sur OKLCH, des échelles neutres teintées, des mappings de couleurs sémantiques pour les couleurs primaires et de statut, et des conseils documentés sur quand utiliser chaque jeton.
Utilisation de "impeccable". Concevoir un formulaire de contact accessible avec une validation appropriée
Résultat attendu:
Un formulaire avec des libellés visibles, une validation au blur, des messages d'erreur descriptifs avec aria-describedby, des anneaux de focus appropriés utilisant focus-visible, et des zones tactiles correctement dimensionnées pour les utilisateurs mobiles.
Audit de sécurité
Risque faibleAll 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
Problèmes à risque faible (1)
Facteurs de risque
⚙️ Commandes externes (1)
📁 Accès au système de fichiers (3)
Score de qualité
Ce que vous pouvez construire
Refonte d'un site marketing
Un fondateur de startup veut que sa page d'atterrissage se démarque de la mer de templates SaaS identiques. Impeccable guide l'IA à travers une direction esthétique audacieuse avec des choix typographiques et chromatiques distinctifs.
Initialisation d'un système de conception
Un développeur doit extraire des jetons de conception cohérents, des composants et des patterns d'une base de code existante dans un système de conception réutilisable. Le mode extraction identifie les patterns réutilisables et les formalise.
Conception accessible de formulaires et interactions
Une équipe produit a besoin de formulaires correctement conçus, d'états de focus, de patterns de chargement et de navigation au clavier. Impeccable fournit du matériel de référence sur la conformité WCAG, l'API Popover et la conception des anneaux de focus.
Essayez ces prompts
Exécute /impeccable teach pour recueillir le contexte de conception de mon projet. Scan d'abord la base de code, puis pose-moi les questions auxquelles tu dois encore répondre.
Exécute /impeccable craft une page de tarification pour un produit SaaS. Le public cible est constitué de propriétaires de petites entreprises qui valorisent la clarté et la rapidité. Le ton de la marque est confiant, pratique et direct.
Exécute /impeccable extract les jetons de conception partagés et les composants réutilisables de ma bibliothèque de composants existante. Concentre-toi sur les couleurs, l'espacement, la typographie et les variantes de boutons.
Exécute /impeccable craft un tableau de bord en mode sombre pour un outil d'observabilité utilisé par les SRE. L'interface doit être dense en informations mais lisible, avec une palette de couleurs neutres et une hiérarchie forte pour la visualisation des données.
Bonnes pratiques
- Recueillez toujours le contexte de conception de l'utilisateur avant de générer tout travail de conception. Vérifiez d'abord les instructions existantes, puis .impeccable.md, puis lancez le flux teach.
- Engagez-vous dans une direction esthétique audacieuse plutôt que de revenir à des默认值的 génériques et sécurisés. Le maximalisme et le minimalisme fonctionnent lorsqu'ils sont exécutés avec intention.
- Exécutez le test de contenu IA sur chaque résultat : quelqu'un reconnaîtrait-il immédiatement cela comme étant généré par l'IA ? Si oui, le design nécessite des choix créatifs plus distinctifs.
Éviter
- Utiliser des polices réflexes comme Inter, Fraunces, Space Grotesk et Cormorant qui créent une monoculture à travers les projets générés par l'IA.
- Utiliser par défaut du cyan sur fond sombre, des dégradés violet-bleu ou des accents lumineux sur fond sombre, qui sont les indicateurs de design IA les plus reconnaissables.
- Utiliser des bandes d'accentuation latérales sur les cartes, du texte en dégradé et du glassmorphism comme décoration, qui sont explicitement interdits comme patterns de contenu IA.
Foire aux questions
Quand dois-je invoquer Impeccable ?
Quelle est la différence entre les modes craft, teach et extract ?
Impeccable fonctionne-t-il avec React, Vue ou d'autres frameworks ?
Comment Impeccable empêche-t-il les designs génériques typiques de l'IA ?
Impeccable peut-il aider avec la conformité accessibilité ?
Que se passe-t-il lors de la mise à jour vers une nouvelle version d'Impeccable ?
Détails du développeur
Auteur
pbakausLicence
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
Réf
main
Structure de fichiers