Recursos de desarrollo
Páginas y herramientas recomendadas para maquetar, animar y dar estilo a tus webs y apps.
Generadores de UI con IA
- 21st.dev Componentes UI generados con IA
- v0 Genera interfaces desde un prompt (Vercel)
- bolt.new Crea apps full-stack con IA
- Lovable Apps web completas desde texto
- Framer AI Webs con diseño asistido por IA
- Relume Wireframes y sitemaps con IA
- Refero Styles Sistemas de diseño de webs reales, en formato que lee tu agente
Herramientas de agente
- autoskills Mira tu proyecto, ve con qué está hecho e instala las skills que le pegan
- Claude Code El agente de Anthropic en tu terminal: lee el proyecto entero y edita los archivos
- Cursor Editor con el agente dentro, hecho sobre VS Code
- GitHub Copilot El agente que se mete dentro del VS Code que ya tienes
- Cline Agente de código abierto para VS Code, con el modelo que tú elijas
- Aider Agente de terminal que trabaja sobre tu repositorio y commitea solo
Secciones y bloques
- Tailwind Plus Secciones y plantillas oficiales
- Magic UI Componentes animados para landings
- Aceternity UI Efectos y secciones llamativas
- React Bits Animaciones y componentes React
- Preline Bloques Tailwind listos
- Flowbite Componentes y secciones Tailwind
- Cruip Plantillas de landing modernas
Frameworks CSS
- Tailwind CSS CSS utilitario, el estándar actual
- Bootstrap Componentes y grid clásicos
- Bulma Framework CSS basado en Flexbox
- Pico.css CSS mínimo y sin clases
- Open Props Variables CSS listas para usar
Componentes y librerías UI
- shadcn/ui Componentes copia-pega (React)
- daisyUI Componentes para Tailwind
- Material UI Material Design en React
- Radix UI Primitivas accesibles sin estilo
- HyperUI Componentes Tailwind gratis
- Unlumen UI Componentes React con documentación y primitivas
Botones y efectos
- Uiverse Botones y efectos de la comunidad
- CSS Buttons Botones CSS listos para copiar
- Animista Generador de animaciones CSS
- Hover.css Efectos hover listos
- Neumorphism.io Generador de sombras suaves
Animación y movimiento
- GSAP Animaciones JS profesionales
- Framer Motion Animaciones para React
- Animate.css Animaciones CSS listas
- Tailwind Animations Animaciones listas como clases de Tailwind, sin configurar nada
- AOS Animar al hacer scroll
- LottieFiles Animaciones vectoriales JSON
- Three.js Gráficos y 3D en la web
- EZGIF vídeo a JPG Parte un vídeo en fotogramas para animarlo con el scroll
Iconos
- Lucide Iconos SVG limpios y abiertos
- Heroicons Iconos del equipo de Tailwind
- Font Awesome La mayor biblioteca de iconos
- Tabler Icons Más de 5000 iconos SVG
- Phosphor Icons Iconos flexibles y consistentes
Color y gradientes
- Coolors Generador de paletas de color
- Color Hunt Paletas de color curadas
- Realtime Colors Prueba paletas en una web real
- uiGradients Gradientes listos para copiar
- CSS Gradient Generador de gradientes CSS
Fondos y formas
- Haikei Generador de fondos SVG
- Hero Patterns Patrones SVG repetibles
- Get Waves Generador de ondas SVG
- Smooth Shadows Sombras CSS suaves por capas
- CSSmatic Gradientes, sombras y más
Tipografía
- Google Fonts Fuentes web gratuitas
- Fontpair Combinaciones de fuentes
- Type Scale Escala tipográfica visual
- Fontjoy Emparejar fuentes con IA
Ilustraciones e imágenes
- unDraw Ilustraciones SVG gratis
- Storyset Ilustraciones personalizables
- Unsplash Fotos gratuitas de alta calidad
- Pexels Fotos y vídeos gratis
- DrawKit Ilustraciones y recursos
Inspiración
- Awwwards Inspiración de webs premiadas
- Dribbble Inspiración de diseño UI
- CodePen Demos y experimentos front
- CollectUI Interfaces nuevas cada día, elegidas a mano
- Saaspo Landings de productos de IA, para robar ideas
Aprender
- MDN Web Docs La referencia de la web
- CSS-Tricks Guías y trucos de CSS
- roadmap.sh Qué estudiar y en qué orden, por oficio
- AI Hero Cursos y tutoriales para programar con IA
- 100 proyectos de JavaScript Cien proyectos para practicar, con su código y su vídeo
- Libros gratis Libros de programación gratis, en español
- Aprendiendo React Curso de React desde cero, proyecto a proyecto
- JSCamp Bootcamp gratis de JavaScript full-stack, con ejercicios
Antes de lanzar
- Spamhaus Mira si tu dominio o tu IP están en listas de spam
- MXToolbox Email Health Revisa el correo del dominio: MX, SPF, DMARC y listas negras (1 análisis gratis al día)