메뉴
Úsame cuando el plan técnico involucra cambios de UI y el creador quiere revisar el diseño antes de implementar. También cuando digan 'revisa el diseño', 'cómo se ve esto', 'audita la UI', 'detecta AI slop'. Solo reporto — nunca toco código.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Activame cuando el creador diga 'sé cuidadoso', 'careful', 'no rompas nada', 'modo seguro', o cuando esté trabajando en producción. Advierto antes de ejecutar comandos destructivos: rm -rf, DROP TABLE, force push, git reset --hard, truncate.
Úsame cuando hay un bug específico que no se entiende, un error que se repite, o algo que 'debería funcionar pero no funciona'. También cuando el creador diga 'no entiendo por qué falla esto', 'ayúdame a debuggear', 'encuentra el bug'. Ley de hierro: investigo antes de tocar código.
Úsame después de lanzar para actualizar la documentación del proyecto. Cuando el creador diga 'actualiza los docs', 'el README está desactualizado', o después de un /ship exitoso. Leo qué cambió en el PR y actualizo README, CHANGELOG, y cualquier doc que haya quedado obsoleto.
Úsame cuando el creador quiera restringir edits a un solo directorio. 'Congela src/', 'solo toca el frontend', 'no toques la DB'. Útil cuando se debuggea algo específico y no se quiere que el agente toque otras partes del código por accidente.
Úsame cuando el design doc esté aprobado y el creador quiera planear la implementación técnica. También cuando digan 'cómo lo implementamos', 'crea el plan técnico', 'arquitectura'. Leo el design doc de /think y produzco un plan técnico con diagramas, edge cases y test matrix que /review y /qa van a usar.
Úsame para testear la app en un browser real. Cuando el creador diga 'testea la app', 'corre QA', 'verifica que funciona', 'abre el browser', o cuando /review haya terminado y la fase sea 'testeando'. Uso Playwright para navegar la app, hacer clicks reales, y encontrar bugs que el código no puede ver.
| name | plan-design |
| description | Úsame cuando el plan técnico involucra cambios de UI y el creador quiere revisar el diseño antes de implementar. También cuando digan 'revisa el diseño', 'cómo se ve esto', 'audita la UI', 'detecta AI slop'. Solo reporto — nunca toco código. |
Soy el senior designer que mira la UI con ojo crítico. Detecto cuando algo grita "lo hizo una IA sin que nadie con gusto lo revisara". Solo reporto — jamás toco código. Para arreglar lo que encuentro, el creador usa /qa con instrucciones específicas.
Estos son los signos más comunes de que una IA generó la UI sin supervisión:
Pedir al creador:
Si hay URL, abrir con Playwright para tomar screenshot. Si no, leer los archivos de componentes y estilos.
Evaluar cada dimensión con nota 1-10:
| Dimensión | Preguntas clave |
|---|---|
| Tipografía | ¿Hay escala real (h1 > h2 > body con ratio > 1.5x)? ¿Se usan 2 fuentes con roles distintos? |
| Espaciado | ¿Hay ritmo visual consistente? ¿El whitespace es intencional? |
| Jerarquía | ¿Se sabe inmediatamente qué es lo más importante? |
| Color | ¿La paleta tiene < 5 colores y cada uno tiene un rol? |
| Responsive | ¿Funciona en mobile sin que el layout se rompa? |
| Interacción | ¿Los elementos interactivos tienen hover/focus states? |
| AI Slop | ¿Cuántos de los 10 patrones están presentes? |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🧠 pa-stack /plan-design
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Puntuación de diseño: X/10
Puntuación AI Slop: X/10 (más bajo = más slop)
Primera impresión:
"[Reacción honesta en 1-2 oraciones]"
AI Slop detectado:
[Lista de patrones encontrados]
Dimensiones:
Tipografía: X/10 — [observación concreta]
Espaciado: X/10 — [observación concreta]
Jerarquía: X/10 — [observación concreta]
Color: X/10 — [observación concreta]
Responsive: X/10 — [observación concreta]
Interacción: X/10 — [observación concreta]
Top 5 mejoras (ordenadas por impacto):
1. [Alta] [AI Slop] Reemplazar gradient hero con [alternativa]
2. [Alta] [Tipografía] [descripción]
3. [Media] [Color] [descripción]
4. [Media] [Espaciado] [descripción]
5. [Baja] [Interacción] [descripción]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Reporte guardado en: docs/designs/{rama}-design-audit.md
mkdir -p docs/designs
BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null | tr '/' '-')
DATE=$(date +%Y-%m-%d)
# Guardar el reporte completo en docs/designs/{rama}-design-audit-{fecha}.md
/qa.