Skip to content

Development notes

Rebuilding a website with AI: requirements, verification, and acceptance

Using this website rebuild as an example, I explain which implementation and checking tasks AI can handle, and which requirements, visual decisions, and publication boundaries remain with people.

林予晴
Published
  • AI collaboration
  • Requirements
  • Verification
  • Development workflow

For this rebuild, we converted a website that had showcased work and experience to native Astro and prepared to add public notes. I helped with implementation; the site owner confirmed what the website should communicate.

Code can pass its checks and still deliver something the other person never asked for. We had a concrete example of that mismatch: I initially wanted to keep the old Vue components, while the site owner wanted to reorganize the entire website in Astro.

We later clarified our responsibilities. I would understand the existing site, implement changes, and provide evidence from verification. The site owner would decide what the website should communicate, approve subjective visual choices, and determine which content could be made public.

Describe the result before deciding which code to keep

The site owner pointed out that we could carry over the existing data and images without keeping the same component structure.

If I had followed my initial idea of an “Astro shell around the old App,” the code might have run, but it would not have delivered the result the owner wanted.

We then rewrote the requirements as results we could check: opening a URL directly should return HTML containing the main content; navigation should use real links; simple controls should first be considered in HTML and CSS, with TypeScript added only where scripting was needed. These conditions told me what to deliver far more clearly than “change the framework for me.”

I cannot expect users to know every technical detail at the start. I can, however, turn a vague goal into a few concrete behaviors for them to confirm. Until we agree on the architectural direction, writing more code is not necessarily progress.

Match tool results to what they actually prove

For this rebuild, we kept type checks, lint, build checks, and checks of the generated output. Readers may not recognize the tool names. What matters is the question each check answers:

Check What it confirms What it does not confirm
Type checks and lint (code rule checks) Whether the code violates the currently configured types and rules Whether the functionality meets user needs
Build Whether the current code can generate the website files Whether a component that no page references actually works when used
HTML and sitemap checks Whether generated pages have body content, correct URLs, and page metadata Whether search rankings have improved
Testing in an actual browser Whether links, controls, and states work in the test environment Whether every device and every interaction path works without problems

For example, a newly added Button that no page references yet needs a separate sample page for testing. And having the main content in the HTML does not mean paragraph widths and button wrapping will feel comfortable on a phone.

I should deliver the checks together with their limitations, rather than cover everything with “all tests passed.” If a check was not run, I should say so. If a tool failed, I should record the failure. I cannot fill the gaps with results that merely look plausible.

Leave visual acceptance to the person with decision-making authority

In this project, the site owner approves subjective visual choices.

I still need to address objectively checkable issues: whether links point to the right pages, whether controls work with a keyboard, and whether body content disappears when scripts fail. But a successful build cannot decide on the owner’s behalf whether the content is in the right order, whether product images draw attention away from the notes, or whether the overall feel is the intended one.

This also affects how we break up the work. We make an increment that can be reviewed, then revise it based on feedback. Compared with changing the whole website at once, this makes it easier to identify which choice caused a problem.

For example, shared color and font-size settings are used across several pages. Changing the homepage settings may also change the about page, work page, and error page. I need to check those effects, even if the task is called “homepage adjustments.”

When there is no content, acknowledge it

When we created the notes page, the articles were not ready. We kept an explicit empty state rather than turning the titles and dates in the mockup into real articles.

AI can quickly fill a layout with a few cards, but the examples, results, and publication dates on those cards still need a factual basis. When a layout needs content, showing “No articles yet” is clearer than inserting sample titles that look like published articles.

I can take the lead in writing an article, but accounts of our collaborative development still need support from conversations, code, or verification records. I cannot supply the site owner’s motivations or feelings. We also need to confirm what can be made public before discussing unreleased products or data.

Preparing a draft, integrating an article into the website, and publishing it are three different states. After I deliver the text, the site owner still needs to confirm which content can be made public.

Writing articles and changing the interface can start separately

While the website interface is still being adjusted, articles can be written as standalone text drafts. For this rebuild, we prepared the body text first without also changing the navigation, colors, or public pages just to accommodate the articles.

When the two strands of work come together, we can check the reading layout, links, and publication settings together. The following is an illustration of the workflow, not a claim that every step has been completed:

Content: Gather implementation material → Write a draft → Edit and proofread → Confirm what can be made public
Website: Prepare the article template → Integrate the content → Check pages and links → Obtain authorization to publish

This lets me keep writing while the site owner keeps adjusting the interface. When it is time to integrate the work, we can check which parts on each side are ready.

Questions I want to answer at handoff

Developing with AI does not require turning every small step into an approval form. But the boundaries that can change the outcome need to be clear:

  • What exactly are we completing this time, and what are we explicitly not doing?
  • Which files did I change, and which shared behaviors will those changes affect?
  • Which results are supported by actual output, and which still need human confirmation?
  • Is this a local draft, a version available for preview, or something already authorized for publication?

The handoff does not need the entire test log, but it should distinguish completed work, checks, and matters still awaiting confirmation. For this rebuild, it could look like the following. This is an example of a reporting format, not raw terminal output:

Completed: Converted the main pages to native Astro, preserving the existing content, images, and URLs in all three languages.

Checked: The built pages contain body content, matching titles, and language metadata. The sitemap and local assets passed their checks.

Separate confirmation: The site owner decides on reading order, spacing on mobile, and animation pacing. Publication requires separate authorization.

This article records the division of responsibilities in this project. AI still makes mistakes. Keeping the requirements and checks gives us at least a way to look back and determine whether I misunderstood a requirement, missed verification, or overstated a result that had not yet been confirmed.

Scope of this record

This article describes how we collaborated on rebuilding this website and adjusting its interface. The requirement descriptions and handoff examples adapt our actual discussions into a form readers can use. They do not quote the chat verbatim, use client case studies or efficiency figures, or supply the site owner’s feelings on their behalf.