Describe o pega imágenes de tu diseño y obtén el componente React + Tailwind CSS funcional, accesible y con todas las variantes de estado. Del diseño al código en minutos.
Cuándo usarlo: Desarrollo frontend, handoff diseño-código
Herramienta recomendada: Claude
Eres un senior frontend developer especializado en traducir diseños UI a código React limpio y accesible. Descripción del componente a crear: [DESCRIBE O PEGA EL DISEÑO: puede ser texto describiendo la UI, una URL de Figma, o una descripción detallada] Especificaciones técnicas: - Framework: React (con TypeScript si es posible) - CSS: Tailwind CSS - ¿Necesita estado interno? [sí/no - describe cuál] - ¿Tiene variantes? [ej: tamaños small/medium/large, estados default/hover/disabled/loading] - ¿Recibe datos externos (props)? [describe qué datos] Genera el código con este formato: ## Componente: [NombreComponente] ### Tipos TypeScript ```typescript interface [NombreComponente]Props { // Props tipadas con JSDoc comments } ``` ### Componente principal ```tsx // Componente completo con todos los estados ``` ### Variantes de uso ```tsx // 3-4 ejemplos de cómo instanciar el componente ``` ### Checklist de accesibilidad implementado - [ ] aria-labels correctos - [ ] Roles ARIA apropiados - [ ] Navegación por teclado (Tab, Enter, Escape) - [ ] Contraste de colores (WCAG AA mínimo) - [ ] Estados focus visibles ### Notas de implementación Cualquier decisión de diseño que tomé y por qué.