不懂編碼的人如何用 AI 在 30 分鐘內製作並上線可實際使用的網站（免費託管、單一 HTML 檔案）

You don't need a framework, npm or a terminal. You need one HTML file, one AI chat and Netlify Drop.

1. Why a single file works

Nothing to install, and it opens anywhere. One index.html with the CSS inside it runs in any browser, on any computer or phone. There is no build step to break and nothing to configure.

2. The master prompt

This is the master prompt from Project 1 of the Builder Kit (a personal homepage). Paste it into your AI chat in full and fill in the [brackets]:

Build a complete personal homepage as a single HTML file with all CSS inside it (no external libraries). About me: [name], [what you do], [3 interests]. Sections: a hero with my name and one-line intro, About, Things I'm working on (3 cards), and Contact links for [email/socials]. Style: [e.g. calm and minimal / bold and colorful], with a dark mode toggle. Make it fully mobile-friendly, accessible (good contrast, alt text) and fast. Return the full file in one code block.

Save the reply as index.html and double-click it to open it in your browser.

3. Test checklist

Click everything: every link, button and the dark mode toggle.
Phone view: resize the window narrow, or open the file on your phone.
Console: open your browser's developer tools and check the console for red errors.

4. The bug-report prompt

When something is broken, give the AI three things: what you expected, what actually happened, and the steps to reproduce it. Send one bug per message.

Expected: [what should happen]
Actual: [what happens instead]
Steps: [1. ... 2. ... 3. ...]
Here is my current code: [paste]. Fix only this bug and return the full file.

5. Versioning for non-devs

Don't overwrite your working file. Save each good version as v1.html, v2.html and so on. If an AI edit breaks something, you can go back to the last version that worked.

6. Shipping

Go to app.netlify.com/drop.
Drag your file (rename it to index.html, or put it in a folder) onto the page.
Rename the site in the site settings to something you like.
To redeploy, drop your updated file onto the site's Deploys page.

7. What to build next

A link-in-bio page
A budget tracker that saves data with localStorage
A canvas game

I turned this into 8 guided projects: No-Code AI Builder Kit, https://promptsidequest.gumroad.com/l/builder-kit?utm_source=devto&utm_medium=article&utm_campaign=launch . Free 50-prompt starter: https://promptsidequest.com/free/50-prompts.pdf?utm_source=devto&utm_medium=social&utm_campaign=launch