Ambiente y Herramientas: El Kit Completo del Vibe Coder

# Ambiente y Herramientas: El Kit Completo del Vibe Coder Antes de comenzar a construir, necesitas armar tu kit de herramientas. El ecosistema de Vibe Coding está compuesto por diversas plataformas, cada una con sus fortalezas. En esta lección, vas a conocer todas ellas, entender cuándo usar cada una, y configurar tu ambiente para máxima productividad. ## El Ecosistema de Herramientas El Vibe Coding no depende de una única herramienta. Dependiendo de lo que quieres construir, vas a usar combinaciones diferentes: **Para crear interfaces y apps completos:** - **Cursor AI** -- Editor de código local con IA. Mejor para proyectos complejos y personalizados. - **Lovable** -- Plataforma web que genera apps completos. Ideal para MVPs rápidos. - **Bolt.new** -- Ambiente en el navegador con IA. Perfecto para prototipos y apps full-stack. - **V0 by Vercel** -- Genera componentes visuales React. Especializado en UI/design systems. - **Replit Agent** -- Crea y publica apps instantáneamente. El más simple de usar. - **Windsurf** -- IDE con IA que entiende el proyecto entero. Buena para proyectos grandes. **Para backend y datos:** - **Supabase** -- Backend completo (base de datos, autenticación, storage, realtime) en minutos. - **Firebase** -- Alternativa al Supabase de Google. - **PlanetScale** -- Base de datos MySQL serverless. **Para automatización:** - **n8n** -- Automatización visual de workflows. Open source y auto-hospedable. - **Make (Integromat)** -- Automatización visual con cientos de integraciones. - **Zapier** -- El más popular para automatizaciones simples. **Para deploy y hospedaje:** - **Vercel** -- Deploy automático para apps Next.js y React. - **Netlify** -- Alternativa al Vercel con funcionalidades similares. - **Railway** -- Deploy de backends, bases de datos y servicios. - **Cloudflare Pages** -- Deploy gratuito con CDN global. **Para pagos:** - **Stripe** -- El estándar de la industria para pagos online. - **LemonSqueezy** -- Alternativa simplificada al Stripe para productos digitales. - **MercadoPago** -- Esencial para el mercado brasileño. ## Configuración Esencial Para comenzar, necesitas crear cuentas en estas plataformas. Todas tienen planes gratuitos suficientes para aprender: 1. **Cursor AI** -- Descarga en cursor.com. El plan gratuito incluye créditos de IA limitados. El plan Pro cuesta US$20/mes. 2. **Lovable** -- Crea cuenta en lovable.dev. Plan gratuito permite 5 proyectos. 3. **Bolt.new** -- Accede a bolt.new. Plan gratuito con límites de generación. 4. **V0** -- Accede a v0.dev. Requiere cuenta Vercel (gratuita). 5. **Supabase** -- Crea cuenta en supabase.com. Plan gratuito incluye 2 proyectos con base de datos. 6. **Vercel** -- Crea cuenta en vercel.com. Deploy gratuito para proyectos personales. 7. **GitHub** -- Si aún no tienes, crea en github.com. Esencial para versionamiento. ## Herramientas Locales Si vas a usar Cursor AI o Windsurf (que corren en tu máquina), instala también: - **Node.js 20 LTS** -- Runtime JavaScript. Descarga en nodejs.org. - **pnpm** -- Gerenciador de paquetes más rápido que npm. Instala con `npm install -g pnpm`. - **Git** -- Control de versión. Ya viene instalado en macOS y Linux. - **VS Code** -- Editor de código base (Cursor es un fork del VS Code, entonces la transición es natural). Para verificar si todo está instalado: ```bash node --version # debe ser 20+ pnpm --version # cualquier versión git --version # cualquier versión ``` ## Cuándo Usar Cada Herramienta La elección de la herramienta depende de tu objetivo: | Objetivo | Herramienta Recomendada | |---|---| | MVP rápido para validar idea | Lovable o Bolt.new | | Landing page profesional | V0 + Vercel | | SaaS con funcionalidades complejas | Cursor AI + Supabase | | App con deploy instantáneo | Replit Agent | | Componentes visuales aislados | V0 by Vercel | | Proyecto grande con equipo | Windsurf o Cursor AI | | Backend sin frontend | Supabase + n8n | | Automatizaciones entre servicios | n8n o Make | ## Consejo Practico No intentes dominar todas las herramientas de una vez. Escoge **una herramienta de creación** (recomiendo Cursor AI o Lovable para comenzar) y **una de backend** (Supabase). Domina esas dos primero. Cuando estés cómodo, expande para las otras. La peor cosa que puedes hacer es saltar entre herramientas sin profundizar en ninguna. ## Videos Recomendados ### PT-BR - [Kit de Ferramentas para Vibe Coding 2025](https://www.youtube.com/results?search_query=ferramentas+vibe+coding+cursor+lovable+bolt+2025+portugues) ### EN - [Best AI Coding Tools Comparison 2025](https://www.youtube.com/results?search_query=best+ai+coding+tools+comparison+cursor+lovable+bolt+2025) ## Lectura Recomendada - **"Make: Getting Started with AI Tools"** -- Varios autores. Guía práctico sobre cómo elegir y combinar herramientas de IA para proyectos. ## Podcasts - **Indie Hackers Podcast** (indiehackers.com) -- Emprendedores compartiendo cómo usan herramientas modernas para construir negocios. ## Herramientas y Recursos - **Cursor AI** -- [https://cursor.com](https://cursor.com) -- Editor de código con IA. - **Supabase** -- [https://supabase.com](https://supabase.com) -- Backend completo open source. - **Vercel** -- [https://vercel.com](https://vercel.com) -- Deploy automático para frontend. - **n8n** -- [https://n8n.io](https://n8n.io) -- Automatización de workflows open source. ## Puntos Clave - El ecosistema Vibe Coding combina herramientas de creación, backend, automatización y deploy - Todas las herramientas principales tienen planes gratuitos suficientes para aprender - La elección de la herramienta depende del tipo de proyecto y nivel de complejidad - Comienza dominando una herramienta de creación y una de backend antes de expandir - Node.js, pnpm y Git son esenciales para herramientas locales como Cursor AI