Vibe Coding

Rapid Prototyping with Gemini & VS Code

A Guide to a Faster, More Creative Workflow

The Problem

"I have a cool idea, but..."

  • You get bogged down by boilerplate code.
  • You forget syntax and have to look things up.
  • Project setup kills your momentum.
  • You lose that initial creative spark.

Today, we learn to stay in the creative zone.

The Solution: "Vibe Coding"

What is it?

A fluid workflow using AI as your creative partner.

  • You: Focus on the big picture, the idea, and the final polish.
  • AI (Gemini): Handles the heavy lifting (code, syntax, debugging).
  • Editor (VS Code): Your professional workshop for testing and refinement.

The Tools

🤖

Gemini

Our idea generator, co-pilot, and debugger.

💻

VS Code

Our workshop for building, testing, and refining.

The "One-Shot" Website Prompt

A more advanced technique.

Try this "all-in-one" prompt to generate a full website in a single file. This is great for "wowing" people with a rapid prototype.

"Act as an expert frontend developer. Create a complete, one-page, responsive website in a SINGLE HTML file. Use inline <style> for CSS and inline <script> for JavaScript. The website is for a fictional product 'Aura'. 1. **HTML Structure:** - A <header> with a logo ('Aura') and nav menu ('Home', 'Features', 'About', 'Contact'). - A 'hero' section with a headline ('Discover Your Aura') and a 'Get Started' button. - A 'features' section using a 3-column grid. - An 'about' section. - A 'contact' section with a simple form. - A <footer> with a copyright. 2. **CSS Styling (in <style> tags):** - **Theme:** Modern dark mode (Background: #111827, Text: #F9FAFB). - **Accent:** Bright purple/indigo (e.g., #818cf8). - **Typography:** Use 'Inter' from Google Fonts. - **Layout:** Use Flexbox/Grid. Must be responsive. - **Mobile:** Include a working hamburger menu. 3. **JavaScript (in <script> tags):** - **Smooth Scrolling:** Make nav links scroll smoothly to sections. - **Mobile Menu:** Make the hamburger menu toggle the mobile navigation. - **Form Validation:** Check that the email field is not empty on submit."

The Vibe Coding Workflow

  1. Idea: Start with a clear, simple goal.
  2. Setup: Prepare a live testing environment (VS Code + Live Server).
  3. Prompt (Gemini): Ask for specific HTML, CSS, and JS.
  4. Integrate (VS Code): Copy, paste, and connect the pieces.
  5. Test (Live Server): Instantly see the results.
  6. Refine (Loop): Go back to Gemini for fixes, then polish in VS Code.

Share Your Vibe on GitHub

You've built it. Now let's share it with the world.

  1. Create a new repository on GitHub.
  2. In the VS Code terminal, initialize Git: git init
  3. Stage and commit your files:
    git add .
    git commit -m "Initial commit"
  4. Set your main branch name:
    git branch -M main
  5. Link your repo and push your code:
    git remote add origin <repo_url>
    git push -u origin main
  6. Your project is now live on GitHub!

Your Turn!

Call to Action:

  • Try this workflow yourself!
  • Pick a small project, fire up Gemini and VS Code.
  • See how fast you can bring your vibe to life.

Happy Coding!

Questions? Reach out:

www.alanarmstrongai.com

Treat Gemini like a conversation.

Don't just give one-off commands. Refine your ideas by saying things like, "That's good, but can you make the buttons purple?" or "How can I add a loading animation to that function?" Iteration is key!