Herramientas
Esta lista recopila utilidades gratuitas y de acceso abierto que agilizan tareas cotidianas en desarrollo, diseño, documentación y operaciones. Están seleccionadas por su utilidad práctica, facilidad de uso y capacidad para integrarse en flujos de trabajo reales.
Utilidades generales y productividad
| Nombre | Descripción | Enlace |
|---|---|---|
| Shots | Generador de mockups y capturas de pantalla con estilos profesionales. | shots.so |
| Squoosh | Compresor de imágenes en el navegador con control total de calidad y formato. | squoosh.app |
| Slimify | Optimizador de imágenes para web con soporte para WebP y AVIF. | slimify.app |
| Tenno | Herramienta para crear presentaciones y documentación visual rápida. | tenno.app |
| Photopea | Editor de imágenes avanzado en el navegador, compatible con PSD, AI y XD. | photopea.com |
| Excalidraw | Pizarra virtual para diagramas, esquemas y notas con estilo dibujado a mano. | excalidraw.com |
| Mermaid Live Editor | Editor en vivo para diagramas con sintaxis Mermaid (flujos, secuencias, Gantt). | mermaid.live |
| Carbon | Crea imágenes de código con estilos personalizables para compartir o documentar. | carbon.now.sh |
| Regex101 | Probador y depurador de expresiones regulares con explicación paso a paso. | regex101.com |
| Cronitor | Monitor de tareas programadas (cron jobs) y workers en la nube. | cronitor.io |
Desarrollo frontend y diseño CSS
| Nombre | Descripción | Enlace |
|---|---|---|
| Creative Tim Components | Biblioteca de componentes UI gratuitos basados en Tailwind CSS. | twcomponents.com |
| Public APIs | Directorio curado de APIs públicas gratuitas para prototipado y aprendizaje. | publicapis.dev |
| Mocky | Generador de respuestas HTTP mock para testing de APIs frontend. | designer.mocky.io |
| Colour Contrast | Verificador de contraste de colores según WCAG para accesibilidad. | colourcontrast.cc |
| Potlab Icons | Colección de iconos SVG personalizables y optimizados para web. | potlabicons.com |
| HubDev Tools | Directorio de herramientas para desarrolladores web y mobile. | hubdev.tools |
| HTMLRev | Plantillas HTML gratuitas y de código abierto para proyectos rápidos. | htmlrev.com |
| Open-Meteo | API meteorológica gratuita sin clave para aplicaciones y dashboards. | open-meteo.com |
| fffuel CSS Selectors | Guía visual interactiva de selectores CSS con ejemplos editables. | fffuel.co/css-selectors |
| CSS Reference | Referencia visual de propiedades CSS con ejemplos y valores por defecto. | cssreference.io |
| CSS Animation Rocks | Tutoriales y recursos para dominar animaciones CSS. | cssanimation.rocks |
| Glassmorphism Generator | Generador de efectos glassmorphism con código CSS listo para usar. | markodenic.com/tools/glassmorphism-css-generator |
| Neumorphism.io | Generador de estilos neumórficos con exportación CSS. | neumorphism.io |
| Stripes Generator | Creador de patrones de rayas personalizables con salida CSS/SVG. | stripesgenerator.com |
| GetWaves | Generador de ondas SVG para secciones de landing pages. | getwaves.io |
| MyColor | Paletas de colores generadas a partir de un solo color base. | mycolor.space |
| CSS Gradient | Editor visual de degradados CSS con múltiples paradas y ángulos. | cssgradient.io |
| CSS Grid Generator | Creador visual de layouts con CSS Grid y código exportable. | cssgrid-generator.netlify.app |
| Animate.style | Biblioteca de animaciones CSS predefinidas con clases listas para usar. | animate.style |
| Clippy | Editor visual para clip-path con formas personalizables y código CSS. | bennettfeely.com/clippy |
| W3C CSS Validator | Validador oficial de hojas de estilo para detectar errores de sintaxis. | jigsaw.w3.org/css-validator |
| Cool Contrast | Herramienta minimalista para verificar contraste entre dos colores. | coolcontrast.vercel.app |
| CSS Scan | Inspector visual de estilos CSS en cualquier sitio web (extensión). | cssscan.com |
| Flexbox Froggy | Juego interactivo para aprender CSS Flexbox de forma práctica. | flexboxfroggy.com |
| Grid Garden | Juego para dominar CSS Grid mediante retos progresivos. | cssgridgarden.com |
APIs, datos y backend
| Nombre | Descripción | Enlace |
|---|---|---|
| HTTPie | Cliente HTTP moderno para terminal con sintaxis intuitiva y colores. | httpie.io |
| Insomnia | Cliente de API con soporte para REST, GraphQL y gRPC, con entorno y variables. | insomnia.rest |
| Hoppscotch | Alternativa ligera y open source a Postman, ejecutable en navegador. | hoppscotch.io |
| JSONPlaceholder | API falsa gratuita para prototipado frontend con endpoints REST. | jsonplaceholder.typicode.com |
| ReqRes | API de prueba con usuarios, login y paginación para testing de frontend. | reqres.in |
| Beekeeper Studio | Cliente de bases de datos multiplataforma con interfaz limpia y soporte SQL. | beekeeperstudio.io |
| DBeaver | Herramienta universal de gestión de bases de datos, open source y multi-DB. | dbeaver.io |
| TablePlus | Cliente moderno para bases de datos con soporte nativo para múltiples motores. | tableplus.com |
| DB Fiddle | Entorno online para probar consultas SQL en múltiples motores sin instalación. | db-fiddle.com |
| SQL Fiddle | Plataforma para compartir y probar esquemas y queries SQL. | sqlfiddle.com |
| Mockaroo | Generador de datos falsos realistas en CSV, JSON, SQL y Excel. | mockaroo.com |
| Faker.js | Librería para generar datos aleatorios realistas en JavaScript. | fakerjs.dev |
| Postman | Plataforma completa para diseño, testing y documentación de APIs. | postman.com |
| Swagger Editor | Editor online para diseñar y documentar APIs con OpenAPI Specification. | editor.swagger.io |
| Requestly | Herramienta para interceptar, modificar y redirigir peticiones HTTP en el navegador. | requestly.io |
Imágenes, multimedia y assets
| Nombre | Descripción | Enlace |
|---|---|---|
| TinyPNG | Compresor inteligente de PNG y JPG con pérdida mínima de calidad. | tinypng.com |
| SVGOMG | Optimizador de SVG con interfaz visual y control de precisión. | jakearchibald.github.io/svgomg |
| Remove.bg | Eliminador automático de fondos de imágenes con IA, sin registro. | remove.bg |
| Coolors | Generador de paletas de colores con exportación en múltiples formatos. | coolors.co |
| Fontshare | Biblioteca de fuentes gratuitas de alta calidad para uso comercial. | fontshare.com |
| Google Fonts | Catálogo de fuentes web gratuitas con carga optimizada y variables. | fonts.google.com |
| IconScout | Mercado de iconos, ilustraciones y assets 3D con opción gratuita. | iconscout.com |
| Unsplash | Banco de imágenes de alta resolución libres de derechos para proyectos. | unsplash.com |
| Pexels | Fotos y videos gratuitos para uso comercial, con búsqueda avanzada. | pexels.com |
| LottieFiles | Biblioteca de animaciones JSON ligeras para web y mobile. | lottiefiles.com |
| Canva | Herramienta de diseño gráfico online con plantillas y exportación flexible. | canva.com |
| Figma | Plataforma de diseño colaborativo con prototipado y handoff para desarrollo. | figma.com |
Desarrollo, DevOps y terminal
| Nombre | Descripción | Enlace |
|---|---|---|
| Visual Studio Code | Editor de código extensible con ecosistema de extensiones y terminal integrado. | code.visualstudio.com |
| GitKraken | Cliente gráfico para Git con visualización de ramas y flujo de trabajo visual. | gitkraken.com |
| LazyGit | Interfaz de terminal simple y poderosa para operaciones de Git. | github.com/jesseduffield/lazygit |
| Docker Desktop | Entorno gráfico para gestionar contenedores, imágenes y composiciones locales. | docker.com/products/docker-desktop |
| Portainer | Interfaz web para gestionar entornos Docker y Kubernetes de forma visual. | portainer.io |
| ngrok | Túnel seguro para exponer servidores locales a internet con HTTPS. | ngrok.com |
| LocalXpose | Alternativa a ngrok con soporte para múltiples protocolos y autenticación. | localxpose.io |
| Warp | Terminal moderna con IA integrada, comandos compartidos y flujos de trabajo. | warp.dev |
| iTerm2 | Terminal avanzado para macOS con búsqueda, autocompletado y paneles. | iterm2.com |
| Windows Terminal | Terminal unificada para Windows con soporte para PowerShell, CMD y WSL. | aka.ms/terminal |
| Oh My Zsh | Framework para personalizar la shell Zsh con temas, plugins y funciones. | ohmyz.sh |
| Starship | Prompt minimalista y rápido para cualquier shell, con detección automática de contexto. | starship.rs |
| DevDocs | Documentación técnica agregada con búsqueda offline y modo oscuro. | devdocs.io |
| Dash | Gestor de documentación y snippets para macOS con búsqueda instantánea. | kapeli.com/dash |
| Zeal | Alternativa open source a Dash para Linux y Windows. | zealdocs.org |
Seguridad, testing y calidad
| Nombre | Descripción | Enlace |
|---|---|---|
| Security Headers | Analizador de cabeceras de seguridad HTTP con recomendaciones y puntuación. | securityheaders.com |
| SSL Labs | Evaluador de configuración SSL/TLS con informe detallado y calificación. | ssllabs.com/ssltest |
| Mozilla Observatory | Escáner de seguridad web con guía de remediación paso a paso. | observatory.mozilla.org |
| Lighthouse | Auditoría automatizada de rendimiento, accesibilidad, SEO y PWA en Chrome. | developer.chrome.com/docs/lighthouse |
| WebPageTest | Pruebas de rendimiento desde múltiples ubicaciones y dispositivos reales. | webpagetest.org |
| GTmetrix | Análisis de velocidad de carga con recomendaciones priorizadas y video de carga. | gtmetrix.com |
| PageSpeed Insights | Herramienta de Google para medir rendimiento en móvil y escritorio con métricas Core Web Vitals. | pagespeed.web.dev |
| OWASP ZAP | Escáner de seguridad para aplicaciones web, open source y con interfaz gráfica. | zaproxy.org |
| Burp Suite Community | Proxy de interceptación para testing de seguridad en aplicaciones web. | portswigger.net/burp/communitydownload |
| Have I Been Pwned | Verificador de filtraciones de correo y contraseñas en brechas conocidas. | haveibeenpwned.com |
| VirusTotal | Analizador de archivos y URLs con múltiples motores antivirus y sandbox. | virustotal.com |
| Shodan | Motor de búsqueda para dispositivos conectados a internet y superficies de ataque. | shodan.io |
Documentación, colaboración y conocimiento
| Nombre | Descripción | Enlace |
|---|---|---|
| Obsidian | Aplicación de notas basada en Markdown con enlaces bidireccionales y grafo de conocimiento. | obsidian.md |
| Logseq | Gestor de conocimiento personal con enfoque en blocs y consultas estructuradas. | logseq.com |
| Notion | Espacio de trabajo todo-en-uno para notas, bases de datos, wikis y proyectos. | notion.so |
| GitBook | Plataforma para documentación técnica con versionado, búsqueda y colaboración. | gitbook.com |
| Docusaurus | Generador de sitios estáticos para documentación con React y Markdown. | docusaurus.io |
| MkDocs | Generador de documentación estática en Python con soporte para Markdown y temas. | mkdocs.org |
| Mermaid | Sintaxis basada en texto para generar diagramas (flujos, secuencias, clases) en Markdown. | mermaid.js.org |
| Draw.io | Herramienta de diagramación gratuita con exportación a múltiples formatos y integración con nube. | draw.io |
| tldraw | Pizarra infinita minimalista para bocetos rápidos y colaboración en tiempo real. | tldraw.com |
| Excalidraw | Pizarra virtual con estilo dibujado a mano, ideal para diagramas informales y presentaciones. | excalidraw.com |
Consejos para gestionar herramientas
- Mantén un inventario: documenta qué usas, para qué y dónde está la documentación oficial.
- Automatiza la configuración: usa dotfiles, scripts o contenedores para replicar tu entorno.
- Prioriza lo open source: cuando sea posible, elige herramientas con código visible y comunidad activa.
- Evalúa antes de adoptar: prueba en un proyecto pequeño antes de integrar una herramienta en tu flujo principal.
- Revisa periódicamente: elimina lo que no usas, actualiza lo crítico y documenta cambios relevantes.