<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="/rss.xsl" type="text/xsl"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Ayush Kapale: blog</title><description>Ayush Kapale is a product manager and mechanical engineer who writes about telecom, semiconductors, AI, mobility and the smart cities they add up to.</description><link>https://ayushkapale.com</link><language>en</language><item><title>The Semiconductor Value Chain, Mapped</title><link>https://ayushkapale.com/blog/from-sand-to-system</link><guid isPermaLink="true">https://ayushkapale.com/blog/from-sand-to-system</guid><description>How raw materials become working chips: follow the journey, explore each step, and meet the companies behind it.</description><pubDate>Sat, 10 Oct 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;A chip inside your phone starts a long way from your pocket. Minerals become purified material, then wafers, then tiny circuits. Testing, packaging and assembly turn those circuits into something you can use.&lt;/p&gt;
&lt;p&gt;There is a second path, too: someone has to design what the chip will do. The map below brings both paths together. Start with the whole journey, then open only the parts you want to explore.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://ayushkapale.com/blog/from-sand-to-system&quot;&gt;Read on ayushkapale.com&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Semiconductors</category></item><item><title>How to build a website using AI in less than a day</title><link>https://ayushkapale.com/blog/build-a-website-with-ai-in-a-day</link><guid isPermaLink="true">https://blog.ayushkapale.com/blog/build-a-website-with-ai-in-a-day</guid><description>My PM approach to building a website with AI: start with a clear brief, keep one design language, build a small first version and test it before sharing.</description><pubDate>Sat, 03 Oct 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;“Help me build a website” is an easy prompt to write. It is also a good way to get a page you spend the rest of the day fixing.&lt;/p&gt;
&lt;p&gt;My blunt opinion: vague prompts often produce garbage. The copy could belong to anyone. The design changes from one section to the next. The feature your audience needs is missing.&lt;/p&gt;
&lt;p&gt;Across the websites I have built, I keep coming back to the same questions: why am I building this, who is it for, and what should someone be able to do there?&lt;/p&gt;
&lt;p&gt;With those answers and a small scope, a useful first version in less than a day is a reasonable goal. Think of a blog, a landing page or a simple business site. Accounts, private data and custom payment flows need more work. Have your copy and images ready, too; AI cannot fill missing business decisions reliably.&lt;/p&gt;
&lt;h2 id=&quot;1-get-clarity-before-you-ask-ai-to-build&quot;&gt;1. Get clarity before you ask AI to build&lt;/h2&gt;
&lt;p&gt;Write the answers in Notion, Excel or a plain text file. Keep them close while building.&lt;/p&gt;
&lt;p&gt;Here is a hypothetical example: a website for a weekend pottery workshop. It has a clear audience and a specific action, so it is easier to decide what belongs in the first version. Replace these answers with your own.&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Question&lt;/th&gt;
&lt;th&gt;Workshop example&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Why does the site exist?&lt;/td&gt;
&lt;td&gt;Help people understand the workshop and book a place&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Who is it for?&lt;/td&gt;
&lt;td&gt;Beginners looking for a local weekend activity&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What should a visitor do?&lt;/td&gt;
&lt;td&gt;Choose a session and open its hosted booking page&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What must be included?&lt;/td&gt;
&lt;td&gt;Date, price, location, what is included, photos, FAQs and a booking link&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What can wait?&lt;/td&gt;
&lt;td&gt;Member accounts, a custom booking system and a large gallery&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What content is needed?&lt;/td&gt;
&lt;td&gt;Confirmed session details, original photos and booking terms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What should it feel like?&lt;/td&gt;
&lt;td&gt;Warm and simple, with readable text and one clear primary action&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What is the budget?&lt;/td&gt;
&lt;td&gt;A fixed hosting/tool limit, plus domain and booking-service costs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What proves it works?&lt;/td&gt;
&lt;td&gt;A visitor can find the details and reach the correct session’s booking page on a phone&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;If your answers are vague, ask AI to interview you:&lt;/p&gt;
&lt;pre class=&quot;astro-code astro-code-themes github-light github-dark&quot; style=&quot;--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;text&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;I want to build [website]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;for [audience].&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Interview me before suggesting tools&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;or writing code. Ask one question at&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;a time about purpose, content,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;features, design, budget and&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;who will maintain it.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Challenge vague answers. Finish with&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;a brief and a small MVP.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Flag unanswered questions instead of&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;inventing answers.&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I also like asking AI to roast the plan: “Which features are unnecessary? What have I assumed about the audience? What would confuse a visitor?”&lt;/p&gt;
&lt;p&gt;Use the criticism to improve the brief. Then show it to someone who fits the audience if you can. Their reaction is more useful than the agent agreeing with everything.&lt;/p&gt;
&lt;h2 id=&quot;2-decide-the-domain-hosting-and-type-of-website&quot;&gt;2. Decide the domain, hosting and type of website&lt;/h2&gt;
&lt;p&gt;A domain is the address. Hosting is where the site runs. DNS, the Domain Name System, connects the two. You can buy them from different providers.&lt;/p&gt;
&lt;p&gt;Use the domain you already own, or start on your host’s temporary address. Choosing a name should not hold up the first version.&lt;/p&gt;
&lt;p&gt;My preference is Cloudflare. One detail to check if you use its Registrar: &lt;a href=&quot;https://developers.cloudflare.com/registrar/get-started/transfer-domain-to-cloudflare/&quot;&gt;the domain must use Cloudflare DNS&lt;/a&gt;, even if you host the website elsewhere.&lt;/p&gt;
&lt;p&gt;The bigger decision is whether you need a backend.&lt;/p&gt;
&lt;p&gt;A static site serves pages prepared ahead of time. It often suits a blog or an information site. You can still add menus and other browser interactions, or link to an external booking service. For the workshop example, I would start with a static information page and a hosted booking link. The booking service handles availability and payments; those tasks still need checking.&lt;/p&gt;
&lt;p&gt;If visitors need accounts, private content or saved submissions, decide where that data lives and who can access it. That backend can be your own or a service you connect to.&lt;/p&gt;
&lt;p&gt;For hosting, I would compare:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Cloudflare for my preferred code-based setup. &lt;a href=&quot;https://developers.cloudflare.com/workers/static-assets/&quot;&gt;Workers can serve static assets alongside server logic&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Vercel for a code-based site or app. Its &lt;a href=&quot;https://vercel.com/docs/plans/hobby&quot;&gt;Hobby plan is for personal, non-commercial use&lt;/a&gt;, so check the plan for a business site.&lt;/li&gt;
&lt;li&gt;Hostinger if a bundled builder and hosting setup suits you. Check renewal costs and export limits for the specific product you choose.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Count domain renewal, hosting, AI usage and any booking, database or email service in the budget. Keep private API keys out of browser code. If accounts are part of the scope, test that users can only access their own data. A generated login screen is not enough.&lt;/p&gt;
&lt;h2 id=&quot;3-one-website-one-design-language&quot;&gt;3. One website, one design language&lt;/h2&gt;
&lt;p&gt;Choose the colours and typography before asking for pages. Also define buttons, spacing and navigation. Otherwise, each prompt can produce another style.&lt;/p&gt;
&lt;p&gt;A short guide is enough to start:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Give colours roles: background, text, accent, border and error.&lt;/li&gt;
&lt;li&gt;Choose a readable font and consistent heading sizes.&lt;/li&gt;
&lt;li&gt;Reuse spacing, corner styles and shared components.&lt;/li&gt;
&lt;li&gt;Define button, link and keyboard focus states.&lt;/li&gt;
&lt;li&gt;Explain how the layout adapts to a phone.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Save it as &lt;code&gt;docs/design-language.md&lt;/code&gt;. For example: every booking button uses the same colour and wording; workshop cards share one layout; secondary actions look less prominent.&lt;/p&gt;
&lt;p&gt;Use reference websites to explain what you like about their type, spacing or navigation. Keep your own content and identity. “Make it modern” leaves too much for the agent to guess.&lt;/p&gt;
&lt;p&gt;Check contrast, form labels and whether controls are easy to identify. The &lt;a href=&quot;https://www.w3.org/WAI/tips/designing/&quot;&gt;W3C accessibility checklist&lt;/a&gt; is useful when reviewing the result.&lt;/p&gt;
&lt;h2 id=&quot;4-why-i-use-astro-for-my-personal-blog&quot;&gt;4. Why I use Astro for my personal blog&lt;/h2&gt;
&lt;p&gt;My personal blog is built with Astro. I like how it works, and it suits a website where reading is the main activity.&lt;/p&gt;
&lt;p&gt;Astro generates static pages by default and also supports &lt;a href=&quot;https://docs.astro.build/en/guides/on-demand-rendering/&quot;&gt;rendering selected routes on demand&lt;/a&gt;. I can start with a content site and add server features if I need them.&lt;/p&gt;
&lt;p&gt;That is my choice for this blog. For your site, choose a framework or builder that fits the job and that you can keep working with. You do not need to evaluate every framework before making a simple page.&lt;/p&gt;
&lt;h2 id=&quot;5-think-like-a-pm-and-define-the-mvp&quot;&gt;5. Think like a PM and define the MVP&lt;/h2&gt;
&lt;p&gt;The minimum viable product, or MVP, should complete the main visitor journey.&lt;/p&gt;
&lt;p&gt;For the workshop site, that means understanding the session, finding its date and price, and reaching the correct booking page. A single page could do all of that. Member profiles and a custom booking system can wait.&lt;/p&gt;
&lt;p&gt;Turn each requirement into a check. “A good booking experience” is vague. “The booking button opens the right session, and a full session is clearly marked” gives you something to test.&lt;/p&gt;
&lt;p&gt;Keep a separate list for later ideas. When the agent suggests a feature, ask whether the visitor needs it to complete the main task. If it introduces accounts, new data or another integration, revisit the scope before adding it.&lt;/p&gt;
&lt;h2 id=&quot;6-pick-the-path-that-gives-you-the-control-you-need&quot;&gt;6. Pick the path that gives you the control you need&lt;/h2&gt;
&lt;p&gt;I used to start with tools like Lovable. I still think an AI builder is useful when you want the environment managed for you and prefer to work mainly through prompts. You will still need to check the copy, interactions and ongoing costs.&lt;/p&gt;
&lt;p&gt;My preference for more control is a Git repository, local code in VS Code, and an agent such as OpenCode or Codex. I can inspect the files, review changes and keep improving the site. The tradeoff is setup and maintenance: installation problems or unfamiliar code can take time.&lt;/p&gt;
&lt;p&gt;Code access varies between builders. &lt;a href=&quot;https://docs.lovable.dev/integrations/github&quot;&gt;Lovable supports two-way GitHub sync&lt;/a&gt; and working with the code outside the builder. &lt;a href=&quot;https://www.hostinger.com/support/6572573-hostinger-ai-builder-manual-mode-how-to-export-content-to-wordpress/&quot;&gt;Hostinger’s manual-mode WordPress export&lt;/a&gt; leaves out layout, styles and several features. These are different export workflows; check the exact product you intend to use.&lt;/p&gt;
&lt;h3 id=&quot;start-with-one-working-page&quot;&gt;Start with one working page&lt;/h3&gt;
&lt;p&gt;For either path, give the tool your brief, design rules and MVP. Build the main journey with real content, preview it, then request specific changes.&lt;/p&gt;
&lt;p&gt;For the repository path:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Create the project and a Git repository. Git records versions; GitHub hosts a shared copy.&lt;/li&gt;
&lt;li&gt;Follow the framework’s setup guide and run the starter locally. Astro’s guide lists the required Node.js version and setup steps in the sources below.&lt;/li&gt;
&lt;li&gt;Open the folder in VS Code. Follow the linked setup guide for &lt;a href=&quot;https://opencode.ai/docs/ide/&quot;&gt;OpenCode&lt;/a&gt; or &lt;a href=&quot;https://learn.chatgpt.com/docs/codex/ide/&quot;&gt;Codex&lt;/a&gt; and sign in as required.&lt;/li&gt;
&lt;li&gt;Save the purpose and audience in &lt;code&gt;docs/brief.md&lt;/code&gt;, the design rules in &lt;code&gt;docs/design-language.md&lt;/code&gt;, and the must-have features and checks in &lt;code&gt;docs/mvp.md&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Build one complete journey. Review the changed files and save a working version before the next change.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;For the workshop example, my build request would be:&lt;/p&gt;
&lt;pre class=&quot;astro-code astro-code-themes github-light github-dark&quot; style=&quot;--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;text&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Read docs/brief.md,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;docs/design-language.md&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;and docs/mvp.md.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Use the existing stack. Build the&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;workshop information page with the&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;supplied content and hosted&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;booking link.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Flag missing details. Reuse the design&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;rules and components. Make the journey&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;usable on a phone and with a keyboard.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Explain the plan before editing.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Afterward, report the checks you ran,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;any failures and anything you could&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;not verify. Keep features from the&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;later list out of this change.&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;When the result is wrong, describe the observable problem: “The price is hard to find on a phone” is more useful than “Make it better.” If you cannot understand a change, ask the agent to explain it before accepting it.&lt;/p&gt;
&lt;h2 id=&quot;7-connect-the-pipeline-when-it-helps&quot;&gt;7. Connect the pipeline when it helps&lt;/h2&gt;
&lt;p&gt;The loop I want is a small change, local preview, checks, a saved version and deployment.&lt;/p&gt;
&lt;p&gt;With GitHub, a pull request lets me review a set of changes before merging them into the main branch. &lt;a href=&quot;https://developers.cloudflare.com/workers/ci-cd/builds/git-integration/github-integration/&quot;&gt;Cloudflare Workers Builds can connect to GitHub&lt;/a&gt; for automatic builds and deployment once configured.&lt;/p&gt;
&lt;p&gt;For a static Astro site on Cloudflare, the deployment guide in the sources explains how to serve the generated files. Confirm your project’s build command, output folder and production branch. Check the temporary live address before connecting the domain.&lt;/p&gt;
&lt;p&gt;MCP, or Model Context Protocol, is an optional connection that lets an agent use another service’s tools. One thing I like about Cloudflare is its &lt;a href=&quot;https://github.com/cloudflare/mcp-server-cloudflare&quot;&gt;MCP support&lt;/a&gt;. &lt;a href=&quot;https://github.com/github/github-mcp-server&quot;&gt;GitHub also has an official MCP server&lt;/a&gt;, including read-only options.&lt;/p&gt;
&lt;p&gt;Connect the tools for the task, authenticate and check their permissions. A documentation connection answers questions; an account connection may be able to change resources. Ask the agent to explain what it will change before giving it write access.&lt;/p&gt;
&lt;p&gt;You can launch through the hosting dashboard without MCP. Add integrations when they save repeated work.&lt;/p&gt;
&lt;h2 id=&quot;8-use-agents-for-specific-jobs&quot;&gt;8. Use agents for specific jobs&lt;/h2&gt;
&lt;p&gt;An idea worth trying is to split work between agents with clear responsibilities. The brutal tester and strict design-language guardian below are examples. You can add roles depending on what you need:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A product-thinking agent to challenge the audience, main action and MVP.&lt;/li&gt;
&lt;li&gt;A building agent to implement one agreed feature at a time.&lt;/li&gt;
&lt;li&gt;A tester to find broken journeys and reproduce failures.&lt;/li&gt;
&lt;li&gt;A design guardian to check the result against the shared rules.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;You can also use one agent in separate sessions for these jobs. More agents mean more coordination; choose roles because the work needs them.&lt;/p&gt;
&lt;p&gt;Give each role the same brief and current version. Have reviewers report findings before making changes, then let the building agent fix the agreed issues. If agents work at the same time, keep their changes in separate branches and review them before merging.&lt;/p&gt;
&lt;p&gt;For a product-thinking agent, I would start with: “Which audience assumption is weakest? What can we remove from the MVP? What observation would tell us the site is useful?”&lt;/p&gt;
&lt;h3 id=&quot;example-the-brutal-tester&quot;&gt;Example: the brutal tester&lt;/h3&gt;
&lt;pre class=&quot;astro-code astro-code-themes github-light github-dark&quot; style=&quot;--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;text&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Read docs/mvp.md. Test the main&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;journey in the browser. Check links,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;phone layout, keyboard use and&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;failure states.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;For booking or forms, verify the&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;destination and completion using a&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;test flow. Do not make real purchases&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;or submissions. Report the steps,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;expected result, observed result and&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;severity. Include evidence. State what&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;you could not test. Report findings&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;first; do not edit the site.&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;example-the-design-language-guardian&quot;&gt;Example: the design-language guardian&lt;/h3&gt;
&lt;pre class=&quot;astro-code astro-code-themes github-light github-dark&quot; style=&quot;--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;text&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Review the rendered site against&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;docs/design-language.md. Check type,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;colour roles, spacing, components and&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;focus states on phone and desktop&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;layouts, and supported themes.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Name each broken rule and the affected&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;page or component. Separate rule&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;violations from personal preferences.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;State any inspection limits. Report&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;findings before editing.&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;A source-code review alone cannot prove that a page looks right or that a booking works. The agent needs the relevant browser and testing tools. I would also open the result on my own phone and ask someone to try the main task without instructions.&lt;/p&gt;
&lt;h2 id=&quot;9-a-simple-sequence-for-the-first-version&quot;&gt;9. A simple sequence for the first version&lt;/h2&gt;
&lt;p&gt;Work through these stages at your own pace. Move on when the result works.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Define: write the brief and cut the scope. You should be able to describe the audience and main action in a sentence.&lt;/li&gt;
&lt;li&gt;Prepare: choose the path, collect the content and write the design rules. Get a starter working.&lt;/li&gt;
&lt;li&gt;Build: complete the main visitor journey. Add supporting pages only where needed.&lt;/li&gt;
&lt;li&gt;Review: test the journey and design, fix blockers and repeat the affected checks.&lt;/li&gt;
&lt;li&gt;Publish and verify: deploy, check the public address, then record what belongs in the next iteration.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Before sharing the link, check:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The main action works on the live site, including any external booking or form flow.&lt;/li&gt;
&lt;li&gt;Phone layout, keyboard navigation, images and links work.&lt;/li&gt;
&lt;li&gt;Page title, description and social-sharing preview reflect the actual content.&lt;/li&gt;
&lt;li&gt;Placeholder copy and fake testimonials are gone.&lt;/li&gt;
&lt;li&gt;You have the source files and know how to update the content or restore a previous version.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Domain changes can take longer than the build. Use the temporary address while waiting. A new feature or setup problem is a reason to adjust the scope; keep the main journey complete.&lt;/p&gt;
&lt;h2 id=&quot;10-mistakes-i-would-avoid&quot;&gt;10. Mistakes I would avoid&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Letting the agent guess the purpose or invent missing business details.&lt;/li&gt;
&lt;li&gt;Requesting redesigns without preserving the design rules.&lt;/li&gt;
&lt;li&gt;Adding a backend or several agents before the work needs them.&lt;/li&gt;
&lt;li&gt;Confusing a successful build with a working visitor journey.&lt;/li&gt;
&lt;li&gt;Choosing a platform without checking renewal costs and portability.&lt;/li&gt;
&lt;li&gt;Asking readers to use a feature the site does not have, such as comments.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;AI tools are changing fast. Some of the tools and steps here may be outdated by the time you read this, or may not suit your setup. I would use this as a starting point and check the current guidance for the tools you choose.&lt;/p&gt;
&lt;p&gt;The foundation stays the same: know why you are building, who the site is for and what they need to do. Start small, keep one design language and test the result. After each iteration, I come back to one question: can the person this site is for do what I intended?&lt;/p&gt;
&lt;p&gt;Which tools do you use to build websites with AI, and what do you check before sharing them? If you found this through LinkedIn or Substack, reply there. Website readers can &lt;a href=&quot;https://blog.ayushkapale.com/contact&quot;&gt;send me their approach&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;/h2&gt;
&lt;p&gt;Product details checked on 3 October 2026. Examples and workflow suggestions are mine. These links support the product claims and provide optional setup detail.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Hosting and domains: &lt;a href=&quot;https://developers.cloudflare.com/registrar/get-started/transfer-domain-to-cloudflare/&quot;&gt;Cloudflare DNS requirement&lt;/a&gt;, &lt;a href=&quot;https://developers.cloudflare.com/workers/static-assets/&quot;&gt;Workers static assets&lt;/a&gt;, &lt;a href=&quot;https://vercel.com/docs/plans/hobby&quot;&gt;Vercel Hobby terms&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Builder portability: &lt;a href=&quot;https://docs.lovable.dev/integrations/github&quot;&gt;Lovable GitHub sync&lt;/a&gt;, &lt;a href=&quot;https://www.hostinger.com/support/6572573-hostinger-ai-builder-manual-mode-how-to-export-content-to-wordpress/&quot;&gt;Hostinger manual-mode export&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Astro: &lt;a href=&quot;https://docs.astro.build/en/guides/on-demand-rendering/&quot;&gt;rendering&lt;/a&gt;, &lt;a href=&quot;https://docs.astro.build/en/install-and-setup/&quot;&gt;installation&lt;/a&gt;, &lt;a href=&quot;https://docs.astro.build/en/guides/deploy/cloudflare/&quot;&gt;Cloudflare deployment&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Coding agents: &lt;a href=&quot;https://learn.chatgpt.com/docs/codex/ide&quot;&gt;Codex in your IDE&lt;/a&gt;, &lt;a href=&quot;https://opencode.ai/docs/ide/&quot;&gt;OpenCode IDE integration&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Pipeline: &lt;a href=&quot;https://github.com/cloudflare/mcp-server-cloudflare&quot;&gt;Cloudflare MCP&lt;/a&gt;, &lt;a href=&quot;https://github.com/github/github-mcp-server&quot;&gt;GitHub MCP&lt;/a&gt;, &lt;a href=&quot;https://developers.cloudflare.com/workers/ci-cd/builds/git-integration/github-integration/&quot;&gt;Workers Builds GitHub integration&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Design review: &lt;a href=&quot;https://www.w3.org/WAI/tips/designing/&quot;&gt;W3C accessibility tips&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://ayushkapale.com/blog/build-a-website-with-ai-in-a-day&quot;&gt;Read on ayushkapale.com&lt;/a&gt;&lt;/p&gt;</content:encoded><category>AI</category><category>Product</category></item></channel></rss>