Ruben Hassid’s Guide to Building Websites with Claude Code in Under an Hour

R

Ruben Hassid

LinkedIn Author

Master AI before it masters you.

In a recent LinkedIn post, Ruben Hassid outlines a method for setting up and utilizing Claude Code to build functional websites in a remarkably short timeframe. Hassid, an advocate for leveraging AI in development, shares his exact settings, prompt, and design file strategies, aiming to demystify the process for users who may not be traditional coders.

Hassid begins by emphasizing that Claude Code is no longer exclusively for experienced programmers. He details the initial steps, including downloading the Claude desktop app and navigating to the ‘Code’ tab, noting that a Pro plan subscription is necessary for this functionality.

“Claude Code is not for coders anymore.”

Streamlining the Setup Process

A key focus of Hassid’s guide is the efficient configuration of Claude Code. He highlights a little-known setting that can significantly improve workflow:

Bypassing Permissions

As Hassid notes, enabling the “Bypass permissions” setting in Claude Code is crucial. He explains that without it, users might face repeated prompts to allow actions, whereas with the setting enabled, the AI operates more autonomously.

“Off = you click ‘allow’ 30 times per session. On = Claude just works while you’re gone. (The most important step, don’t skip it)”

Connecting Essential Services

For deploying and managing website data, Hassid advises connecting Netlify and Supabase. He points out that both services offer free tiers and require only a one-time sign-in, simplifying the backend infrastructure.

“Netlify = your site goes live. Supabase = data + logins. Both free. Sign in once. Done forever. (Your plumbing runs itself from now on)”

Configuring the Development Environment

Hassid then moves on to the practical setup of the development environment within Claude Code. This includes specifying a dedicated folder for the project, selecting the Opus 4.8 (High) model, and understanding credit usage.

Prompt Engineering for Development

A significant portion of Hassid’s strategy involves a detailed prompt designed to position Claude as a virtual CTO. He provides instructions on how to obtain this prompt from his resource, how-to-ai.guide, emphasizing its role in guiding the AI through the development process based on plain English goals.

“You’re my CTO. I don’t read code. Just build it…. Give it one goal, in plain English. It interviews you. You just click your answers.”

Iterative Development and Branding

The process described by Hassid involves an iterative loop of identifying issues and providing feedback in plain English, often accompanied by screenshots for bug fixes. He suggests that the time spent iterating should not exceed the time it would take to build the feature manually.

Applying Professional Branding

To ensure the AI-generated website doesn’t look generic, Hassid includes a step for applying professional branding. By downloading design files from resources like getdesign.md, users can make their sites visually resemble established brands such as Stripe, Notion, or Linear. This, according to Hassid, is a critical differentiator for AI-generated sites.

Hassid concludes with a pro tip to always include “Use AskUserQuestion” in prompts, which prompts Claude to ask clarifying questions. He also reiterates the steps for accessing his comprehensive prompt library.

📝 About This Content

This article is based on insights shared by Ruben Hassid on LinkedIn.

📅 Originally posted on July 7, 2026 | View original post on LinkedIn →