Guía de lectura localizada
frontend-design-reviewFinalidad, uso y origen
Revisa y crea interfaces frontend distintivas y de calidad profesional con un diseño de alta calidad y que cumplan con los estándares del sistema de diseño. Evalúa utilizando tres pilares: conversión fluida de información a acciones, calidad de diseño y fiabilidad en la construcción. Úsalo para: revisiones de relaciones públicas, revisiones de diseño, auditorías de accesibilidad, comprobaciones de cumplimiento de sistemas de diseño, diseño frontend creativo, revisión de código de interfaz de usuario, revisiones de componentes, comprobaciones de diseño responsivo, pruebas de temas y creación de interfaces de usuario memorables. No lo uses para: revisiones de API backend, revisiones de esquemas de bases de datos, trabajo de infraestructura o DevOps, lógica de negocio pura sin interfaz de usuario o código que no sea frontend.
Fuente recuperada:
- Repositorio de origen
- microsoft/skills
- SKILL.md
.github/skills/frontend-design-review/SKILL.md- Estrellas del repositorio
- 3,157
- Actualización del repositorio
- 2026-10-31
- Clasificación de habilidades
- Desarrollo
- Última recopilación
Licencia: MIT
Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.
Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.
Lo que hace esta habilidad
Revisa y crea interfaces frontend distintivas y de calidad profesional con un diseño de alta calidad y que cumplan con los estándares del sistema de diseño. Evalúa utilizando tres pilares: conversión fluida de información a acciones, calidad de diseño y fiabilidad en la construcción. Úsalo para: revisiones de relaciones públicas, revisiones de diseño, auditorías de accesibilidad, comprobaciones de cumplimiento de sistemas de diseño, diseño frontend creativo, revisión de código de interfaz de usuario, revisiones de componentes, comprobaciones de diseño responsivo, pruebas de temas y creación de interfaces de usuario memorables. No lo uses para: revisiones de API backend, revisiones de esquemas de bases de datos, trabajo de infraestructura o DevOps, lógica de negocio pura sin interfaz de usuario o código que no sea frontend.
Cómo funciona el flujo de trabajo ascendente
Flujo de trabajo del sistema de diseño
Revisa el componente en tu Storybook/biblioteca de componentes para conocer la API y su uso. Usa el modo de desarrollo de Figma para obtener las especificaciones exactas (espaciado, tokens, propiedades). Implementa usando componentes del sistema de diseño + tokens de diseño. Compara la implementación con el diseño de Figma.
Paso río arriba · L54 ↗Proceso de revisión
Identificar la tarea del usuario Verificar el sistema de diseño para detectar patrones coincidentes Evaluar la dirección estética Identificar el alcance (componente, característica o flujo)
Paso río arriba · L72 ↗Principios fundamentales
Finalización de tareas: Mínimo de clics. Cada pantalla responde a "¿Qué puedo hacer?" y "¿Qué sucede a continuación?". Jerarquía de acciones:1-2Acciones principales por vista. Divulgación progresiva para acciones secundarias. Incorporación: Explicar las características en la introducción. Valores predeterminados inteligentes sobre la configuración. Navegación: Borrarentry/exitagujas.Back/cancelSiempre disponible. Migas de pan para flujos profundos.
Paso río arriba · L82 ↗Requisitos y configuración
No se seleccionó ningún fragmento de requisitos breves de este archivo. Esto no significa que la habilidad no tenga dependencias. Consulte las instrucciones de configuración del repositorio y los archivos de referencia.
Límites y controles de calidad
2La calidad es artesanía.
Cumplimiento del sistema de diseño: se ajusta a las especificaciones de Figma, utiliza tokens de diseño. Dirección estética: tipografía distintiva, colores cohesivos, movimiento intencional.
Paso río arriba · L99 ↗Comience con una prueba segura.
- Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
- Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
- Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
- Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.
Lea más en la fuente
- Revisión del diseño de la interfaz de usuario
- Modo1Revisión del diseño
- Modo2Diseño Frontend Creativo
- Diseño frontend creativo
- Pautas estéticas
- Flujo de trabajo del sistema de diseño
- Proceso de revisión
- Principios fundamentales
- 1De la información a la acción sin fricciones
- 2La calidad es artesanía.
- 3Edificio confiable
- Formato de salida de la revisión
- Modificadores de tipo de revisión
- Lista de verificación rápida
- Ejemplos de patrones
- Expresiones de gratitud
Habilidades relacionadas
Traducción y alcance
Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.
Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.
- Fuente fijada
- Lee el original ↗
- Fuente recuperada
- Confirmación de origen
00d66a64919edca5bca2c673373444e36a4b5461- Fuente SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d