Build and Deploy a Landing Page with AI CLI — No Coding Required

The $200 Poster That Looks Like Everyone Else's

Imagine you are standing in a hallway lined with bulletin boards. Every board has a poster on it. They are all slightly different — different colors, different photos — but they share the same layout. Same grid. Same font choices. Same rounded corners on the same call-to-action button.

That is what happened when you paid $200 for a Squarespace site. Or $180 for Wix. Or $29 a month for Webflow. You picked a template, swapped in your name and photo, and published. The site works. It loads fast. It looks professional. It also looks exactly like thirty thousand other sites built from the same template last Tuesday.

You wanted something that felt like you. What you got was a costume that fits everyone.

Here is the alternative: you describe what you want in plain language. An AI generates the code — custom, from scratch, not from a template. You preview it on your own machine. Then you put it on the internet for free, with one command.

No monthly subscription. No drag-and-drop builder. No "upgrade to Pro to remove the watermark." You own every line of code, and you can change it whenever you want by describing what you want changed.

By the end of this article, you will have a real landing page, live on the internet, at a real URL you can share. The whole process takes about 30 minutes.

What You Need Before We Start

Three things:

1. A computer — Mac, Windows, or Linux. Any of them.
2. Claude Code — the AI tool we will use. It requires a Claude Pro subscription ($20/month). If you already have one, you are set. If not, sign up at claude.ai.
3. A free Netlify account — this is where your site will live. Think of it as a free bulletin board on the internet. Sign up at netlify.com using your GitHub or email.

You do not need to know HTML. You do not need to know CSS. You do not need to know what a "terminal" is beyond "that black window where you type commands." We will explain everything as we go.

If you have never used Claude Code before, the First Hour with Claude Code tutorial covers installation in detail. The short version is below.

Step 1: Install Claude Code (5 minutes)

Open your terminal. On Mac, search for "Terminal" in Spotlight (Cmd + Space, type "Terminal"). On Windows, open PowerShell.

The terminal is just a text-based way to talk to your computer. Instead of clicking icons, you type commands. That is it. No magic, no danger. Think of it as texting your computer instead of tapping buttons.

On Mac or Linux, paste this and press Enter:

curl -fsSL https://claude.ai/install.sh | bash

On Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

After it finishes, type:

claude

Your browser will open for you to log in. Use the same account as your Claude Pro subscription. Once you log in, go back to your terminal. You should see a cursor waiting for input.

That is Claude Code. It is an AI that lives in your terminal. You type what you want, it does it. It can read files, write files, run commands, and — importantly for us — generate entire websites from a description.

Step 2: Create Your Project Folder (2 minutes)

We need a place to put your landing page files. In the terminal, type:

mkdir my-landing-page && cd my-landing-page

mkdir means "make directory" — it creates a folder. cd means "change directory" — it moves you into that folder. You just created a folder called my-landing-page and stepped inside it.

Now start Claude Code inside this folder:

claude

You are ready.

Step 3: Describe Your Landing Page (10 minutes)

This is the part where you would normally need to know HTML (the skeleton of a webpage) and CSS (the paint and decoration). Instead, you are going to describe what you want in plain language, and Claude Code will write the code for you.

Here is an example prompt. Do not copy this literally — write your own, describing your page:

Create a single-page landing page for a freelance photographer named Mei Chen.

The vibe is minimal, elegant, dark background with warm accent colors.

Sections:
1. Hero at the top: large headline "Mei Chen Photography", a one-line tagline "Telling stories through light", and a "View My Work" button.
2. Portfolio grid: 6 placeholder image boxes in a 3x2 grid. Use gray boxes with the text "Photo 1", "Photo 2", etc. as placeholders.
3. About section: a short paragraph about the photographer (make up something plausible) next to a placeholder portrait.
4. Contact section: email link, Instagram link, and a simple contact form with Name, Email, and Message fields.
5. Footer with copyright.

Make it responsive so it looks good on phones too.
Output everything in a single index.html file.

Type this into Claude Code (or your own version of it) and press Enter.

Watch what happens. Claude Code will think for a moment, then start writing an entire HTML file — structure, styling, layout, colors, fonts, responsive design — all from your description. It places the file in your current folder.

The key: be specific about what you want. "Make me a website" gives you something generic. "Dark background, warm accents, minimal, 4 sections, portfolio grid" gives you something that feels like a deliberate design choice.

If you do not like something, just tell Claude Code. Say:

Change the background to off-white and make the accent color forest green.

Or:

Make the headline bigger and add more spacing between sections.

Each time, Claude Code edits the file. You are directing. It is executing. This is the part that used to cost $200 and a week of back-and-forth with a web designer.

Step 4: Preview Your Page Locally (2 minutes)

Before you put your page on the internet, look at it on your own machine first. This is like holding your poster up in your room before taping it to the hallway wall.

Still inside Claude Code, type:

Open index.html in my browser.

Claude Code will run the command to open the file. Your browser launches. There is your landing page.

Look at it. Scroll through it. Resize your browser window to see how it looks at different sizes. If something is off, go back to your terminal and tell Claude Code:

The portfolio grid looks cramped on mobile. Add more padding between the image boxes.

Refresh your browser. Fixed.

This loop — describe, preview, adjust — is how professional web developers work. The difference is they type CSS by hand. You type English.

Step 5: Install the Netlify CLI (3 minutes)

Your page looks good on your machine. Time to put it on the internet.

Netlify is a free hosting service. Think of it as a free bulletin board in a public hallway — anyone with the URL can see your poster. You do not pay rent. You do not manage servers. You just pin your page up and Netlify handles the rest.

First, exit Claude Code by pressing Ctrl + C or typing /exit.

Now install the Netlify CLI (CLI means "command line interface" — a tool you control by typing commands):

npm install -g netlify-cli

If you get an error saying npm is not found, you need Node.js first. Install it from nodejs.org (download the LTS version, run the installer, then try the command again).

After installation, log into your Netlify account from the terminal:

netlify login

This opens your browser. Authorize the connection. Done.

Step 6: Deploy (3 minutes)

This is it. One command puts your page on the internet.

Make sure you are still in your my-landing-page folder, then run:

netlify deploy --prod --dir=.

Let us break that down:

• netlify deploy — the deploy command. Like taping your poster to the wall.
• --prod — means "this is the real, public version."
• --dir=. — the dot means "use the current folder." That is where your index.html lives.

Netlify will ask you a couple of questions the first time:

• Create a new site? Yes.
• Team? Pick your team (usually just your name).
• Site name? Pick something or let it generate a random one.

Then it uploads your file. In about 10 seconds, you see output like:

Website URL: https://mei-chen-photography.netlify.app

Open that URL. In any browser. On your phone. Send it to a friend.

Your landing page is live on the internet.

That URL is real. It is yours. It works right now. Anyone in the world with that link can see your page.

Step 7: Make Changes Anytime (Ongoing)

Your site is not frozen. Want to update it next week? Open your terminal:

cd my-landing-page
claude

Tell Claude Code what to change:

Replace the placeholder images with these descriptions:
- Photo 1: a sunset over rice paddies
- Photo 2: a portrait in natural window light
Generate the images as SVG illustrations and embed them in the HTML.

Or:

Add a new section called "Pricing" between Portfolio and Contact.
Three tiers: Basic ($500), Standard ($1200), Premium ($2500).
Clean card layout, highlight the Standard tier as recommended.

After the changes, deploy again:

netlify deploy --prod --dir=.

That is it. Your live site updates in seconds. No login to a dashboard. No drag-and-drop editor. No "your plan does not include custom CSS."

What You Just Skipped

Let us be honest about what happened here. You skipped:

• Learning HTML — the skeleton of every webpage. Claude Code wrote it.
• Learning CSS — the styling. Claude Code handled it.
• Choosing a template — you do not need one. Your page was generated from your description, not fitted into someone else's layout.
• Paying for hosting — Netlify's free tier handles personal sites and portfolios without breaking a sweat.
• Monthly subscriptions — Squarespace charges $16-49/month. You paid $0 for hosting and $20/month for Claude Pro, which you can use for hundreds of other things.

What you did not skip:

• Owning your code — that index.html file is yours. You can open it in any text editor, host it anywhere else, or hand it to a developer to extend.
• Understanding what your site does — you described every section. You know what is there because you asked for it.
• Control — any change is one conversation away. No support tickets. No "that feature requires the Business plan."

Going Further

A single index.html file works for landing pages, portfolios, and personal sites. When you outgrow it, the same workflow scales:

• Multiple pages: Tell Claude Code to create an about.html, portfolio.html, and link them with navigation. Deploy the whole folder the same way.
• Custom domain: Buy a domain (around $12/year from Namecheap or Cloudflare), then in Netlify's dashboard, add it under Domain Management. Your site goes from random-name.netlify.app to meichenphotography.com.
• Forms that actually work: Netlify handles form submissions for free. Tell Claude Code to add netlify attribute to your form tag, and submissions land in your Netlify dashboard.
• A full web app: When you are ready for interactivity — databases, user accounts, dynamic content — the AI CLI Tools Complete Guide covers the full toolkit.

What You Built

You built a custom landing page. Not from a template. Not from a builder. From a description of what you wanted, turned into real code by an AI, deployed to the internet for free.

The whole process:

1. Describe — tell Claude Code what your page should look like
2. Preview — open the file in your browser and check
3. Adjust — tell Claude Code what to change
4. Deploy — one command, live on the internet
5. Update — same loop, whenever you want

No coding required. But here is the thing — you just did something that is coding. You described a structure. You iterated on it. You deployed it. The only difference between you and a web developer right now is that you used English instead of HTML.

That is not a lesser version of the process. That is the process, with a better interface.