Bienvenido, Alejandro
Cada regla de UI/UX que necesitas, con demos comparativos. Referencia construida desde Refactoring UI, Apple HIG, Material Design, NNGroup, y 40+ fuentes.
Explora cada regla de UI/UX con su ejemplo de qué hacer y qué evitar, y aplícala a tu próximo proyecto.
Cada interfaz que vale la pena esconde cientos de microdecisiones: cuánto contraste, qué duración de animación, cómo se comporta un formulario cuando falla. Aquí están reunidas, una por una, cada cual con su ejemplo de qué hacer y qué evitar y su fuente real (Refactoring UI, Apple HIG, Material Design, NN/g, WCAG y más de 40 referencias). No es teoría: es lo que aplico a diario.
Para qué sirve
Reglas con evidencia
Cada regla cita una fuente verificable, no opiniones sueltas: especificaciones de WCAG, guías de Apple y Material, o estudios de NN/g.
Demos comparativos
Cada regla muestra el patrón correcto y el incorrecto, lado a lado. Ves la diferencia, no solo la lees.
De fundamentos a verticales
1,658 reglas en 19 áreas: desde tipografía y color hasta autenticación, e-commerce, mobile y fintech.
Cómo usarlo
- 1Explora por módulo en el menú lateral, o salta directo a cualquiera de las 189 secciones.
- 2Busca con Ctrl K cualquier regla o sección por nombre, sin soltar el teclado.
- 3Abre el demo de cada regla: los bloques «Preferir» y «Evitar» muestran exactamente qué cambia.
- 4Úsala como checklist al revisar tu interfaz. También vive como skill de Claude Code (
pcb/pcb-review) para auditar tu proyecto contra estas reglas.
Explora por módulo
Úsala dentro de Claude Code
La Product Craft Bible también es un skill de Claude Code. Pídele a Claude que revise tu interfaz contra estas reglas, o que consulte una regla mientras construyes.
/pcb-reviewaudita tu proyecto contra las reglas relevantes/pcbcarga el módulo temático que necesites