Guide de lecture localisé
frontend-design-reviewObjectif, utilisation et source
Concevoir et évaluer des interfaces front-end distinctives et prêtes pour la production, garantissant une qualité de conception élevée et la conformité au système de design. L'évaluation repose sur trois piliers : une expérience utilisateur fluide, une qualité de fabrication irréprochable et une fiabilité éprouvée. UTILISATION : Revues de relations publiques, revues de design, audits d'accessibilité, vérifications de conformité au système de design, conception front-end créative, revue de code d'interface utilisateur, revues de composants, vérifications de conception responsive, tests de thèmes et création d'interfaces utilisateur mémorables. NON UTILISÉ POUR : Revues d'API back-end, revues de schémas de base de données, travaux d'infrastructure ou DevOps, logique métier pure sans interface utilisateur, ou code non front-end.
Source récupérée:
- Dépôt source
- microsoft/skills
- SKILL.md
.github/skills/frontend-design-review/SKILL.md- Étoiles du dépôt
- 3,157
- Mise à jour du dépôt
- 2026-10-31
- Catégories de capacités
- Développement
- Dernière collecte
Licence : MIT
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Concevoir et évaluer des interfaces front-end distinctives et prêtes pour la production, garantissant une qualité de conception élevée et la conformité au système de design. L'évaluation repose sur trois piliers : une expérience utilisateur fluide, une qualité de fabrication irréprochable et une fiabilité éprouvée. UTILISATION : Revues de relations publiques, revues de design, audits d'accessibilité, vérifications de conformité au système de design, conception front-end créative, revue de code d'interface utilisateur, revues de composants, vérifications de conception responsive, tests de thèmes et création d'interfaces utilisateur mémorables. NON UTILISÉ POUR : Revues d'API back-end, revues de schémas de base de données, travaux d'infrastructure ou DevOps, logique métier pure sans interface utilisateur, ou code non front-end.
Comment fonctionne le flux de travail en amont
Flux de travail du système de conception
Examinez le composant dans votre Storybook/bibliothèque de composants pour connaître son API et son utilisation. Utilisez le mode développeur de Figma pour obtenir les spécifications exactes (espacement, jetons, propriétés). Implémentez-le à l'aide des composants du système de conception et des jetons de conception. Comparez l'implémentation au design Figma.
passage en amont · L54 ↗Processus d'examen
Identifier la tâche de l'utilisateur. Vérifier que le système de conception correspond aux modèles existants. Évaluer l'orientation esthétique. Identifier la portée (composant, fonctionnalité ou flux).
passage en amont · L72 ↗Principes fondamentaux
Réalisation de la tâche : Clics minimaux. Chaque écran répond aux questions « Que puis-je faire ? » et « Que se passe-t-il ensuite ? ». Hiérarchie des actions :1-2Actions principales par vue. Divulgation progressive des actions secondaires. Intégration : explication des fonctionnalités dès l’introduction. Paramètres par défaut intelligents plutôt que configuration. Navigation : claire.entry/exitpoints.Back/cancelToujours disponible. Fil d'Ariane pour les analyses approfondies.
passage en amont · L82 ↗Configuration requise
Aucun extrait de configuration n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sans dépendances. Consultez les instructions de configuration du dépôt et les fichiers référencés.
Limites et contrôles de qualité
2La qualité est un savoir-faire
Conformité au système de conception : respecte les spécifications Figma, utilise des jetons de conception. Orientation esthétique : typographie distinctive, couleurs cohérentes, animation intentionnelle.
passage en amont · L99 ↗Commencez par un essai sans danger
- Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
- Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
- Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
- Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.
Pour en savoir plus, consultez la source.
- Revue de conception frontend
- Mode1: Revue de conception
- Mode2Conception créative de frontend
- Conception d'interface créative
- Directives esthétiques
- Flux de travail du système de conception
- Processus d'examen
- Principes fondamentaux
- 1Une vision fluide et concrète pour une action réussie
- 2La qualité est un savoir-faire
- 3Bâtiment de confiance
- Format de sortie de la revue
- Modificateurs de type d'évaluation
- Liste de vérification rapide
- Exemples de modèles
- Remerciements
Compétences connexes
Traduction et étendue
Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.
Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.
- Source épinglée
- Lire l'original ↗
- Source récupérée
- Commit source
00d66a64919edca5bca2c673373444e36a4b5461- Source SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d