Despliega proyectos de Google AI Studio
Una guía paso a paso para conectar tu proyecto de Google AI Studio a GitHub, desplegarlo con Hostinger y ponerlo en línea.
Hoja de ruta y recursos
Crear el proyecto
Abrir Google AI Studio
Genera tu sitio web o app web
Prompt usado en este paso
Prompt 1 — Prompt del sitio web SaaS con IA
Crea una landing page de IA SaaS premium y futurista con una estética oscura y cinematográfica…
Create a premium futuristic AI SaaS landing page with a dark cinematic aesthetic, inspired by high-end modern startup websites. Style direction: - Ultra premium - Minimal but visually striking - Dark black background with deep purple / blue glow accents - Clean glassmorphism elements - Soft gradients, subtle reflections, and ambient lighting - Apple / Vercel / Stripe level polish - Smooth spacing, strong typography, and luxury tech feel Main hero section: - Large bold headline on the left - Make the headline visually dynamic by mixing clean bold sans-serif with one elegant italic/emphasized word - Add a short supporting paragraph below - Add 2 CTA buttons: 1. Primary solid button 2. Secondary ghost button with icon - On the right side, create a premium 3D AI robot or futuristic assistant object, placed on a pedestal or floating platform - Add subtle floating UI status cards around the robot, such as: - CORE_ONLINE - LATENCY: 12ms - AI ACTIVE - LIVE SYNC - Add a small badge above the headline like: “Introducing [Product Name] OS v2.0” Navbar: - Clean transparent/dark glass navbar - Logo on the left - 3 to 4 nav links in the center - Rounded CTA button on the right - The navbar should feel elegant and slightly floating Visual quality: - Use cinematic lighting - Add subtle grain/noise texture for depth - Use soft radial glows in the background - Strong contrast for readability - Make the whole page feel alive and premium, not flat - Use smooth hover states and micro-interactions - Rounded corners everywhere - Add depth using shadows and blurred glow layers Page sections after hero: 1. Features section with 3 premium cards 2. AI capabilities / platform section 3. Product demo or interface preview section 4. Testimonials or trust section 5. Pricing section 6. Final CTA section 7. Premium footer Typography: - Very large hero text - Clean sans-serif for most text - Elegant contrasting accent style for one keyword in hero - Modern spacing and hierarchy Color palette: - Black / near-black base - Purple, violet, blue neon accents - White text - Soft gray secondary text Technical requirements: - Build this as a fully responsive modern website - Ensure excellent desktop and mobile layout - Use smooth animations on scroll - Keep everything polished and production-ready - Do not make it look generic or template-like - Focus on premium SaaS conversion-oriented design Product concept: The product is an advanced AI assistant platform that feels intelligent, luxurious, futuristic, and human-friendly. Give the brand a strong modern name and create all copy accordingly.
Guárdalo en GitHub
Conecta tu cuenta de GitHub
Crea un repositorio para el proyecto
Sube el proyecto a GitHub
Desplegar con Hostinger
Desplegar en Hostinger
Publica este proyecto con la misma configuración que se muestra en el vídeo.
RECOMMENDED
https://www.hostg.xyz/SHJF8
Crea una Node.js web app en Hostinger
Conecta tu repositorio de GitHub
Añadir las variables de entorno requeridas
API_KEY GOOGLE_API_KEY GEMINI_API_KEY VITE_GOOGLE_API_KEY VITE_GEMINI_API_KEY
API_KEY
Clave de API de Gemini
GOOGLE_API_KEY
Clave de API de Gemini
GEMINI_API_KEY
Clave de API de Gemini
VITE_GOOGLE_API_KEY
Clave de API de Gemini
VITE_GEMINI_API_KEY
Clave de API de Gemini
Obtén esta clave en Google AI Studio
Abrir claves de API
https://aistudio.google.com/app/apikey