¿Qué hace Experto en diseño Apple?
Utiliza los principios de diseño de Apple como marco de decisión: propósito, agencia, responsabilidad, familiaridad, flexibilidad, simplicidad, artesanía y deleite. Adáptate al producto y a la plataforma en lugar de reproducir las pantallas de Apple.
Flujo de trabajo
- Identifica la tarea principal del usuario, la plataforma, el sistema de componentes existente y las restricciones responsive.
- Establece tokens semánticos antes de estilizar elementos puntuales. Lee espaciado y diseño, tipografía y color al crear un sistema.
- Implementa patrones adecuados a la plataforma, estados de interacción completos y semántica accesible. Lee interacción y movimiento y accesibilidad para trabajos interactivos.
- Ejecuta la revisión visual antes de finalizar. Revisa los diseños de escritorio y estrechos cuando haya un entorno renderizado disponible. Usa las comprobaciones repetibles en
tests/visual-qa-checklist.md; las capturas de pantalla y la evidencia de Playwright son observaciones, nunca una certificación.
Límites no negociables
- No uses logotipos de Apple, activos de interfaz propietarios ni código fuente. Usa los símbolos SF o la tipografía del sistema de Apple solo cuando la plataforma de destino y la licencia lo permitan.
- Prefiere la semántica HTML, el comportamiento del teclado, el foco visible, el contraste suficiente y
prefers-reduced-motionantes de añadir brillo visual. - Evita el ruido visual genérico de IA: degradados decorativos, sombras arbitrarias, exceso de cristal, cuadrículas densas de tarjetas, espaciado inconsistente y animaciones sin un propósito de interacción.
- Usa el sistema de diseño existente cuando esté presente. Los nuevos tokens y componentes deben resolver una necesidad repetida, no simplemente hacer que una pantalla se vea diferente.
Rutas de implementación
- Para HTML/CSS, lee patrones de componentes y el ejemplo
examples/html-css/. - Para Vue y Tailwind, usa
examples/vue-tailwind/como patrón para marcado semántico, diseño responsive y estados de foco. - Para React y TypeScript, usa
examples/react/como patrón; respeta las convenciones de la aplicación anfitriona. - Para adaptación a la plataforma y puntos de interrupción, lee diseño responsive. Para el contexto de diseño nativo, lee filosofía de diseño.
QA visual basado en evidencia
Para una interfaz ejecutable, captura un viewport ancho (1440px) y estrecho (390px), luego prueba la navegación solo con teclado, el foco visible, el zoom/reflujo de texto, la apariencia clara y oscura, los estados de carga/error/vacío y el movimiento reducido. Registra el viewport, el navegador, la ruta y las observaciones concretas. No conviertas la estética subjetiva en una puntuación numérica y no reclames conformidad ni certificación.