atarehBeginners · APR 3, 2026
The non-coder's guide to building with Claude Code
Claude Code isn't for coders — it's for people who don't know how to code. This guide walks you through setting up a personal website, deploying it live on Vercel, and leveling up from there.
Why Claude Code isn't for coders
The name is misleading. “Claude Code” sounds like something built for software engineers. It's not. It's for anyone who wants to build things on the internet but doesn't know how to code.
I don't know how to code. But I've built websites, dashboards, iOS apps, and design files — all with Claude Code. The skill isn't writing JavaScript or Python. The skill is describing what you want clearly. That's it. That's the unlock.
In this guide, you're going to go from zero to a live personal website on the internet. No coding required. By the end, you'll have a site hosted on Vercel with a real URL you can share.
Step 1: Get a Claude account
Sign up at claude.ai
Go to claude.ai and create an account. You can sign up with Google, email, or Apple.
Pick a plan
To use Claude Code, you need a paid subscription. Here are your options:
- Pro ($20/mo) — gives you limited Claude Code access. Good for trying it out.
- Max ($100/mo) — unlimited Claude Code usage. Worth it if you're building stuff regularly.
If you're just getting started, Pro is fine. You can always upgrade later once you're hooked.
Step 2: Open Claude Code
There are a few ways to access Claude Code. Here's what I recommend for beginners:
Use the browser (easiest)
Go to claude.ai/code in your browser. No install, no setup, no terminal. Just open it and start talking.
You can also download the desktop app for Mac or Windows if you prefer that. Both work the same way.
Step 3: Build your first project
This is where it gets fun. You're going to tell Claude what you want, and it's going to build it for you.
Describe your website in plain English
Type something like this into Claude Code:
Build me a personal website. I want a clean, modern design with my name “[Your Name]” as the header, a short bio section, and links to my social media (Twitter, LinkedIn, Instagram). Use a dark background with white text.That's it. Hit enter. Claude will start building your website right in front of you. You'll see it write the code, create files, and set up the project structure — all automatically.
Watch it build
Claude Code doesn't just give you instructions — it actually builds the thing. You'll see it:
- Create the project files and folders
- Write all the HTML, CSS, and JavaScript
- Set up the page layout, fonts, and colors
- Generate a working preview you can see immediately
The whole thing takes about 30-60 seconds. When it's done, you'll have a working website.
Step 4: The feedback loop
This is the most important concept to understand. Building with Claude Code is a conversation. You tell it what you want, it builds it, you tell it what to change, it updates it. Rinse and repeat.
Preview and refine
Look at what Claude built. Don't like something? Just say so. Here are some example follow-up prompts:
Make the background a gradient from dark blue to black instead of plain darkAdd a contact form at the bottom with fields for name, email, and messageMake the social links into icons instead of plain textThe font looks boring — use something more modern and cleanEach time you give feedback, Claude updates the site instantly. You don't need to know what CSS or HTML is — just describe what you want in normal words.
Step 5: Deploy it to the internet
Your website looks great locally. Now let's put it on the internet so anyone with the link can see it.
Push to GitHub
Tell Claude to save your project to GitHub (a free platform that stores your code). Just say:
Push this project to GitHub. Create a new repository called “my-personal-site”Claude handles the entire process — creating the repo, committing the files, pushing everything up. If you don't have a GitHub account yet, go to github.com and sign up (it's free).
Deploy to Vercel
Now tell Claude to deploy your site:
Deploy this to VercelClaude will connect to Vercel (a free hosting platform), set everything up, and give you a live URL. Something like my-personal-site.vercel.app.
That's a real website. On the real internet. Anyone can visit it. And you didn't write a single line of code.
Next steps: keep building
You have a live website. Now what? Here are some things you can do next — all with the same workflow of just talking to Claude Code.
Add a custom domain
Instead of my-site.vercel.app, get your own domain like yourname.com. Buy a domain from Namecheap, Google Domains, or directly from Vercel, then go to your Vercel project → Settings → Domains and add it.
Add more pages
Your site doesn't have to be a single page. Try these prompts to expand it:
Add a blog page with 3 sample posts about [your interests]. Each post should have a title, date, and preview text.Add an about page with a photo placeholder, a timeline of my experience, and a section about my interests.Add a portfolio page with project cards. Each card should have a screenshot placeholder, title, description, and a link.Build something completely different
The same workflow works for way more than personal websites. Once you're comfortable with the feedback loop, try:
- iOS apps — describe the app, Claude builds it in Swift
- Figma designs — connect Claude to Figma via MCP and generate design files
- Dashboards — data visualizations, admin panels, analytics views
- Landing pages — for your business, side project, or freelance clients
Connect more tools with MCP
MCP (Model Context Protocol) lets Claude Code talk to other tools — Figma, databases, APIs, Vercel, and more. This is how you go from building simple websites to building actual products. But that's a topic for another guide.
The real skill
I want to be clear about something: you don't need to learn to code to use Claude Code. You need to learn how to describe what you want. That's the skill.
The better you get at giving clear, specific instructions, the better your results will be. Start simple. Build a personal website. Then iterate. Add pages. Try new things. Break stuff and fix it by telling Claude what went wrong.
That's the whole process. Talk, build, refine, deploy. Welcome to Claude Code.
Written by
@atareh
AI architect & creator. Writing, designing, and producing in AI and tech. Previously head of product at a healthtech SaaS; background in molecular science. Founded gogray.today in 2017.
Related
Keep reading.
Made by @atareh · x / twitter · instagram