Become a Vibe Coder! 🚀

Go from zero to published website in less than an hour using professional tools and AI assistance

⏱️ Total Time: ~ 30 minutes

Your Digital Debut: A Fun Webpage to Introduce Yourself!

Your very first project is to create a unique, static webpage that introduces who you are and why you're excited about vibe coding to our community.

This is your chance to get creative, express yourself, and see your work live! Once completed, we'll host it in our exclusive gallery for everyone to see.

See What Others Have Created

Your Vibe Coding Journey

Welcome & Setup

Get your tools ready: VS Code, Cline, and your AI key.

PRD Creation

Define your project's vision with a Product Requirements Document.

AI-Assisted Dev

Build and iterate on your website with Cline's creative power.

Community Sharing

Share your masterpiece and inspire the Vibe Coders community!

Why Vibe Coding is Your Creative Superpower

Unlike traditional visual builders or "loveable" tools, Vibe Coding with Cline empowers you with true creative freedom and builds real development skills.

Unleashed Creativity

Imagine anything, build anything. Cline helps you bring unique ideas to life without being limited by templates or pre-built components.

Real-World Skills

You're learning with professional tools like VS Code and AI models, gaining valuable, transferable skills that go beyond simple drag-and-drop.

Fun & Empowering

Experience the joy of creation and see immediate results. This is a fun, guided way to develop your creative and technical abilities.

1

Welcome & Setup (10 minutes)

Download VS Code

VS Code is the professional editor you'll use. It's free, powerful, and designed for everyone, even beginners!

What you'll do:

  1. Go to code.visualstudio.com
  2. Click the prominent "Download for Windows/Mac/Linux" button.
  3. Run the downloaded installer. You can generally accept the default options.
  4. Once installed, open VS Code. You're ready for your first professional tool!

💡 Don't worry! VS Code might look complex at first, but Cline will guide you through it. You'll quickly feel comfortable creating amazing things!

Install Cline Extension

Cline is your personal AI coding assistant, integrated directly into VS Code. It helps you write code, explains concepts, and guides you step-by-step.

What you'll do:

  1. In VS Code, locate and click the Extensions icon (it looks like four squares) on the left sidebar.
  2. In the search box that appears, type "Cline" and press Enter.
  3. Find the official "Cline" extension and click the "Install" button.
  4. After installation, a new robot icon will appear on your left sidebar – that's Cline! Click it to open the chat panel.

✨ Your patient teacher! Cline is designed to make coding accessible. It explains every action and helps you learn by doing.

Get Your Gemini API Key

This API key connects Cline to Google's powerful Gemini AI, giving your assistant the intelligence to help you create amazing websites.

What you'll do:

  1. Go to Google AI Studio in your web browser.
  2. Sign in with your Google account if prompted.
  3. Click the "Create API Key" button.
  4. Copy the generated key. Then, in VS Code, paste this key into Cline's settings (usually accessible via the gear icon in Cline's chat panel or VS Code settings).

🔒 It's free and secure! Google provides generous free usage, and your key is private to your Cline setup.

2

PRD Creation Phase (5 minutes)

Learn to think like a professional product manager! You'll define your project's vision and requirements using an external AI, then bring it into your project.

What you'll do:

  1. Open one of these external AI tools (each offers generous free usage):
    • ChatGPT - Great for creative brainstorming
    • Perplexity - Excellent for research-based planning
    • Claude - Strong at detailed documentation

    💡 Pro tip: Using different LLMs for different tasks is a common practice when collaborating with AI. Each has unique strengths - experiment to find what works best for you!

  2. Start an interactive conversation about your project. Try this prompt: "I want to create a personal introduction website for a coding community. Can you help me create a PRD by asking me questions about my vision, style preferences, and what's important to me? Please use Socratic questioning to help me think through the details."

    🤔 Let the AI ask YOU questions! Getting the LLM to ask you questions is a powerful way to ensure alignment and understand what the AI is thinking. Answer thoughtfully - this conversation will shape your entire project!

  3. Review and refine the generated PRD content.
  4. Save the PRD content for reference when building your project with Cline.

📝 Your project's blueprint! A well-defined PRD is crucial for guiding your AI assistant and ensuring your project stays on track.

3

AI-Assisted Development (15 minutes)

Now for the fun part! Use your PRD to guide Cline in building your website. Experience real-time iteration and see your ideas come to life.

What you'll do:

  1. Start your conversation with Cline by sharing your PRD and project request together:
    "Here's my PRD for this project: [paste your PRD content here] Based on this PRD, help me create a fun and creative static webpage that introduces who I am and why I'm interested in vibe coding. This will be my first project to share with the community. Please create the initial files and structure."

    📄 Context is key! Providing your PRD gives Cline the full picture of what you want to build, ensuring better results.

  2. Cline will generate the initial files for your website (e.g., `index.html`, `style.css`). You'll see them appear in VS Code's file explorer.

    🔍 See it live! Install the Live Server extension in VS Code. Right-click your index.html file and select "Open with Live Server" to see your site update in real-time as you make changes!

  3. Take a screenshot of your webpage and paste it into Cline's chat. Then provide specific feedback: "I like the layout but can you change the background to a gradient? Also, make the text larger and add more personality to the introduction."
  4. Continue iterating - share more screenshots, request changes, and watch Cline refine your site. Try things like: "Add a skills section," "Make it more colorful," or "Add some animation."

🎨 Be creative! This is where your vision meets Cline's power. Iterate, experiment, and watch your unique introduction page evolve!

4

Share Your Creation (10 minutes)

Time to show the world what you've created and join the Vibe Coders Wall! Learn professional deployment with GitHub Pages.

Deploy to GitHub Pages

Learn professional deployment skills and get your own live website that you own forever!

What you'll do:

  1. Ask Cline: "Help me set up GitHub MCP so I can deploy this to GitHub Pages"
  2. Follow Cline's guidance to connect your GitHub account
  3. Ask Cline: "Create a GitHub repository and deploy my site to GitHub Pages"
  4. Get your live site URL (like: yourname.github.io/my-intro)

🎓 You'll Learn: GitHub, version control, professional deployment, and own a real website!

Share Your URL in Discord Introductions Channel

Show off your amazing creation to the community and get featured in our gallery!

Join Discord & ShareSee What Others Created

🎉 You did it! Your unique website will be live on the internet for everyone to see and admire!