What is vibe coding?

Vibe coding means using generative AI tools to write code for you — especially when you don't have a coding background. You describe what you want to build, the AI generates the code, and you iterate from there until you have something close to what you envisioned.

You don't need to master a programming language. But you will need to develop your skills in prompting AI tools, evaluating their output, and working through an iterative process.

Vibe coding isn't meant to replace learning how to code. But it does lower the barrier to creating web-based content and tools for people without that background. With minimal experience in HTML and CSS, I've built websites, interactive tools, and open educational resources this way.

The most important thing: stay in the driver's seat. Evaluate what the AI produces. Question things that don't seem right. Build in accessibility and strong design from the beginning — not as an afterthought. AI can make things faster; that doesn't automatically make them better.

This guide is intended to model that kind of thoughtful, intentional AI use. Everything here reflects how I actually work — including the parts that are still evolving.

My Toolkit

You don't need all of these to get started. A generative AI tool and a GitHub account are enough to build and publish something. Everything else builds from there.

Start here

A Word Processor

Use whatever you have — Word, Google Docs, anything. Before you open an AI tool, draft your prompt and your content here first. This step makes a real difference in quality.

Start here

Claude (Generative AI)

My preferred AI tool for this work right now. The free version handles most projects well. Other tools can generate code, but Claude has been the most reliable and accurate in my experience.

Start here

GitHub

Where your code lives and where it gets published to the web — for free — using GitHub Pages. No server required. This is where your work becomes a real, shareable URL.

Worth learning

Visual Studio Code

A free code editor that lets you work locally, preview your site before publishing, and push to GitHub when you're ready. Not required to start, but worth picking up if you plan to build more than once. Plenty of good guides exist online.

How I Do It

This is my current workflow. It has changed a lot — I used to just open a generative AI tool and start typing. Being more intentional upfront has made a real difference in quality and in how many back-and-forth rounds I need.

  1. Before you open any AI tool

    Draft your prompt and your content separately

    Open a document and write two things: a description of what you want to build, and the actual content you want in it. I keep these separate intentionally. Sometimes I don't want to hand my content to an AI tool. Sometimes the content doesn't exist yet.

    If privacy isn't a concern and you're ready to put everything together, you can combine them. Some AI tools use your inputs to train their models — check the terms of the tool you're using if that matters for your context.

    If you just want to see how something looks and don't have content yet, skip the content draft and just write your prompt.

  2. Optional but useful

    Sketch it out — literally

    If you have a visual in mind, grab a piece of paper and draw it. Where should the navigation go? What sections do you want? A rough sketch helps you find language to add to your prompt. And if your sketch isn't the most practical layout, the AI can offer design input you might not have considered.

  3. The most important step

    Write a thoughtful prompt

    A good prompt describes: what you're building, who it's for, what content to include, any design ideas you have, and an explicit ask for input you want the AI to provide. Most importantly: include accessibility, UDL principles, and design considerations from the start. It's much easier to build these in than to retrofit them afterward.

    You don't have to know exactly how things should look. Ask the AI what layout, color scheme, or interaction patterns would work best for your goal.

  4. Getting the code

    Paste your prompt and review what comes back

    Paste your prompt into Claude (or your tool of choice). It will generate code — typically HTML, CSS, and JavaScript in a single file. Depending on the tool, you may see a live preview right in the chat.

    Read through what it produced before moving on. Does it match what you asked for? Is anything obviously missing or off?

  5. See it for real

    Preview the code

    Built-in previews in the AI chat are a good start. For a fuller view, you have two options: paste the code into Visual Studio Code and use its live preview, or paste it directly into GitHub to view it there. Seeing the code rendered in context helps you catch layout issues, accessibility problems, and places where the design doesn't match your vision.

  6. Where most of the work happens

    Iterate

    You will have ideas for changes. You will notice things that are wrong. This is completely normal — it's the process, not a failure. Go back to your AI tool, describe what you want to change or fix, and paste in your current code. Something like: "Here's what I have. Here's what I want to change." Repeat as many times as needed.

    Evaluate as you go. Check color contrast and keyboard navigation. Check that the design is doing what you intended. Check that content is accurate. Don't wait until the end to assess for accessibility.

  7. Publishing

    Get it into GitHub

    Create a new repository on GitHub and upload your file(s). If you're new to GitHub, include that in your AI prompt — ask for step-by-step instructions for creating a repository and uploading your code. The AI can walk you through it, and there are also plenty of guides online.

    A note on editing: you can edit directly in GitHub's browser interface to start, which is simpler. VS Code lets you work offline, preview locally, and only publish when you're ready. I use Claude to walk me through pushing from VS Code to GitHub when I need it — I recommend doing the same to learn this process.

  8. Go live

    Enable GitHub Pages

    In your repository, go to Settings → Pages. Set the source branch (usually main). Save. GitHub will publish your site at a URL like yourusername.github.io/repo-name. It takes a few minutes — wait, then refresh.

    If you have a custom domain, you can point it to GitHub Pages in the same settings screen. (I use Porkbun for mine.)

  9. The whole point

    Share it

    Post the link. Add it to your website. Share it with colleagues. Tag your tools as open access and share them with people who would benefit from using or remixing them. That's what this is for.

Writing a Good Prompt

This gets better with practice. The best analogy I know: a teacher asks elementary students to write instructions for making a peanut butter sandwich. They write something like "put the peanut butter on the bread," and when the teacher follows those instructions exactly, it goes sideways. The more explicit and specific you can be, the closer the output will be to what you actually imagined.

  • Be specific about what you're building. Not just "a website" but "a single-page interactive tool for undergraduate students to evaluate sources using the SIFT method, with a form input and structured results output."

  • Describe your audience. Who will use this? What is their experience level? What should they be able to do when they're done?

  • Include accessibility from the start. Mention UDL principles, WCAG guidelines, color contrast, keyboard navigability, and screen reader compatibility. Don't wait until the end.

  • Ask for design input. Describe what you're going for and ask what layout, color scheme, or interaction pattern would work best for your specific goal.

  • Expect to iterate. The first output will rarely be perfect — and that's okay. That's the process, not a failure.

  • Build from what you have. Once you have code, paste it back in with your next ask: "Here's my current code. Here's what I want to change."

When It Breaks

Things will go wrong. Here's what I actually do, depending on what it is and what time of day it is.

  • Go back to the AI tool. Describe what's happening versus what you want to be happening. Paste in the broken code. Most of the time, this resolves it.

  • Google the error message exactly. Copy it and search. Stack Overflow has answered more questions for me than I can count.

  • Check W3Schools for HTML, CSS, and JavaScript reference when you need to understand what a piece of code is actually doing.

  • Ask someone who codes. This is where I've learned the most. There is no substitute for human community. Find the people who are doing this and build relationships with them. Follow people who share their process openly. Show up with curiosity.

  • Walk away. If it's late and it's not working, close the laptop. Things that seem impossible at 1am are often obvious the next morning.

  • Look at what inspires you. Browse LinkedIn, look at the tools people you admire are building, and remind yourself what's possible. Sometimes that's all you need to catch a second wind.

Examples in Practice

Here are three things built with this exact process: one collaborative tool, one instructional tool, and one is the page you're reading right now.

  • Bloom's StAIrcase

    An interactive tool for faculty designing AI-integrated course activities using Bloom's Taxonomy, co-created with Brigette Meskell.

  • 2

    Critical Thinking Map

    A visual guide to navigating critical evaluation in AI-assisted research for an argument paper.

  • This guide

    This page was vibe coded. Built with Claude, hosted on GitHub Pages, and printable to PDF via your browser.

Where to Go Next

The best way to get better at this is to build something. It doesn't have to be useful. It doesn't have to be perfect. The goal is to get comfortable with the process and build your confidence in the loop.

This Is Just the Beginning

I'll update this guide as my process evolves. The tools change, my workflow changes, and I keep learning — that's kind of the point.

If you have questions or want to share something you built, find me online. I genuinely want to see what you make.