A buddy of mine recently asked me the same question twice in one week: “Can I use that AI thing to make a one‑page website without signing up for anything, and without paying a dime?” The answer is yes, and the way it works feels like a neat trick — all the code gets created on your own computer, you never have to look at an HTML tag if you don’t want to, and at the end you’ll have a real URL you can text to somebody. By the end of this walkthrough, you’ll have exactly that: a self‑contained landing page that you prompted into existence, edited by chatting with the AI, and hosted for free. Plus I’ll show you how to run the whole workflow from an Android phone while the heavy lifting stays on your laptop.
What you’ll end up with (and why it’s worth your time)
We’re aiming for a single .html file that bundles the structure, the styling, and any interactive pieces into one document. You double‑click it, it opens in a browser, and it looks like a proper website. Then we’ll drag it onto Netlify’s dropzone and instantly get a shareable link like https://your-thing.netlify.app.
The AI that writes the code lives on your machine — not on a web service. That matters for a few reasons:
- Nobody else sees your prompts or your code.
- There’s no usage limit and no bill.
- It works with the internet unplugged (except for the deployment step).
If you’re nervous about terms like “local LLM” or “embedded JavaScript,” don’t be. You won’t write a single line. You’ll just describe the page you want, the same way you’d explain it to a designer sitting next to you.
Step 1: Get a local model running on your computer
You need two free tools: an application that runs the model, and the model itself. The two I recommend most are LM Studio (it’s got a normal app window) and Ollama (it runs in a terminal).
LM Studio (the visual one)
- Download LM Studio from lmstudio.ai for Windows, Mac, or Linux. Install it like any other program.
- Open it up. The home screen has a search bar. Type a model name, hit enter, and you’ll see downloadable models. For creating web pages, start with Llama 3.1 8B — it’s smart enough to spit out clean code and runs smoothly on most laptops. If your machine is older or memory‑tight, try Phi‑3 Mini or Gemma 2B. They’re smaller but handle single‑page sites without breaking a sweat.
- Click the download button next to the model. Once it’s downloaded, switch to the Chat tab, pick the model from the dropdown at the top, and wait a few seconds until you see “Model loaded.”
- You now have a local chat interface. It behaves like any chatbot, except there’s no account and no internet needed from here on.
Ollama (if you’re comfortable with a terminal)
- Grab the installer from ollama.com and install it.
- Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux).
- Pull a model with, for example:
ollama pull llama3.1:8b
(Other good options:mistral,phi3,gemma2:2b). - Start chatting by typing:
ollama run llama3.1:8b
When you see the>>>prompt, you’re ready./byeexits.
Both tools work entirely offline after you’ve downloaded the model. I’ll stick to LM Studio for the rest of the guide because copy‑pasting code is easier from a GUI, but the prompts are identical regardless.
Step 2: The prompt that gives you a complete landing page
The AI isn’t guessing what you want — you have to steer it with clear instructions. The two most important phrases are “single self-contained HTML file” and “embed all CSS and JavaScript inside the file.” After that, you just list the sections you want, specify a style, and ask for placeholder images that actually display.
Here’s a prompt I’ve used many times. I’ll use a coffee shop as the example, but you can swap in anything: a portfolio, a band, a local service.
Example prompt:
Generate a complete, self-contained HTML file for a modern landing page for 'Sunrise Coffee'. All CSS and JavaScript must be embedded in the same file — no external references. The page should have:
- A sticky header with a text logo and nav links (Home, Menu, About, Contact).
- A hero section with the headline 'Your Morning Starts Here', subheadline 'Hand-roasted beans. Community vibes. Free Wi-Fi.', and a CTA button labeled 'See Our Menu'.
- A three‑column features section: 'Locally Sourced', 'Crafted with Care', 'Sustainable Packaging'. Each gets a short description and a simple SVG icon.
- Two customer testimonials with realistic placeholder names and quotes.
- A footer with a newsletter signup field (non‑functional) and social links using #.
- Use placeholder images from https://picsum.photos with sensible dimensions: hero background 1600x900 (use https://picsum.photos/1600/900?random=1), feature icons 100x100 (random=2,3,4), etc.
- Color palette: warm browns, cream, an accent orange. Responsive layout, mobile hamburger menu with smooth scroll.
- Output only the complete HTML code, no explanation.
A few things I’d point out:
- By saying “no external references,” you avoid the model trying to link to stylesheets or scripts that don’t exist.
picsum.photosgives you real, random photos — the page will look alive immediately. You can also usehttps://placehold.co/600x400for colored boxes, but photos tend to feel more finished.- Asking for “realistic placeholder names and quotes” gives you natural‑sounding text instead of lorem ipsum.
- The final instruction — “Output only the complete HTML code” — makes it easy to copy the whole thing without the AI wrapping it in pleasantries.
Paste that prompt into LM Studio (or your Ollama session), hit enter, and give the model a few seconds. You’ll see a wall of HTML scroll by.
Step 3: Save the file and see it in your browser
- Copy all the generated code. In LM Studio, there’s a small copy icon above the code block. In a terminal, just select and copy.
- Open a plain text editor. On Windows, Notepad works. On Mac, open TextEdit but first go to Format → Make Plain Text (this stops it from saving as rich text). If you plan to do this more than once, grab VS Code — it’s free and will highlight the code nicely.
- Paste the code and save. Go to File → Save As, name the file
index.html. Make sure “Save as type” is set to All Files (Windows) so it doesn’t tack on a hidden.txt. Drop it on your desktop or in a folder where you can find it. - Double‑click
index.html. Your default browser will open the page. Right away, you should see a fully styled landing page with working navigation, images, and a responsive mobile menu. It’s already a real website; it’s just sitting on your hard drive for now.
If something looks off — maybe a button color feels too loud, or the mobile menu behaves oddly — keep reading. That’s where the real fun begins.
Step 4: Ask the AI for changes (the conversational loop)
The first version rarely matches the image in your head. Because the model has the whole conversation in its memory, you can just follow up with what you want fixed. Since we’re keeping everything in a single file, the easiest approach is to ask for the full updated HTML each time. That avoids pasting snippets into the wrong spot and breaking things.
Editing rhythm:
- In the same chat, type your request. For example:
- “Change the color palette to a dark theme with teal accents instead of the warm coffee tones. Also replace the hero image with a CSS gradient. Output the complete updated HTML file.”
- “Add a ‘Our Menu’ section below the features with four items: latte, cappuccino, pour‑over, cold brew. Give each a 300×200 placeholder from picsum.photos, a short description, and a price. Provide the full HTML.”
- “The mobile menu doesn’t close after I tap a link. Fix that, and add a subtle fade‑in animation on the testimonials section when it scrolls into view. Full HTML, please.”
- The model regenerates the whole document with your edits. Copy the new code, paste it over the old
index.html, save, and refresh your browser. - Repeat until the page looks the way you want.
For placeholder content, if the AI’s text sounds generic, nudge it: “Make the customer quotes more personal. One should mention the lavender latte specifically, the other should mention the couch by the window. Keep everything else the same and output the full HTML.” It’ll rewrite the copy without touching the structure.
About those placeholder images: We’ve been pulling from picsum.photos so the site doesn’t look like a gray box. When you’re ready to swap in real photos, you can either manually replace the src URLs (search for “picsum” in the code) or ask the AI: “Replace all placeholder images with local filenames: hero.jpg for the hero, photo1.jpg through photo4.jpg for the rest. Output the updated HTML.” Then just put your own image files in the same folder as index.html.
This loop — prompt, copy, save, refresh — becomes second nature. You can build a surprisingly polished page in an afternoon without ever staring at a CSS property you don’t understand.
Step 5: Get a live URL with Netlify’s drag‑and‑drop
Your page only lives on your computer right now. To give it a real address that anyone can visit, Netlify has a feature called Drop that is genuinely as easy as it sounds.
- Head to app.netlify.com/drop. You don’t need an account to try it, though signing up (free) lets you manage your sites later.
- You’ll see a large dashed area. Drag your
index.htmlfile straight onto it. Netlify can handle a single file with no folder. - The upload takes a few seconds. The page then shows you a URL like
https://random-name-123456.netlify.app. Tap it — your landing page is live. - (Optional) If you sign up for a free account, you can edit the subdomain name to something like
sunrise-coffee.netlify.appin the site settings. You can even connect a custom domain later if you own one.
There’s no terminal, no FTP, no configuration. That’s really it. Later, if you tweak your index.html locally, you can just go back to that same drop page (or your Netlify dashboard), drag the updated file, and it will instantly replace the old version.
Bonus: Do the whole thing from your Android phone with LMSA
Here’s the part that still makes me smile. You can prompt the AI, save the HTML, and deploy it — all from your phone — while your computer sits in the next room acting as a private server. The tool that ties it together is the free LMSA app (Local Model Smart Assistant). I’ve verified the setup process by digging through its documentation and community guides; it’s straightforward.
The one‑time setup:
- On your computer, have LM Studio or Ollama running with a model loaded.
- In LM Studio, click the Server tab (the
<->icon) and start the local server. By default it listens on port1234. - In Ollama, the API is on by default at port
11434. You don’t need to do anything extra after runningollama serveor just usingollama run.
- In LM Studio, click the Server tab (the
- Find your computer’s local IP address. On Windows, open Command Prompt and type
ipconfig— look for the IPv4 address under your active network (something like192.168.1.5). On Mac, System Settings → Wi‑Fi → Details, or runifconfigin Terminal. - On your Android phone, install LMSA from the Play Store or directly from lmsa.app. Open the app, go to settings, and enter the server address:
http://192.168.1.5:1234(swap the IP and port to match your setup —11434for Ollama). Save. Your phone can now send prompts to your computer’s AI.
Building and deploying from the couch:
- In LMSA, paste the exact same landing page prompt from Step 2. You’ll see the response stream in real time.
- When the code finishes, copy it to your clipboard. (LMSA has a copy button for code blocks.)
- Download a lightweight text editor like QuickEdit (free on Play Store). Paste the code, save the file as
index.htmlin a folder you’ll remember, likeDocuments/Sites. - To preview, open your phone’s file manager, tap the
index.html— it’ll open in your mobile browser, fully functional. - To go live, open Chrome (or any browser) and visit
app.netlify.com/drop. Tap the file picker link, navigate toDocuments/Sites/index.html, select it, and let it upload. Within seconds you get a live URL, same as on desktop.
Because the connection between LMSA and your computer stays on your local network, your prompts never leave your house. You can even iterate from bed: ask for edits in LMSA, copy the new code, replace the file, and drag it onto Netlify again. It’s a smooth loop that respects your privacy.
What to try next
Once you’ve got one page online, the natural itch is to extend it. A few ideas that are easy to pull off with the same conversational editing approach:
- Multiple pages: Ask for an
about.htmlormenu.htmlthat links back to yourindex.html. Save each file and drag the whole folder onto Netlify — it handles multi‑file sites fine. - A working contact form: Point the AI to Formspree and tell it to embed the form with the correct
actionURL. You sign up for a free endpoint, and the AI writes the HTML. - Installable on phones: Request a web app manifest and a basic service worker in the same file. The AI can add the few lines needed to make the site prompt “Add to Home Screen” on mobile browsers.
The whole process boils down to describing what you want in normal language, testing it instantly in your browser, and then dropping a file onto a webpage to make it public. There’s no middleman, no subscription, and no mystery about where your data goes. Give it a shot on something small — a birthday invitation, a menu, a quick portfolio — and see how fast you go from an empty chat window to a live URL.