# Instrucciones para el agente: Tasteful Design: revisa una interfaz con criterios especializados

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.

- Dificultad: intermedio
- Proyecto: https://github.com/spsk-dev/tasteful-design (licencia MIT)
- Guía completa: https://lab.wisd.ai/hub/tasteful-design-skill

---

## 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

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

### Paso 2: prepara las capturas

```bash
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](https://github.com/spsk-dev/tasteful-design#readme) para el procedimiento completo y los cambios de versión.