Build · A live webpage
A working one-page site you can share. ~15 min, no install.
You'll generate a real working webpage inside a chat app's artifact/canvas panel, iterate on it visually, then save the HTML to your machine. Optional last step: deploy it to a free host with a public URL.
Open a chat app with artifacts
Claude.ai and ChatGPT both have a side-panel artifact / canvas feature. Either works.
Signed in, looking at the new-chat screen.
Start a fresh chat
Click New chat. Make sure it's a regular chat (not inside a project that has unrelated instructions).
Paste the build prompt
Copy and paste this exactly. Hit Enter.
Build a one-page website for me as a single self-contained HTML file (style and JS inline, no external dependencies, no CDN imports). Purpose: a "what I'm working on" portfolio page. Sections: 1. Header with my name and a one-line bio. 2. Three project cards — each with a title, a one-line description, and a fake link. 3. Footer with a contact email and a small "made with AI" note. Style: warm but modern. Generous whitespace. Serif headings (Iowan/Georgia/system serif), sans-serif body. Soft cream background (#fbf6ef). Single accent color #cc5500. Constraints: - Works fully offline. No external assets. - Mobile responsive — sections stack on small screens. - Plain semantic HTML, accessible. Ask one clarifying question if you need my name or bio. Otherwise use placeholders and I'll edit after.
Within a few seconds the right side of the screen opens an artifact / canvas panel and starts rendering the webpage live. The chat may also ask for your name and bio.
Answer the clarifying question
Reply with your name, a one-line bio, and three project ideas. Or use placeholders:
Name: Jane Doe Bio: I build small tools and write short essays. Projects: 1. Sourdough log — a site tracking hydration vs crumb structure 2. City sounds — field recordings from cities I've lived in 3. Bookshelf — what I'm reading and why
The artifact updates in-place with your real content. The page should look reasonable.
Iterate — one change at a time
Paste each of these as a separate message. Watch the artifact update after each.
Use a dark background instead — near-black (#0d0d0d) with cream text. Keep the same accent.
Make the three project cards equal height and add a subtle hover effect.
Add a small 'now' section above the projects — a single line about what I'm focused on this week.
The page evolves: darker theme → equal-height cards → an extra "now" section. If something looks off, ask for a fix in plain English.
Open the artifact full-screen and inspect
Most artifact panels have a preview mode (eye icon) and a code mode (</> icon). Toggle between them. Try the page on your phone (most chats let you preview on mobile, or you can resize the browser).
Download the HTML
Click the download button on the artifact (or copy all the code and save to a file named index.html).
You have index.html on your machine. Double-click it — it opens in your browser. That is a webpage you made.
Deploy it (optional)optional
Want a public URL? Free options: Cloudflare Pages, Netlify Drop, GitHub Pages. Cloudflare and Netlify both have a drag-drop deploy that takes 30 seconds.
I have a working one-page HTML file. Walk me through deploying it for free in 3 minutes. I want a public URL I can share. Options I've heard of: Cloudflare Pages, Netlify, GitHub Pages, Vercel. Recommend one and give me literal step-by-step instructions for that one.
A public URL you can share. Done.
Save the chat — it's your edit history
The chat thread now contains every version of your page. Bookmark it. To make future changes, come back and ask the chat — it'll see the whole history.
Tool is yours to keep. Come back any time — your progress is saved.