How I Built a Site with Vibe Coding: The Full Process from Design to Launch
About This Article
I am organizing, stage by stage, the experience of building a website from scratch with AI. The goal is to help readers without technical backgrounds get a concrete picture of what it means to build a site with AI, through specific situations and decisions.
Stage 1: Deciding Purpose and Structure
The first thing I did was organize the purpose of the site and the pages it would need. This stage was not delegated to AI — I worked through it myself. Unless I could answer “what is this site for,” “who is it aimed at,” and “what pages are needed,” my instructions to the AI would remain vague.
Once the structure was decided, I asked the AI, “I want to build a site with this structure. What folder layout would be appropriate?” The AI suggested several structural patterns. I chose one, but I chose it after understanding the reasoning behind the proposal. Judging whether the AI’s reasoning aligned with the purpose of my site was my responsibility.
Stage 2: Selecting the Framework and Hosting Service
Next, I chose the technical framework for running the site and the service for publishing it on the internet.
I told the AI, “Please suggest frameworks suitable for a multilingual site that will host learning content,” and received multiple options with explanations of each. I read those explanations and made a judgment, but the final decision of “which one to choose” was mine. Even without understanding the technical details, I could choose based on “what matters most for my site.”
Stage 3: Deciding the Design Direction
For the design, I asked the AI to suggest three directions. It described the characteristics of each in words — “simple and easy to read,” “information visually organized,” “a calm color palette suited to a technical site” — and I made the selection myself.
For specific color values, font sizes, and spacing, I asked the AI to make proposals, then confirmed the results in a browser and adjusted as needed. I repeated instructions like “make the text slightly larger” and “set this section’s background color to white,” gradually moving toward the intended result.
Stage 4: Adding Content and Writing Configuration Files
After the site’s skeleton was in place, I added content and handled various configuration tasks. The AI wrote the configuration files (site title, language settings, navigation structure, and so on), but I confirmed the meaning of what was written.
Applying settings without understanding them means that when a problem arises later, I have no way to investigate the cause. I followed a process of looking at each configuration file the AI wrote, asking “what does this line do,” receiving an explanation, and then applying it.
Stage 5: Publishing and Verifying
The AI guided me through the publishing setup, but I opened the live URL in a browser and checked the display myself. I did not skip that verification on the assumption that “the AI set it up, so it must be working.”
After publishing, I found layout issues on a smartphone and submitted a correction request. Verifying the result is always something I do with my own eyes.
Reflection
Looking back at the whole process, the work I delegated to the AI was “concrete implementation (writing code)” and “presenting multiple options.” The work I handled myself was “setting the goal,” “making choices between options,” “verifying the results,” and “composing the next instruction.”
The AI implements what it is instructed to do, but “what to build” and “whether what was built matches the intent” consistently needed to remain in my hands.