The Vibecoding Playbook: From Zero to Live with Your Personal Website

By Henry Huang @bravohenry / bravohenry.com

The Core Philosophy (The Vibe)

In an era where AI is deeply integrated into the development process, the amount of code we manually write is approaching zero. The paradigm shift introduced by Vibecoding is this: your role evolves from a traditional "Coder" to a "Creative Conductor." This means you don't need to master the syntax of every line of code. Instead, you must clearly articulate your design vision and aesthetic (your "Vibe") and use precise commands to direct an AI to bring it to life. This definitive playbook will guide you through this creative revolution, helping you compose an AI symphony that culminates in your live personal website.

Phase 1: Environment Setup

Every masterpiece requires the right stage. Before you begin creating, ensure your machine is configured with the following tools. This is the foundational architecture for your collaboration with AI.

1. AI-Native Code Editor

We recommend an editor with native AI integration, like Cursor or Trae. The fundamental difference from traditional editors is their ability to understand your design intent and interact deeply with your codebase. After installation, perform these basic setups: enable auto-completion, dock the AI chat window, and bind the "explain code" feature to a hotkey.

2. Package Manager (Homebrew for macOS/Linux)

Homebrew is the "missing package manager" for macOS (and Linux), allowing you to install and manage development tools with simple commands.

• Install Homebrew: Open your terminal and paste this command:

  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  Pro-Tip (macOS): Before installing, run xcode-select --install in your terminal. This installs essential command-line tools that Homebrew relies on, preventing common installation issues.

  Windows Users: You can use package managers like winget or scoop, or download Node.js directly from its official website.

3. Version Control (Git & GitHub)

This is your secure code repository in the cloud and the version control hub for your AI collaboration.

• Sign up for a GitHub Account: Go to github.com and register. The free personal account is perfect.

• Install GitHub Desktop: Download the graphical client from desktop.github.com and log in. Choose a local path for your repositories on a drive with at least 20GB of free space.

4. Runtime Environment (Node.js & npm)

This is the engine that brings your code to life locally.

• Install Node.js: Open your terminal and use Homebrew to install Node.js version 22.

  brew install node

• Verify Installation: Run node -v and npm -v. If they return version numbers like v22.x.x, you're all set.

• Let's Have Some Fun: Test your npm global installation with a classic.

  # 1. Install cowsay globally
  npm install -g cowsay
  
  # 2. Make the cow speak
  cowsay "Vibecoding Rocks!"

  If you see an ASCII cow, your environment is perfectly configured!

  For Future Projects: As you work on more projects, you might need different versions of Node.js. Tools like nvm (Node Version Manager) allow you to install and switch between multiple Node versions effortlessly. It's the industry-standard way to manage your Node environment.

5. Design Tool (Figma)

This is the bridge for communicating your visual language to the AI.

• Create an Account: Visit figma.com and sign up. The free plan is all you need.

• Install a Plugin: In the Figma Community, search for and install the html.to.design plugin. This is the key to the magic in Phase 3.

Phase 2: Project Initialization

Now, let's direct the AI to build our project's skeleton and handle all the initial configuration in one go. Open your AI-native editor, create a new project folder (e.g., "personal-website"), and paste the following prompt directly into the AI chat window.

AI Prompt: Project Initialization & Configuration

## Step 1

Please execute the following tasks in order to set up and configure my project:

1. Initialize a Vite + React project. In the current directory, run `npm create vite@latest . -- --template react`, and upon success, automatically run `npm install`.

2. Install and configure TailwindCSS. First, run `npm install tailwindcss @tailwindcss/vite`. Then, modify the `vite.config.js` file to import `tailwindcss from '@tailwindcss/vite'` and add it to the `plugins` array. Finally, clear all content from `src/index.css` and leave only this one line: `@import "tailwindcss";`. (Note: The base/components/utilities import is deprecated in Tailwind v4).

3. Add a `jsconfig.json` configuration file. After that, install the enhanced UI libraries by running `npm install framer-motion lucide-react clsx tailwind-variants`. These will be used for animations (framer-motion) and social icons (lucide-react).

4. Once all steps are complete, confirm that you are ready and await my next instruction

What to Expect: After you send this prompt, the AI will begin executing these commands in your editor's integrated terminal. You will see lines of text scrolling by as packages are downloaded and files are created or modified. This process might take a few minutes. Just sit back and watch the magic happen. If the AI gets stuck or reports an error, you can simply copy the failed command and run it manually in the terminal to see more details.

Phase 3: From Design to Code (The Creative Core)

This is where the magic happens. We will clone a live website to instantly capture a professional-grade design, distill its essence, and then command our AI to turn it into a reusable code library.

Step 1: Clone a Professional Website with html.to.design

Instead of designing from scratch, we will capture an existing, high-quality "Vibe."

1. Find a Target Website: Browse the web and find a site whose aesthetic and structure you admire. For this tutorial, we'll use retool.com. Copy its URL.

2. Perform the Clone: In a new, blank Figma file, open the html.to.design plugin. Paste the URL and click "Import." In about 30 seconds, the plugin will deconstruct the live website and rebuild it as a fully editable Figma file. You now have the complete visual blueprint of a professional site.

Step 2: Distill the Essence

Your goal is not to plagiarize, but to extract the underlying design system. This is a critical creative step.

The Goal of Distillation: Your objective is to create a clean "style guide" for the AI, not a messy webpage clone. By removing noise (like text and redundant elements), you force the AI to focus solely on generating the core design tokens (colors, fonts, spacing) and reusable components (buttons, cards). A cleaner input leads to a much cleaner output.

• Delete all text: Focus purely on the layout, spacing, and visual structure.

• Isolate core components: Keep only the essentials like buttons, cards, navbars, and input fields.

• Consolidate styles: If there are ten different button styles, find the two most important variations and delete the rest.

• Simplify the color palette: Reduce all colors to a core set: a base color, an accent color, and a few neutral shades.

Step 3: Connect AI to Your Figma Design

1. Get Your Figma API Key: In Figma, go to Settings > Personal access tokens. Create a new "Read-only" token named vibecoding-access. Copy the generated key immediately and save it.

2. Configure Your Editor: In your AI editor's settings, find the "Figma Integration" section. Paste your API key and test the connection.

Step 4: Command AI to Generate the Design System

Copy this prompt into your AI chat, replacing the placeholder with your Figma file's shareable link.

Crucial Link Settings: When you click "Share" in Figma, make sure the permission is set to "Anyone with the link can view." If it's restricted, the AI will fail.

## Step 2

1. Using the Figma connection, read all the details of the design file at maximum depth.
   [Replace this with your Figma design file link]

2. Based on the design file, write my design system using the following structure:
   design-system/
   ├── components/ (Button.jsx, Input.jsx, Card.jsx, etc.)
   ├── tokens/ (colors.js, spacing.js, typography.js)
   └── hooks/ (useMediaQuery.js)

3. When complete, create a preview page in `App.jsx` that displays all the generated components.

Acceptance Criteria: The code in `App.jsx` must be under 50 lines and remain extremely clean

Phase 4: Building the Website

With your design system as a set of LEGO bricks, it's time to direct the AI to assemble them into a complete website.

AI Prompt: Build the Website Pages

## Step 3

Now, create the template for my personal website using the file structure and component list below:

01▸ AvatarHero
02▸ BioHeader
03▸ SocialStrip
04▸ ResumeTimeline
05▸ PortfolioGallery
06▸ ContactSection
07▸ GlobalFooter

Requirements:
1. Strictly adhere to the styles defined in the `design-system`.
2. Implement each section as a separate, modular component file.
3. Use `framer-motion` to add basic entrance animations.
4. Use a light gray placeholder (`#f5f5f5`) for all images, but keep the `<img>` tags for easy replacement.
5. Ensure the design is fully responsive for mobile, tablet, and desktop.

Acceptance Criteria: The final `App.jsx` should be clean, containing only component imports and layout logic

After the AI finishes, run npm run dev to see a complete preview of your website at localhost:5173.

Personalizing Your Content - A Closer Look

• For Text: Open files like src/components/BioHeader.jsx. Look for placeholder text like "Your Name Here" or "A brief tagline." Replace these strings with your own content.

• For Images: Create a new folder at src/assets/images. Place your photos (e.g., avatar.jpg) inside. Then, in component files like src/components/AvatarHero.jsx, find the <img> tag. Change its src attribute to a direct path, like <img src="https://bravohenry.com/src/assets/images/avatar.jpg" alt="My Avatar" />.

Phase 5: Deployment & Beyond

Let's launch your site and set it up to update automatically.

1. Push Your Code to GitHub

Open GitHub Desktop. It will detect your project. Write a commit message like "website complete," click "Commit to main," and then "Publish repository."

2. Deploy with Cloudflare Pages

1. Get Started: Sign up for a Cloudflare account.

2. Connect Your Repo: Navigate to the Cloudflare dashboard > Workers & Pages > Create application > Pages > Connect to Git. Authorize GitHub and select your repository.

3. Configure Build Settings:

   • Framework preset: Vite

   • Build command: npm run build

   • Build output directory: dist

4. Deploy: Click "Save and Deploy."

3. The Magic of Automatic Updates (CI/CD)

Here's the best part: from now on, whenever you make changes to your code and push them to the main branch on GitHub, Cloudflare Pages will automatically detect the changes, rebuild your project, and deploy the new version. Your workflow is now: Code -> Commit -> Push -> Live.

4. Using Your Own Domain

In your Cloudflare Pages project, go to the "Custom domains" tab and follow the instructions. It typically involves adding a CNAME record in your domain registrar's settings, a process Cloudflare guides you through.

Epilogue: Beyond the Playbook

Congratulations! You've completed the entire journey from a design concept to a live, auto-updating website. By mastering this "Creative Conductor" model, you can apply it to:

• Rapidly validating product prototypes

• Building high-converting marketing landing pages

• Creating documentation sites for open-source projects

• Showcasing your work on a portfolio platform

Remember, in the age of AI collaboration, your true competitive advantage isn't the ability to write code, but the art of clearly expressing ideas and precisely defining requirements—the art of the conductor.

What will your next project be? Open Figma and start composing.

If this manual is helpful to you, please follow me in Linkedin and X.