Learning Timeline
Key Insights
Free of Charge
Google AI Studio is currently free to use (free tier). This allows you to experiment with various ideas and complex prompts without worrying about paid token usage.
Multimodal Generative Capabilities
Gemini in AI Studio doesn't just generate text or HTML code; it can automatically 'call' image models (like Imagen) to populate your website with relevant images without needing you to upload external files.
Prompts
Cat News Site Prompt
Target:
Google AI Studio (Gemini)
Build me a professional looking news site that parodies tech news, but written for cats. Make it look slick and include generated graphics in there.
Step by Step
Building a Responsive Website in AI Studio
- Log in to the Google AI Studio website.
- Select your preferred model (e.g., Gemini 1.5 Pro or Gemini 2.0 Flash Thinking) from the model dropdown menu on the right panel.
- Adjust the 'Thinking Level' settings (if available for the selected model) to define the AI's logical depth.
- Type a detailed prompt describing the structure, content, and aesthetic style of the website into the prompt box (refer to the Prompt card below).
- Ensure you ask the AI to include graphic elements or images to allow it to trigger the 'Imagen' model automatically.
- Click the 'Run' button to generate the code and the website preview.
- Check the preview display on the right side of the screen to view the news site layout.
- Resize your browser window to test whether the design is responsive to different screen sizes.
