CLAUDE CODE : le guide ULTIME (même débutant)

This summary explores the capabilities of Cloud Code, a powerful tool designed to allow anyone—even those with zero programming experience—to build websites, applications, and interactive tools using simple French or English descriptions. By integrating directly into a professional workspace, it transforms natural language into functional code in minutes. ### Initial Setup and Environment To begin using Cloud Code, you require two primary components: Visual Studio Code (VS Code) and the Cloud Code extension. VS Code, developed by Microsoft, serves as the workspace. While it is the most widely used editor by professional developers, the tutorial emphasizes that non-coders will use it merely as a simple interface. After installing the free extension within VS Code, users must connect their Cloud account, which typically requires a subscription of approximately €20 per month. Once connected, the interface is divided into three functional areas: the file explorer on the left, the code editor in the center (which users can largely ignore), and the Cloud Code assistant on the right. This assistant is the primary point of interaction where users "chat" with the AI to build their projects. Before starting, users can adjust settings such as the AI model—recommending "Sonnet" for efficiency—and the "effort level," which determines how much time the AI spends refining its reasoning. ### Building a Professional Website from Scratch The core demonstration involves creating a website for "Atelier Clara," a fictional interior design studio in Bordeaux. The process begins by creating a project folder, which is essential for organizing files. The user simply describes the desired "one-page" site in plain language, requesting specific sections: a hero header with a "free consultation" button, a services section with three cards, a portfolio grid, testimonials, and a functional contact form. Cloud Code processes this request by reasoning through the architecture and generating the necessary files (like `index.html`) directly in the project folder. Users can immediately open these files in a browser to see a high-quality, modern design. ### Iteration through Visual Feedback and Plan Mode One of the most significant features highlighted is the ability to iterate using visual cues. If a design element is misaligned or an icon is missing, the user does not need to explain the technical error. Instead, they can take a screenshot, highlight the problem area, and paste it into the chat with a simple instruction like "fix this." The AI analyzes the image and the existing code to apply the correction. For more complex or "ambitious" updates, the video introduces "Plan Mode." In this setting, Cloud Code does not immediately change the code. Instead, it acts like a contractor providing a quote; it outlines a proposed "plan of action," explaining what it intends to modify and why. The user must approve this plan before any code is written, ensuring total control over the project's evolution. ### Adding Functionality and External Connections Beyond aesthetics, Cloud Code can implement real-world functionality. The tutorial demonstrates connecting a static contact form to "Formspree," a service that routes form submissions to a user’s email inbox. The AI handles the technical integration, instructing the user on how to obtain the necessary API key and then placing it correctly within the code. The tool also supports "Model Context Protocol" (MCP) connectors. This allows Cloud Code to interact with daily tools like Gmail and Google Calendar. In the demonstration, the AI retrieves the latest emails, identifies a client inquiry, drafts a professional response, checks the user’s calendar for availability, and creates a 90-minute "consultation" event—all through a text-based conversation. ### Context Management with the `cloud.md` File A critical insight shared in the video is the use of a specialized file named `cloud.md`. This file serves as a permanent brief for the AI. By storing business-specific information—such as the target audience, brand colors, pricing, and preferred tone—at the root of the project folder, the user ensures that every new chat session or sub-project inherits this context. This prevents the AI from "forgetting" the business identity and saves the user from repeating instructions. ### Deployment and Advanced Commands Once the project is complete, it must be hosted online. The video suggests using Hostinger for affordable hosting. Cloud Code assists in this final step by preparing a ZIP file of the project. The user then uploads this to the hosting provider, making the site live on a custom domain (e.g., `atelierclara.com`). The tutorial concludes with essential commands to master the tool: * `@`: Used to reference specific files, screenshots, or documents (like a Word file containing testimonials) to give the AI context. * `/model`: To switch between different AI models like "Haiku" (faster) or "Opus" (more powerful). * `/clear`: To reset the conversation context while retaining the core instructions found in `cloud.md`. * `/MCP`: To manage connections to external apps like Slack, Drive, or Notion. By combining these features, Cloud Code effectively removes the technical barrier to entry for business owners, allowing them to act as architects of their own digital tools without writing a single line of code.