lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill intermedio claude-codeplaywrightdiseno

Tasteful Design: revisa una interfaz con criterios especializados

Obtén observaciones separadas de tipografía, color, composición y accesibilidad, junto con un veredicto que ayuda a priorizar correcciones.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.


Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Preparación

Comprueba Claude Code, Node.js ≥20 y npm/npx para esta ruta: el comando npx playwright actual requiere ≥20 aunque Playwright MCP declare ≥18. El README usa claude plugins en plural; aquí se adapta al comando actual claude plugin. Abre el proyecto y arranca su servidor de desarrollo para poder capturar la pantalla. Registra primero el catálogo del plugin y después instálalo con los comandos publicados.

Paso 1: instala el plugin

claude plugin marketplace add spsk-dev/marketplace
claude plugin install tasteful-design@spsk

Paso 2: prepara las capturas

npx playwright install chromium
claude mcp add playwright -- npx @playwright/mcp@latest

Paso 3: revisa

En la sesión usa /design-review para la pantalla y /design-validate para comprobar interacciones. No necesitas la instalación opcional de Gemini para esta primera prueba.

Comprobación

Contrasta el informe con la captura real. Comprueba que cada problema indica dónde ocurre y que los botones y formularios revisados funcionan tras corregirlos.

Si algo falla

Si no hay captura, comprueba Chromium y la conexión MCP de Playwright. Si la valoración es genérica, aporta la finalidad de la página y una referencia concreta.

Consulta el README oficial para el procedimiento completo y los cambios de versión.

ver en .md ¿Prefieres el recurso entero?

Qué es

Tasteful Design es un plugin de Claude Code para revisar interfaces con varios subagentes especializados. Combina sus observaciones en un resultado ponderado y puede revisar tanto una pantalla como un recorrido.

Para qué te sirve

  • Cuando la página parece terminada pero necesitas una crítica antes de enseñarla.
  • Cuando quieres distinguir fallos de navegación de problemas de estilo.

Cómo funciona

Playwright aporta capturas y navegación. Los revisores analizan aspectos visuales e interacción por separado, y un sintetizador reúne sus hallazgos. Los comandos permiten revisión, auditoría de recorridos, iteración y validación funcional.

Antes de empezar

Necesitas Claude Code y Playwright para capturas y navegación. El README describe una segunda perspectiva de modelo como opción; empieza con la ruta que no la necesita. El uso de agentes puede consumir tu cuota o facturación habitual.

Límites y alternativas

El veredicto depende del contexto y de los criterios del plugin. No sustituye pruebas con usuarios ni una auditoría completa de accesibilidad. Evita copiar sin comprobar la instalación opcional de Gemini: el README contiene una referencia de paquete dudosa. Una revisión manual de una sola pantalla puede ser suficiente.

Recursos