AI builds my personal website INSTANTLY!

Key Concepts

• Google AI Studio: A platform for building applications with generative AI models.
• Build in: A feature within Google AI Studio designed for website generation.
• Annotation Feature: A tool within Google AI Studio allowing users to refine AI-generated content by providing specific instructions and feedback.
• Generative AI: Artificial intelligence capable of creating new content, in this case, website code and design.
• PDF Input: Utilizing a PDF document (LinkedIn profile) as a data source for website content.
• Image Inspiration: Using an image file (inspo.png) to guide the aesthetic style of the generated website.

---

Website Generation with Google AI Studio: A Detailed Walkthrough

This demonstration showcases the rapid prototyping of a personal portfolio website using Google AI Studio’s “Build in” feature, leveraging a LinkedIn profile PDF and an inspiration image. The process highlights the iterative nature of AI-assisted development and the utility of the annotation tools for refinement.

1. Initial Setup & Data Input

The user begins by importing three key elements into Google AI Studio’s “Build in” environment:

• LinkedIn Profile (profile.pdf): This PDF serves as the primary source of content for the website, including work experience, skills, and contact information.
• Profile Image: A personal photograph to ensure accurate representation on the website.
• Inspiration Image (inspo.png): This image provides a visual guide for the desired aesthetic style and layout of the website.

The initial prompt given to the AI is: “help me create a personal portfolio website based on the profile.pdf file which contains my LinkedIn profile and then use the inspo.png as inspiration for how the website should look like and then make sure that you include that profile picture of me as well.”

2. Rapid Prototype Generation & Initial Assessment

Within approximately three minutes, the AI generates a functional website prototype. The user immediately observes the AI’s ability to accurately extract and present information from the LinkedIn PDF. Specifically, the AI successfully incorporates:

• Work Experience: Details from the LinkedIn profile are accurately displayed.
• Contact Information: Email address is included.
• Skills: The AI identifies and lists skills, including “machine learning” and “public speaking.”

The user expresses surprise and satisfaction with the initial result, stating, “I love it. I love it. Look, it really got like I've been to your LinkedIn page, so I know what's there.” This demonstrates the AI’s capacity for detailed information extraction and contextual understanding.

3. Iterative Refinement with the Annotation Feature

Despite the impressive initial output, the generated website contains an error – the profile image is missing or incorrect. This illustrates a common challenge with AI-generated content: the need for human oversight and correction.

The user leverages Google AI Studio’s annotation feature to address this issue. This feature allows for targeted feedback and instructions directly within the generated output. The process involves:

• Selecting the problematic area: The user highlights the section where the profile image should be.
• Providing specific instructions: The user instructs the AI to “add that section to chat and fix my image with the actual profile picture.”

4. Style Consistency & AI Behavior

The user notes that the AI initially attempted to style the website with a black and white aesthetic, mirroring the style of the inspiration image. This demonstrates the AI’s ability to interpret and apply stylistic cues from the provided inspiration image. The AI retained this stylistic element even after the image issue was addressed, showcasing a degree of consistency in its design choices.

5. Technical Considerations & Observations

The brief interruption regarding the image being “no longer available” highlights the potential for instability or temporary issues with AI-generated content and image handling. This underscores the importance of testing and verifying the functionality of AI-generated outputs.

Synthesis & Main Takeaways

This demonstration showcases the potential of Google AI Studio’s “Build in” feature for rapidly prototyping personal websites. The process emphasizes the power of combining structured data (LinkedIn PDF) with visual inspiration (inspo.png) to generate a customized website. The annotation feature is crucial for iterative refinement and ensuring accuracy. While AI can significantly accelerate the development process, human oversight remains essential for quality control and addressing potential errors. The example highlights the evolving nature of AI-assisted development, where users act as collaborators and editors rather than solely as coders.