C✳CODEZ.WIN
🌐 Español

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Especificación del formato y directorio de habilidades ↗

Lea más en la fuente

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
Volver al catálogo completo de habilidades