How to build websites with Claude Code · The complete Vibe Coding guide.

Think about how you used to build websites until today: you approach a web developer, explain what you want, get a mockup, send feedback, get a version, and send feedback again. A week of ping-pong and at least 3,000 shekels. Every single time. Vibe Coding changes the entire game. You open Claude Code, talk to it for 30 seconds about what you want on the website, and it builds. Within a few minutes, you have a live website with images, buttons, a gallery, and customer experiences. Everything you are used to seeing on a standard website. This guide is the essence of what we learned in session 4 of the Claude Code workshop. We will learn the 3 methods for website design, the 3 tools you must install before starting, how to upgrade the visuals from generic-AI to a premium site, and how to deploy the site live to Vercel.

What you will have by the end of the guide

• A live website on the internet · with a temporary Vercel domain (you can connect your own domain later)
• An organized workflow with Claude Code · knowing how to give it a prompt, how to work in Plan Mode, and when to approve
• Design methods in your toolkit · free transcription to Claude, inspiration from an existing site, and components from 21st.dev
• Skills installed on Claude · a website with accessibility, privacy, and a premium design instead of generic-AI
• Full code backup in GitHub · if something breaks, you roll back with a click
• A ready database infrastructure in Supabase · if you want to collect emails, save orders, or any information

Step 1 · The 3 tools to install before starting

Vercel

Cloud deployment · The website is live on the internet

The default for deploying static websites and Next.js. Without Vercel, the website Claude builds for you will sit only on your computer at localhost:3000 · no one else will see it. The moment you tell Claude 'deploy to Vercel', it pushes the code, deploys to the cloud, and returns a public URL that you can share.

Tip for agents: After signing up, go back to Claude → Customize → Connectors → Browse Connectors → Vercel → Connect. This is how Claude can deploy websites with a click.

Supabase

Database · Memory for the website

Postgres + Auth + Storage. Instead of running a server to save emails, orders, or any information · Supabase gives you all of this with a click. If you want a contact form on the website that saves all inquiries, a mailing list, or a small store · this is the software responsible for saving the information.

Tip for agents: Like Vercel · connect the connector in Customize → Connectors. The name of the connector is Supabase. The free account is enough for 99% of personal projects.

GitHub

Code backup · Like Google Drive for your website

GitHub stores all the website code online. If something breaks, if Claude makes a mistake you cannot undo, or if you want to work on the website from another computer · GitHub keeps the entire history. Whenever you want · you tell Claude 'backup to GitHub' and it pushes the latest version.

Tip for agents: Your repositories are saved as Private by default · only you have access. If you want to share the code with another developer · you can switch to Public with a click.

💡 All three tools together · cost zero shekels for beginners. Only if you want a website with high traffic (thousands of users a day), or an exceptionally large database · then there are paid plans. For 99% of personal and small business projects · the free plan is enough.

Step 2 · Method 1 · Dump everything that comes to your mind (transcription to the model)

Speakly

Transcription tool · Speak, and organized text is created

The best software for transcribing spoken Hebrew to text. Press a shortcut key on the keyboard (for me, the F-Key), the microphone opens, you speak everything that comes to mind, and release. The organized and accurate text automatically enters any application you work with · Claude, chat, email, Word.

Tip for agents: The recommended key on Mac: F-Key (Fn). On Windows · you can set Caps Lock or another key. The shortcut is convenient · just grab, speak, release.

How to start a new project in Claude

Example prompt · A website for custom insoles (for copying and editing)

I want to build a website that fits shoe insoles. I want the website to be in my style · futuristic, breathing, with clear fonts and very, very clear contrast. Shades: monochrome · white, black, gray. Futuristic blue accent. I want as little visual clutter as possible. I want there to be pictures of athletes, maybe pictures of running soldiers, so people understand the direction. I want there to be customer experiences · people rating from Google and recommending the product. I might want places where there will be a video of a recommending customer. If I don't have that · just leave an empty placeholder so I can fill it myself. I want there to be a WhatsApp access button so they can reach a representative as quickly as possible. In the Hero · I want there to be an image of an insole floating in space. If you cannot create such an image for me · just create a prompt to feed into an image model and we will generate it. Work in Plan Mode. Show me the plan. After I approve · proceed to construction.

🎯 Important · Always start in Plan Mode (button at the bottom of Claude). This saves you piles of tokens · Claude presents a work plan before it rushes to build, and you can correct before it invests effort. We saw in Plan Mode how it presents all the colors, fonts, and section order · and then we approve.

Step 3 · Method 2 · Inspiration from an existing site

GoFullPage

Chrome extension · Full page screenshot of a website

A free Chrome extension that captures the entire page in one long image. Click the camera icon · it automatically scrolls the entire website, captures each section, and combines them into one continuous image. You can download as PNG or PDF. Especially useful for getting inspiration from websites without taking 20 manual screenshots.

Tip for agents: After capturing · the extension opens a new page with the full image. Click the download icon (down arrow) and select PNG. Now you have an image to work with.

The prompt to feed into Claude along with the inspiration image and link (for copying)

Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [Paste the inspiration site link here] [In addition · drag the Full Page image into Claude] Work in Plan Mode. Show me the plan · which sections you start with, in what order, which components you replicate. After I approve · proceed to construction. Build the site part by part, not all at once · this way it will turn out closer to the original.

⚠️ This is inspiration · not copying. We take the visuals and the structure, but replace the content, images, and products with our own. You can also replace the colors and fonts. This way your website looks as professional as a site you liked · but it is yours.

Step 4 · Method 3 · Components from 21st.dev (Frankenstein method)

21st.dev

Component library · Premium designs from the community

Thousands of UI components from a community of leading designers. Each component includes a live preview, code, and a Copy Prompt button. Click the button · the prompt is copied. Paste into Claude · Claude builds the component on your website. Most components are free, some are premium.

Tip for agents: A golden tip · before taking a component, think if it integrates with the overall design language of the website. A pretty component that doesn't fit · ruins the coherence. It is better to have 3 connected components than 10 scattered ones.

Workflow with 21st.dev

• Go to 21st.dev. Sign in with Google, 5 seconds process.
• Browse categories like Hero, Buttons, Cards, Galleries, Animations, etc.
• Find a component you like and view the live preview on the page.
• Click the blue Copy Prompt button at the top.
• Return to your Claude, paste, and press Enter.
• Claude builds the component on your site. Check localhost:3000 to verify it matches what 21st showed.

Step 5 · Skills · The difference between generic AI and a premium website

⚖️ Particularly important · Accessibility and privacy. In Israel, a website that does not comply with accessibility standards (IS 5568) exposes its owner to a lawsuit of up to 50,000 NIS. A privacy policy is mandatory under the Privacy Protection Law. These are not optional, they are legal requirements. Skills solve this with a single click.

Where to download skills · The 2 leading repositories

skills.sh

Official Anthropic repository · Thousands of skills

The main repository for community skills. Browse by categories (Website, Marketing, Productivity), find a suitable skill, and verify it has the Trust Hub Pass label, indicating the code was reviewed and is safe. You can see how many downloads a skill has. The more downloads, the more popular and likely of higher quality it is.

Agent tip: Always check for the Trust Hub Pass label before installing to avoid downloading a skill that might perform unintended actions on your computer.

agentskills.co.il

Israeli repository in Hebrew · Skills tailored to the local market

The Israeli repository features skills adapted to Israeli regulations (privacy, accessibility), the Hebrew language, and the local market. All skills are free. It is definitely worth reviewing everything before starting a new site for Israeli audiences.

Agent tip: If your essential skill is Israeli accessibility, you should also run a manual check after installation. The Israeli standard is strict, and sometimes the skill is just a starting point, not a final solution.

The 9 recommended skills for every new website

AI Master Club opens the door for you: A live meeting every week, recordings, and a community. 47 NIS per month, cancel anytime.

Israeli Privacy Shield

Website privacy regulation in Israel

Solves the legal requirement for a privacy policy under the Privacy Protection Law. The skill adds a cookie banner, a full privacy policy, and user consent management. Mandatory for every Israeli website.

Israeli Accessibility Compliance

Website accessibility according to standard IS 5568

Implements accessibility according to IS 5568 and WCAG 2.1 AA standards. Adds an accessibility button, checks contrast and alt text, and ensures keyboard navigation. Without this skill, you face exposure to a lawsuit of up to 50,000 NIS.

Agent tip: The skill is an excellent starting point, but the Israeli standard is strict. It is recommended to perform an additional manual check after installation to ensure full compliance.

Hebrew Content Writer

Professional Hebrew content writing

A skill for writing content in Hebrew without translations from English and without AI clichés. It writes in a direct, high-converting style that speaks the language of the Israeli audience. Worth its weight in gold for landing pages and marketing content.

UI/UX Pro Max

User experience · 50 styles, 161 color palettes

The most comprehensive skill for user experience featuring 50 design styles, 161 color palettes, 57 font pairs, and top industry UX rules. Claude's default visual selection receives a hundredfold upgrade.

OKLCH Color Engine

Colors that do not look generically AI-generated

A skill that improves the website's color palette. It uses an advanced color space (OKLCH) to create professional palettes that do not look like an AI built it. An instant upgrade to visual quality.

Emil Kowalski Skill

User experience based on leading designers

A skill based on the work of Emil Kowalski, one of the world's leading designers from Linear and Vercel. His focus is on micro-interactions, subtle animations, and details that turn an ordinary website into an experience.

Interface Details

Details that make the difference in layout

A skill based on an article by Jakub.kr about the details that make an interface feel right. Spacing, typography stabilization, micro-spacing, and all the small nuances that distinguish an amateur site from a premium one.

Web Design Guidelines

Vercel Labs · Over 250,000 weekly installs

A web design skill with over 250,000 weekly installs, from Vercel Labs, the de facto standard for AI web design. If you install only one skill for a new website, make it this one.

Refero Design Styles

Design rules from leading websites

Design style library based on the world leading websites · Apple, Linear, Notion, Stripe and more. Choose a style, Claude implements it. A fast way to get the aesthetics of a global company.

Step 6 · Deployment · The site is live on the internet

🌐 The temporary domain will be something like `my-project-xyz123.vercel.app`. If you want your own domain (`mydomain.com`), buy it from SiteGround, GoDaddy, or Cloudflare, and ask Claude to connect it to Vercel. This is a 10-minute process with DNS records. If you want · I will upload a separate video explaining this.

What to do after the site is live

• **Send the link to a few friends** · Ask for feedback. Things you miss after looking at the code 50 times · they see in one click.
• **Replace all placeholders with real content** · Your photos, customer videos, correct phone numbers.
• **Back up to GitHub** · Tell Claude 'back up this code to a private GitHub'. That way if something breaks in the future · you have a way to restore.
• **Connect your own domain** (optional) · If you want to look professional.
• **Add analytics** · Tell Claude 'add Google Analytics 4 to the site'. This lets you see who is browsing and from where.

What you can build with Vibe Coding · 8 ideas

8 projects created with Claude Code in 45 minutes

• **Business landing page** · Strong Hero, product explanation, customer testimonials, WhatsApp CTA button.
• **Portfolio website** · Project gallery, personal story, contact form. Relevant for freelancers and content creators.
• **Lead Magnet** · Page offering a gift (guide, checklist), collecting emails, sending via Make to RavMaser.
• **Event website** · Event details, countdown, registration, map.
• **Small store** · Product catalog, checkout via Stripe or Cardcom.
• **Subscription or course site** · User registration, content access, personal area. Built on Supabase.
• **Internal business dashboard** · Graphs, data, quick actions. For your office.
• **Client website** · You build, you charge. With 21st.dev and skills · the client will not believe it is not a professional designer.

Frequently asked questions

Yes, Claude understands Hebrew very well. You can talk to it in Hebrew, write in Hebrew, and the sites it builds come out in professional Hebrew. The only thing it sometimes struggles with is RTL (right-to-left direction) · especially when mixing English inside Hebrew text. The Hebrew Content Writer skill helps especially with this.

The basic Claude subscription ($20/month) is enough for building a single site. With a Pro subscription ($100/month) you can build multiple sites a day. The three tools (Vercel, Supabase, GitHub) are free. The skills are free. In short · a professional site costs you a few hours of work and nothing more. The skills solve accessibility and privacy in a click.

You can always fix things. Tell Claude 'this button is too big', 'the Hero look does not fit', 'change the primary color to blue'. It changes only the specific part, it does not start from scratch. You can do endless iterations until it comes out the way you want. The tip · work in small changes, test each one before moving to the next.

Yes. After the site is deployed to Vercel, tell Claude 'I have a domain mydomain.com that I bought at X. Connect it to the Vercel project'. It will guide you to update DNS records at the domain provider (SiteGround, GoDaddy, Cloudflare). A 10-20 minute process, and then the site is live on your domain.

WordPress, Wix, Webflow · You choose a ready-made template, drag elements, limited to what the system allows. The site looks 'templated'. Vibe Coding · Claude writes dedicated code for your site. There is no limit to components, design, or functionality. Want a unique animation? A feature you have not seen anywhere? A special integration? · Claude will build it. In addition · the code is yours, you own it, no vendor lock-in.

Yes. Tell Claude 'add a store to the site with 5 products, connected to Cardcom or Stripe'. It builds the store, the shopping cart, the checkout, and connects to the payment API. You need to open an account with the payment provider, pass the keys to Claude, and it finishes everything.

Low risk · Every time something changes, Claude creates a new commit in GitHub. If something breaks · tell Claude 'go back to the last working version'. It will find the previous commit and restore it. In addition · Vercel saves all previous deployments, you can revert to any version in 2 clicks. In short · it is hard to break something permanently.

Yes. Two options · 1) Use Supabase for email storage, then connect to RavMaser, Resend, or Mailchimp through Make or direct API. 2) Put a form that connects directly to your newsletter tool. Tell Claude 'add an email form to the site that connects to RavMaser'. It handles the whole technical side.

💪 Want guidance along the way?