Stelle Google AI Studio-Projekte bereit
Eine Schritt-für-Schritt-Anleitung, um dein Google AI Studio-Projekt mit GitHub zu verbinden, es mit Hostinger bereitzustellen und es live zu schalten.
Roadmap & Ressourcen
Das Projekt erstellen
Öffne Google AI Studio
Generiere deine Website oder Web-App
In diesem Schritt verwendeter Prompt
Prompt 1 — KI-SaaS-Website-Prompt
Erstelle eine futuristische Premium-KI-SaaS-Landing-Page mit einer dunklen cineastischen Ästhetik…
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.
Speichere es auf GitHub
Verbinde dein GitHub-Konto
Erstelle ein Repository für das Projekt
Pushe das Projekt zu GitHub
Mit Hostinger bereitstellen
Auf Hostinger bereitstellen
Veröffentliche dieses Projekt mit demselben Setup wie im Video.
RECOMMENDED
https://www.hostg.xyz/SHJF8
Erstelle eine Node.js-Web-App in Hostinger
Verbinde dein GitHub-Repository
Die erforderlichen Umgebungsvariablen hinzufügen
API_KEY GOOGLE_API_KEY GEMINI_API_KEY VITE_GOOGLE_API_KEY VITE_GEMINI_API_KEY
API_KEY
Gemini-API-Schlüssel
GOOGLE_API_KEY
Gemini-API-Schlüssel
GEMINI_API_KEY
Gemini-API-Schlüssel
VITE_GOOGLE_API_KEY
Gemini-API-Schlüssel
VITE_GEMINI_API_KEY
Gemini-API-Schlüssel
Diesen Schlüssel findest du in Google AI Studio
API-Schlüssel öffnen
https://aistudio.google.com/app/apikey