Pago de Pinch
Módulo de pago para comercio electrónico
Claude Sonnet 5.5
5 · Ejemplos de diseño
Diseño de formularios y flujos por pasos: pago, registro y reservas
Recorre flujos completos de pago, incorporación, reserva y carga de archivos. Estudia la agrupación de campos, las transiciones entre pasos, la validación y la recuperación de errores, en lugar de limitarte a una fila ordenada de campos.
Qué conviene observar
Completa cada flujo con datos realistas; después deja vacío un campo obligatorio y provoca un error. Comprueba que las etiquetas permanezcan visibles, las indicaciones aparezcan junto al campo correspondiente, los datos se conserven al volver atrás y el estado final sea inequívoco.
Guía de instalación y uso →
Heye
Inicio de sesión e incorporación
GPT 6.1 Sol
ROOMIN
Sitio web de reserva de estudios de grabación
GPT 6.1 Sol
Nest · Cabaña Wanting junto al lago
Detalles y reserva de cabaña
GPT 6.1 Sol
Chute
Módulo de carga de archivos
Claude Fable 5.1
Guías relacionadas
Manual por escenario · Interfaces de aplicaciones móviles
Manual de interfaces de aplicaciones móviles
Evita que los agentes de IA creen páginas de escritorio comprimidas para móvil. Diseña aplicaciones multipantalla a 390×844 con paneles screens.html y estados táctiles.
Guía de agentes · Claude CodeGuía de diseño de interfaces con Claude Code
Instala Oil UI Skill en Claude Code para diseñar sitios web, aplicaciones móviles y módulos de interfaz con paneles de direcciones, briefs claros y revisiones a ciegas mediante capturas.
Método de diseño · Revisión a ciegas en pantallas realesRevisión a ciegas en pantallas reales
Por qué inspeccionar JSX y CSS en el editor no revela errores de diseño. Aprende cómo Oil UI utiliza capturas de navegador a 1440/390 píxeles, recortes al 200 %, bloques desenfocados y subagentes de revisión a ciegas.