Hogar

Skill

Otros

frontend-design-review

microsoft/skills

Revisar las implementaciones de la interfaz de usuario (UI) para comprobar que cumplen con los estándares de calidad de diseño y con el sistema de diseño, o crear desde cero interfaces front-end distintivas y aptas para producción.

...Expandir todo

Tiempo actualizado 10 de septiembre de 2026

# accessibility # Design System # figma # css # typography # design review # storybook # motion

Revisión del diseño front-end

Revisa las implementaciones de la interfaz de usuario (UI) según los estándares de calidad de diseño y tu sistema de diseño, O BIEN crea desde cero interfaces front-end distintivas y aptas para producción.

Dos modos

Modo 1: Revisión del diseño

Evalúa la interfaz de usuario existente en cuanto al cumplimiento del sistema de diseño, los tres pilares de calidad (sin fricciones, diseño de calidad, fiable), la accesibilidad y la calidad del código.

Modo 2: Diseño creativo de front-end

Crea interfaces distintivas que eviten la estética genérica «de mala calidad propia de la IA», tengan una dirección conceptual clara y se ejecuten con precisión.

Diseño creativo de la interfaz de usuario

Antes de programar, define una dirección estética:

Propósito: ¿Qué problema resuelve? ¿Quién lo utiliza?
Estilo: minimalista, maximalista, retrofuturista, orgánico, de lujo, lúdico, editorial, brutalista, art déco, suave/pastel, industrial, etc.
Limitaciones: marco de trabajo, rendimiento y requisitos de accesibilidad.
Diferenciación: ¿Qué lo hace distintivo y adecuado al contexto?

Directrices estéticas

Tipografía: Tipos de letra distintivos que realcen la estética. Combina una tipografía de título con una tipografía de cuerpo refinada. Evita Inter, Roboto, Arial y Space Grotesk.
Color y tema: paleta cohesionada con variables CSS. Colores dominantes + acentos marcados > paletas tímidas y distribuidas de manera uniforme.
Movimiento: Se prefiere el uso exclusivo de CSS. Una carga de página bien orquestada con revelaciones escalonadas > microinteracciones dispersas.
Composición espacial: Asimetría, superposición, flujo diagonal, elementos que rompen la cuadrícula, generoso espacio negativo O densidad controlada.
Fondos: mallas degradadas, texturas de ruido, patrones geométricos, transparencias en capas, sombras dramáticas, superposiciones de grano.

EVITAR: Tipografías sobreutilizadas, combinaciones de colores manidas, diseños predecibles, diseños estandarizados sin carácter específico para el contexto.

Adapta la complejidad de la implementación a la visión. Maximalista = código elaborado. Minimalista = moderación y precisión.

Revisión del diseño

Flujo de trabajo del sistema de diseño

Antes de la implementación:

Revisa el componente en tu Storybook o biblioteca de componentes para conocer la API y su uso
Utiliza el modo de desarrollo de Figma para obtener las especificaciones exactas (espaciado, tokens, propiedades)
Implementa utilizando los componentes del sistema de diseño y los tokens de diseño

Durante la revisión:

Compara la implementación con el diseño de Figma
Comprueba que se utilicen tokens de diseño (en lugar de valores fijos)
Comprueba que todas las variantes y estados se hayan implementado correctamente
Señalar las desviaciones (requieren aprobación del diseño)

Si el componente no existe:

Comprueba si se puede adaptar un componente ya existente
Póngase en contacto con el equipo de diseño para la creación de un nuevo componente
Documentar la excepción y la justificación en el código

Proceso de revisión

Identificar la tarea del usuario
Comprobar si hay patrones coincidentes en el sistema de diseño
Evaluar la dirección estética
Identificar el alcance (componente, función o flujo)
Evaluar cada pilar
Puntuar y priorizar los problemas (bloqueantes/graves/leves)
Ofrecer recomendaciones con ejemplos del sistema de diseño

Principios fundamentales

Finalización de tareas: mínimo de clics. Cada pantalla responde a las preguntas «¿Qué puedo hacer?» y «¿Qué ocurre a continuación?».
Jerarquía de acciones: 1-2 acciones principales por vista. Revelación progresiva de las secundarias.
Iniciación: explicar las funciones en la introducción. Valores predeterminados inteligentes en lugar de configuración.
Navegación: Puntos de entrada y salida claros. Botones «Atrás» y «Cancelar» siempre disponibles. Ruta de navegación para flujos complejos.

Pilares de calidad

1. De la información a la acción sin fricciones

Evaluar: ¿Se puede completar la tarea en ≤3 interacciones? ¿Es la acción principal evidente y única?

Señales de alerta: clics excesivos, múltiples botones principales que compiten entre sí, acciones ocultas, callejones sin salida.

2. La calidad es un arte

Evaluar:

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 coherentes, movimiento intencionado
Accesibilidad: grado C como mínimo (WCAG 2.1 A), grado B como ideal (WCAG 2.1 AA)

Señales de alarma: estética genérica de IA, valores codificados de forma rígida, la implementación no coincide con Figma, reajuste de contenido defectuoso, falta de indicadores de enfoque.

3. Edificio fiable

Evaluar:

Transparencia de la IA: aviso legal sobre el contenido generado por IA
Transparencia de los errores: mensajes de error que permiten actuar

Señales de alerta: falta de avisos legales sobre la IA; errores opacos sin orientación.

Formato de salida de la revisión

Consulta references/review-output-format.md para ver la plantilla de revisión completa.

Modificadores del tipo de revisión

Consulta references/review-type-modifiers.md para conocer las áreas de enfoque de la revisión específicas de cada contexto (PR, Creatividad, Diseño, Accesibilidad).

Lista de comprobación rápida

Consulta references/quick-checklist.md para ver la lista de verificación previa a la aprobación, que abarca el cumplimiento del sistema de diseño, la calidad estética, la fluidez, la calidad de la ejecución y los pilares de confianza.

Ejemplos de patrones

Consulta references/pattern-examples.md para ver ejemplos buenos y malos de revisiones creativas de front-end y del sistema de diseño.

Agradecimientos

Los principios de front-end creativo se inspiran en la experiencia de Anthropic en diseño de front-end. Los principios de revisión de diseño y el marco de pilares de calidad han sido creados por @Quirinevwm para la evaluación sistemática de la interfaz de usuario.

Ver en GitHub

---
name: frontend-design-review
description: Review UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.
---

# Frontend Design Review

Review UI implementations against design quality standards and your design system **OR** create distinctive, production-grade frontend interfaces from scratch.

## Two Modes

### Mode 1: Design Review
Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.

### Mode 2: Creative Frontend Design
Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.

---

## Creative Frontend Design

Before coding, commit to an aesthetic direction:
- **Purpose**: What problem does this solve? Who uses it?
- **Tone**: minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.
- **Constraints**: Framework, performance, accessibility requirements.
- **Differentiation**: What makes this distinctive and context-appropriate?

### Aesthetics Guidelines

- **Typography**: Distinctive fonts that elevate aesthetics. Pair a display font with a refined body font. Avoid Inter, Roboto, Arial, Space Grotesk.
- **Color & Theme**: Cohesive palette with CSS variables. Dominant colors + sharp accents > timid, evenly-distributed palettes.
- **Motion**: CSS-only preferred. One well-orchestrated page load with staggered reveals > scattered micro-interactions.
- **Spatial Composition**: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
- **Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.

**AVOID**: Overused fonts, cliched color schemes, predictable layouts, cookie-cutter design without context-specific character.

Match implementation complexity to vision. Maximalist = elaborate code. Minimalist = restraint and precision.

---

## Design Review

### Design System Workflow

**Before implementing:**
1. Review component in your Storybook / component library for API and usage
2. Use Figma Dev Mode to get exact specs (spacing, tokens, properties)
3. Implement using design system components + design tokens

**During review:**
1. Compare implementation to Figma design
2. Verify design tokens are used (not hardcoded values)
3. Check all variants/states are implemented correctly
4. Flag deviations (needs design approval)

**If component doesn't exist:**
1. Check if existing component can be adapted
2. Reach out to design for new component creation
3. Document exception and rationale in code

### Review Process

1. Identify user task
2. Check design system for matching patterns
3. Evaluate aesthetic direction
4. Identify scope (component, feature, or flow)
5. Evaluate each pillar
6. Score and prioritize issues (blocking/major/minor)
7. Provide recommendations with design system examples

### Core Principles

- **Task completion**: Minimum clicks. Every screen answers "What can I do?" and "What happens next?"
- **Action hierarchy**: 1-2 primary actions per view. Progressive disclosure for secondary.
- **Onboarding**: Explain features on introduction. Smart defaults over configuration.
- **Navigation**: Clear entry/exit points. Back/cancel always available. Breadcrumbs for deep flows.

---

## Quality Pillars

### 1. Frictionless Insight to Action

**Evaluate:** Task completable in ≤3 interactions? Primary action obvious and singular?

**Red flags:** Excessive clicks, multiple competing primary buttons, buried actions, dead ends.

### 2. Quality is Craft

**Evaluate:**
- Design system compliance: matches Figma specs, uses design tokens
- Aesthetic direction: distinctive typography, cohesive colors, intentional motion
- Accessibility: Grade C minimum (WCAG 2.1 A), Grade B ideal (WCAG 2.1 AA)

**Red flags:** Generic AI aesthetics, hardcoded values, implementation doesn't match Figma, broken reflow, missing focus indicators.

### 3. Trustworthy Building

**Evaluate:**
- AI transparency: disclaimer on AI-generated content
- Error transparency: actionable error messages

**Red flags:** Missing AI disclaimers, opaque errors without guidance.

---

## Review Output Format

See [references/review-output-format.md](references/review-output-format.md) for the full review template.

## Review Type Modifiers

See [references/review-type-modifiers.md](references/review-type-modifiers.md) for context-specific review focus areas (PR, Creative, Design, Accessibility).

## Quick Checklist

See [references/quick-checklist.md](references/quick-checklist.md) for the pre-approval checklist covering design system compliance, aesthetic quality, frictionless, quality craft, and trustworthy pillars.

## Pattern Examples

See [references/pattern-examples.md](references/pattern-examples.md) for good/bad examples of creative frontend and design system review work.

---

## Acknowledgments

Creative frontend principles inspired by [Anthropic's frontend-design skill](https://github.com/anthropics/skills/tree/main/skills/frontend-design). Design review principles and quality pillar framework created by [@Quirinevwm](https://github.com/Quirinevwm) for systematic UI evaluation.