Your 1st Claude Code Project (For Complete Beginners)

Everyone’s talking about Claude Code. “Build this.” “Create that.” “Just prompt it.”

But nobody’s showing you where to actually start, especially if you’ve never written a line of code in your life.

This guide holds your hand through every single step. By the end, you’ll have a real website running on your computer, styled to match your brand, ready to publish online for free. No coding background needed. No experience required.

Non-Developer
     │
     ▼
[VS Code + Claude Code Extension]
     │
     ▼
[Project Folder + CLAUDE.md]
     │
     ▼
[Install 5 Web Design Skills]
     │
     ▼
[Reference Website URL]
     │
     ▼
[Astro Website Built Locally]
     │
     ▼
[Preview in Browser]
     │
     ▼
[Deploy Free on Cloudflare Pages]
     │
     ▼
Live Website ✓

---

TL;DR

• Install VS Code and the Claude Code extension to get started, no coding knowledge needed
• Load 5 specialist web design skills into your workspace with a single prompt
• Give Claude Code any website URL and it will extract the full design for you
• Claude Code builds your site in Astro framework and previews it locally in your browser
• Deploy it live for free on Cloudflare Pages with your own custom domain

Resources

• Design Brand Guideline Skill
• UI/UX Pro Design Auditor Skill
• Frontend Design Skill
• Web Skill
• Web Testing Skill
• VS Code Download
• Cloudflare Pages

---

Why This Project Matters More Than You Think

We are living in a moment where AI can do the work. The only thing slowing most people down is everything sitting between them and the AI.

Think about the tools you’re probably using right now. WordPress on Siteground. Maybe Framer. Maybe Figma. Canva. Page builders. Plugin stacks. Hosting dashboards. Each one of those is a layer of friction between you and getting things done.

I’ve been removing those layers one by one from my own business. The first thing I cut was WordPress and Siteground hosting entirely. Gone. You don’t need it. And once I cut it, I realised how much mental energy it was consuming just to maintain it.

Here’s what’s possible on the other side of that.

This guide you’re reading right now was built by talking to AI. No keyboard. No typing. I described what I wanted out loud, AI wrote the content, created the script, generated the video you’ll see on my socials, and published it to my website. My hands were barely involved. The whole process is assisted by a custom tool stack I built specifically for this, using Claude Code.

That’s what this project is setting you up for. Not just a website. Your first real step towards running your work through AI directly, with as little friction as possible.

Every tool you remove from the middle, every unnecessary platform you stop paying for, every manual process you hand to AI, that’s time and money back in your pocket and more output than you’ve ever produced before.

This project is your first major milestone towards that.

---

What You’ll Need

• A computer (Mac or Windows)
• A Claude Pro or Max subscription
• 30-60 minutes
• No coding experience needed

---

Before You Start: Understanding Claude Code Modes

Claude Code has three modes you’ll use throughout this guide. Read this once so nothing surprises you later.

Plan Mode Before Claude Code does anything, it shows you a plan. Like a contractor walking you through the renovation before picking up a single tool. You read the plan, give feedback, ask for changes, and only move forward when you’re happy with it. Stay in plan mode until it feels right.

Auto Edit Mode Once you approve the plan, you switch to auto edit. Claude Code will now write and update files on its own without stopping to ask you about every small change. Think of it as giving the contractor the green light to start work.

Bypass Permissions By default, Claude Code pauses and asks for your approval before running certain actions. Bypass permissions lets it work through the whole job without those interruptions.

To turn it on:

1. Open VS Code
2. Press Cmd+, on Mac or Ctrl+, on Windows to open Settings
3. In the search bar at the top, type bypass permissions
4. Toggle it on

Here’s how these modes work together in real life. Say Claude Code builds your homepage but the navigation is in the wrong place and the font looks off. Stay in plan mode, tell it exactly what you want changed, review the new plan, then approve it and switch to auto edit. That loop is the whole workflow. Simple.

---

Step 1: Install VS Code

VS Code is a free app where Claude Code lives and does its work. You don’t need to understand it deeply, just install it and open it.

1. Go to https://code.visualstudio.com
2. Click the big download button for your computer (Mac or Windows)
3. Open the downloaded file and install it like any normal app
4. Open VS Code once it’s installed

You’ll see a welcome screen with some panels and icons on the left side. That’s normal. Leave everything as is for now.

---

Step 2: Install the Claude Code Extension

An extension is just a plugin that adds new features to VS Code. You’re going to add Claude Code as an extension so it appears inside the app.

1. Look at the left sidebar in VS Code. You’ll see a row of icons
2. Click the icon that looks like four small squares (this is the Extensions panel)
3. A search bar will appear at the top. Type Claude Code
4. Find the Claude Code extension in the results and click Install
5. When it asks you to sign in, use your Anthropic account (the same one you use for Claude)

Once it’s connected, you’ll see a Claude Code icon in your left sidebar. Click it and you’ll see a chat panel, very similar to Claude on the web but now it’s working directly inside your project.

---

Step 3: Create Your Project Folder

Think of this as setting up your workspace before you start a project. Claude Code needs a dedicated folder to work from.

1. Go to your Desktop or Documents folder
2. Create a new folder and name it after your project, for example my-website
3. Go back to VS Code
4. Click File in the top menu
5. Click Open Folder
6. Find the folder you just created and select it

VS Code will now show your project folder name at the top of the left sidebar. Everything Claude Code builds will live inside this folder.

---

Step 4: Install Your Web Design Skills

Here’s where things get exciting. Claude Skills are like specialist hats you put on Claude Code. Each skill is a set of instructions that teaches it to think like a specific expert, a brand designer, a UI auditor, a frontend developer.

You’re going to install five web design skills right now.

Copy this prompt exactly and paste it into the Claude Code chat panel:

Install the following Claude Skills into my workspace:

1. Design Brand Guideline - https://github.com/getshipfast/claude-skills/blob/main/web-design/design-brand-guideline.md
2. UI/UX Pro Design Auditor - https://github.com/getshipfast/claude-skills/blob/main/web-design/ui-ux-pro-design-auditor.md
3. Frontend Design - https://github.com/getshipfast/claude-skills/blob/main/web-design/frontend-design.md
4. Web - https://github.com/getshipfast/claude-skills/blob/main/web-design/web.md
5. Web Testing - https://github.com/getshipfast/claude-skills/blob/main/web-design/web-testing.md

Fetch each file and save them as skills in my workspace so you can reference them throughout this project.

Claude Code will go and fetch each skill file and save it into your project. You’ll see it working through each one. When it’s done, all five skills are loaded and ready.

From this point forward, Claude Code knows how to design with brand consistency, audit your layout like a UI professional, write clean frontend code, and test your site before it goes live.

Want to go deeper with Skills? In the live workshop we go through how to build your own custom skills, stack them together, and apply them to your specific business. Join the next workshop here.

---

Step 5: Create Your CLAUDE.md File

CLAUDE.md is a special file that sits inside your project folder. Every single time Claude Code opens your project, it reads this file first. It’s your briefing document, your source of truth for the whole project.

Think of it like handing a new team member a one-page brief before they start work.

Paste this prompt into Claude Code:

Create a CLAUDE.md file in my project root with the following details:

- Project name: [replace with your project name]
- Goal: Build a website in Astro framework based on an existing website design
- Design preferences: clean, modern, fast-loading
- Hosting target: Cloudflare Pages
- Skills installed: Design Brand Guideline, UI/UX Pro Design Auditor, Frontend Design, Web, Web Testing
- Always show me a plan before making any changes
- Always reference installed skills when making design decisions

Replace [replace with your project name] with whatever your project is called. Claude Code will create the file and confirm it’s done. You’ll see it appear in your project folder on the left sidebar.

---

Step 6: Give Claude Code a Website to Work From

Now the real fun begins. You’re going to give Claude Code a website, either your own or any website you like as a reference, and ask it to pull the design from it.

This works whether you have an existing website you want to rebuild, or you just want to use a site you admire as a design starting point.

Paste this prompt into Claude Code:

Here is a website I want to use as a design reference: [paste the website URL here]

Please fetch this website and create a design guide based on it. Extract:
- The colour palette
- Font styles and sizes
- Layout structure
- Spacing and padding patterns
- Navigation style

Save this as design-guide.md in my project folder.

Claude Code will visit the website, analyse it, and write up a full design guide saved right inside your project. You now have a reference document that everything else will be built from.

---

Step 7: Build the Website in Astro

Now you’re going to ask Claude Code to build your website. You’re using a framework called Astro, and here’s why that matters to you as a non-developer:

• Astro is built for content websites, blogs, portfolios, business sites
• It loads incredibly fast
• Cloudflare Pages hosts Astro sites completely free
• You don’t need to understand how Astro works, Claude Code handles all of it

Paste this prompt into Claude Code:

Using the design-guide.md file you just created, build a replica of this website in Astro framework.

Steps to follow:
1. Set up a new Astro project inside my current folder
2. Apply the colours, fonts, layout and structure from design-guide.md
3. Recreate the main pages (home, about, contact as a minimum)
4. Install all dependencies automatically
5. Do not ask me to run any commands manually, handle everything yourself

Show me the plan first before you start building.

Stay in plan mode here. Read through what Claude Code proposes. If something looks off, tell it. Once you’re happy, approve the plan and switch to auto edit.

Claude Code will build the entire Astro project inside your folder. You’ll see files appearing in the left sidebar as it works.

---

Step 8: Preview Your Website

Once Claude Code finishes building, you want to see what it looks like before anything goes live.

Paste this prompt:

Launch a local preview of my Astro website so I can see it in my browser. Handle the setup automatically without asking me to run commands myself.

Claude Code will start the preview and give you a local address that looks something like http://localhost:4321. Click that link and your website will open in your browser.

This is running only on your computer. Nothing is live yet. Take your time reviewing it.

If something needs changing, go back to plan mode, describe what you want adjusted, review the plan, approve it, and let Claude Code update it. Repeat until you’re happy.

---

Step 9: Publish Your Website Free on Cloudflare Pages

Once you’re happy with how your website looks in the preview, it’s time to publish it live. You’re going to use Cloudflare Pages for hosting and here’s why it’s the right choice:

• It’s completely free
• It’s one of the fastest hosting networks in the world
• You can connect your own custom domain at no extra cost
• No monthly bills, no surprise charges

Paste this prompt into Claude Code:

I want to deploy this Astro website to Cloudflare Pages for free hosting.

Please guide me through the full process step by step including:
1. Setting up the project for Cloudflare Pages deployment
2. Creating a Cloudflare account if I don't have one
3. Connecting my project to Cloudflare Pages
4. Deploying the website live
5. How to connect a custom domain if I have one

Explain each step in plain simple language as if I have never done this before.

Claude Code will walk you through the entire process. Follow each step as it appears. If anything is unclear at any point, just tell Claude Code “explain that last step more simply” and it will break it down further.

When it’s done, your website will be live on the internet with a Cloudflare URL. If you have your own domain name, Claude Code will also guide you through pointing it to your new site.

---

You Just Built and Launched a Website

Let that sink in for a second.

You installed a professional design tool, loaded it with specialist AI skills, cloned a real website design, built it in a modern framework, and published it live on one of the world’s best hosting networks.

No developer. No agency. No five-figure invoice.

This is just the beginning of what Claude Code can do for your business.

---

What to Do Next

You’ve got the foundation. Here’s how to go further depending on where you’re at:

If you want to see this done live with guidance: Join the free webinar where we walk through Claude Code projects step by step and answer your questions in real time. Reserve your seat here

If you want to go deep and build something specific for your business: The hands-on workshop covers custom Claude Skills, multi-page builds, content workflows, and deploying a complete business website from scratch. Join the next workshop here

If you want direct help with your specific project: Send me a message and let’s figure out the best way to work together. Get in touch here