Ir a la guía de uso
design-critiquepor Anthropic

Design Critique Skill.

Un skill de Claude Code y Codex para revisión de diseño: retroalimentación de diseño estructurada sobre usabilidad, jerarquía y consistencia.

  • Revisión de Diseño y Accesibilidad
  • Informe de revisión
anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md
--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]
Encabezados y materia preliminar leídos del archivo original el 14 de septiembre de 2026 · 3898 caracteres completos

01 Qué hace

Qué hace el Skill design-critique en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

design-critique ejecuta una revisión de diseño compartida para cualquiera que tenga una URL de Figma, una captura de pantalla o una descripción escrita, en cualquier etapa, desde la exploración hasta el pulido final. Funciona mediante un marco de cinco partes: primera impresión, usabilidad, jerarquía visual, consistencia y accesibilidad. Las reglas de retroalimentación exigen al agente ir más allá de las quejas vagas: nombrar el elemento en conflicto, explicar por qué en función de los principios de diseño o las necesidades del usuario, proponer una alternativa y reconocer lo que funciona.

El resultado es una crítica en markdown con una impresión general, una tabla de usabilidad clasificada por gravedad (Crítica, Moderada, Menor), una tabla de consistencia, notas de accesibilidad, una lista de Qué Funciona Bien y tres recomendaciones prioritarias. Cuando hay presente una herramienta de diseño o un conector de comentarios de usuarios, inspecciona componentes y tokens o hace referencias cruzadas con los tickets de soporte.

Qué produce

  • Una tabla de usabilidad que enumera cada hallazgo con un nivel de gravedad y una corrección recomendada.
  • Una tabla de consistencia para desviaciones de tipografía, espaciado y color respecto al sistema de diseño.
  • Una lista final de recomendaciones prioritarias ordenadas por impacto.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Ponga el Diseño en Primer Plano

    Se extrae una URL de Figma desde Figma y se lee un archivo referenciado; si no existe ninguno, el agente pide al usuario que describa o comparta el diseño.

  2. 02
    Comience con la Impresión de Dos Segundos

    Antes de cualquier análisis, registra qué atrae primero la mirada, si eso es correcto, la reacción emocional y si el propósito es inmediatamente claro.

  3. 03
    Recorra las Cinco Dimensiones en Orden

    Usabilidad, jerarquía visual, consistencia y accesibilidad tienen cada una su propio conjunto de indicaciones, desde el orden de lectura y el espacio en blanco hasta las relaciones de contraste y los objetivos táctiles.

  4. 04
    Redacte los Comentarios según las Reglas de Estilo Establecidas

    Los hallazgos deben ser específicos, explicados, acompañados de una alternativa propuesta y equilibrados con aquello que ya funciona.

  5. 05
    Complete la Plantilla de Salida en Markdown

    La estructura fija es impresión general, tabla de usabilidad con niveles de gravedad, notas de jerarquía, tabla de consistencia, accesibilidad, qué funciona bien y recomendaciones prioritarias ordenadas.

02 Encuentra tu caso de uso

Cuándo usar el skill design-critique

Usa el skill design-critique en Claude Code o Codex cuando el trabajo sea una revisión de diseño de este tipo. El alcance y los límites a continuación se toman del propio archivo del skill.

Buen caso de uso

  • Pegar un enlace de Figma o una captura de pantalla para recibir comentarios antes de que el diseño esté terminado, desde la exploración hasta el pulido final.
  • Un flujo con nombre y contexto, como un flujo de pago para un SaaS B2B, donde la audiencia y el propósito afinan los comentarios.
  • Una revisión acotada, por ejemplo pidiéndole que se fije solo en la navegación para obtener más profundidad en un área.
  • Frases desencadenantes casuales durante el trabajo, como pedirle que critique una maqueta o que diga qué opina de una pantalla.

Conozca los límites

  • No puede acceder a un archivo de Figma en vivo a menos que haya un conector de herramienta de diseño configurado en el entorno.
  • Cotejar decisiones con quejas reales de usuarios requiere una fuente conectada de comentarios de usuarios.

Qué proporcionar

  • El diseño en síUna URL de Figma, una captura de pantalla o una descripción escrita detallada son el mínimo requerido.
  • ContextoQué es la cosa, para quién es y en qué etapa está, elegida entre exploración, refinamiento o final.
  • Un enfoque opcionalPuede acotar la revisión, por ejemplo a móvil o al flujo de incorporación, para obtener profundidad en lugar de amplitud.
  • Un argumento de comando de barraEl comando acepta un argumento, cualquiera que sea la forma de su material de diseño.

03 Dentro del skill

Reglas que el Skill design-critique da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Nunca Deje un Hallazgo Vago

    El feedback debe nombrar el elemento concreto en conflicto; por ejemplo, decir que el CTA compite con la navegación en lugar de calificar el diseño como confuso.

  2. Proponga Siempre una Solución

    Identificar un problema no es el entregable; la crítica debe sugerir alternativas junto a cada incidencia.

  3. Reconozca lo que Funciona

    Las observaciones positivas son una parte obligatoria del buen feedback, no una cortesía opcional, y la plantilla de salida tiene una sección de Lo que Funciona Bien para ellas.

  4. Ajuste la Profundidad a la Etapa

    La exploración temprana recibe un feedback distinto al del acabado final, así que el agente debe calibrar en lugar de aplicar un mismo estándar en todas partes.

  5. Califique Cada Hallazgo de Usabilidad por Gravedad

    La tabla de usabilidad usa tres niveles fijos: Crítico, Moderado, Menor, cada uno emparejado con una recomendación.

  6. Cubra la Accesibilidad como un Pase Propio

    El framework incluye una dimensión de accesibilidad dedicada en lugar de integrar el contraste y el tamaño de los objetivos en notas generales de usabilidad.

  7. Pregunte Cuando Falte el Diseño

    Si no se proporciona una URL ni un archivo, el agente debe solicitar una descripción o una captura de pantalla en lugar de inventar una crítica.

04 Ponlo a trabajar

Instala design-critique en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega design-critique a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

Forma genérica de la CLI de skills para design/skills/design-critique/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Review this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • La accesibilidad debe reportar un pass o fail sobre el contraste específicamente para el texto clave.

En OpenDesign importe design-critique desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Anthropic
Archivo de skill
design/skills/design-critique/SKILL.md Checksum de contenido registrado en verificación; commit 8f877b6
License
Apache-2.0 De LICENSE.
Estrellas del repositorio
24,012 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio anthropics/knowledge-work-plugins, que contiene 7 skills en este catálogo. No es una calificación o conteo de uso de design-critique.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. UsoCómo el comando de barra toma su argumento y resuelve la fuente del diseño.
  2. Lo que Necesito de UstedEl diseño, el contexto y un área de enfoque opcional.
  3. Framework de CríticaCinco dimensiones ordenadas: primera impresión, usabilidad, jerarquía, consistencia, accesibilidad.
  4. Cómo Dar FeedbackCinco reglas de estilo para formular hallazgos, desde la especificidad hasta el ajuste por etapa.
  5. SalidaLa plantilla en markdown que debe seguir la crítica, tablas incluidas.
  6. Si Hay Conectores DisponiblesTrabajo previo adicional cuando hay una herramienta de diseño o una fuente de feedback de usuarios conectada.
  7. ConsejosComparta contexto, especifique la etapa y solicite un enfoque más acotado.
La descripción propia del Skill
"Obtén retroalimentación estructurada de diseño sobre usabilidad, jerarquía y consistencia. Se activa con "revisar este diseño", "criticar este mockup", "qué opinas de esta pantalla" o al compartir un enlace de Figma o captura de pantalla para recibir retroalimentación en cualquier etapa, desde exploración hasta pulido final."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 3,898 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre la Skill design-critique

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Necesito un conector de Figma para que esto funcione?

No. Con una herramienta de diseño conectada, puede extraer el diseño directamente de Figma e inspeccionar componentes, tokens y capas. Sin ella, aún puede pegar una captura de pantalla o describir el diseño en detalle y obtener el mismo marco aplicado.

Design Critique

Ejecuta design-critique en una Tarea Real de Revisión de Diseño.

Descarga OpenDesign, importa design-critique desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows