--- title: "How to Build a Website with Claude Code (and Hand It to Your Marketing Team)" slug: "build-a-website-with-claude-code" url: "https://fimo.ai/blog/build-a-website-with-claude-code" category: "Technology" date: 2026-11-13T00:00:00.000Z description: "A step-by-step guide: build a site with Claude Code, bring it into Fimo with one prompt, and invite a marketer who edits the pages without touching the code." cover: "https://fimo.ai/media/blog/uploads/2026/11/13/tSGBVLX3-build-a-website-with-claude-code--cover-dark-1794585662727.png" --- # How to Build a Website with Claude Code (and Hand It to Your Marketing Team) _A step-by-step guide: build a site with Claude Code, bring it into Fimo with one prompt, and invite a marketer who edits the pages without touching the code._ ## Key Takeaways - Claude Code can build a full website from a prompt. The hard part comes after launch, when someone who doesn’t code needs to change a headline. - Fimo gives you one prompt. Paste it into Claude Code and it brings the site into Fimo, with your framework kept as it is. - The page text moves from the code into Fimo, so a marketer can click it on the page and change it. - The marketer edits in Fimo Studio, checks a preview and publishes. Claude Code keeps working on the same code. Claude Code is very good at building a website. You describe what you want, it writes the pages, and an afternoon later you have a site that runs. Then marketing asks for a new headline, a fresh customer logo and a price change, and every one of those requests goes back to whoever runs Claude Code. This guide shows the whole path, in order: build the site with Claude Code, connect it to Fimo, and hand it to a marketer who edits it on their own. We make Fimo, so we’ll say so upfront. It takes two prompts in Claude Code and a few clicks in Fimo. You don’t need to type commands. ## What you need before you start - **Claude Code**, installed and signed in. Any plan that runs Claude Code works. The same steps work with Cursor or Codex: paste the same prompts. - **A free Fimo account.** You’ll use it in step 2. The Free plan needs no card. - **A supported framework.** Fimo works with Next.js, Astro, SvelteKit, React Router, TanStack and Vite. If you’re starting from scratch, ask Claude Code for Next.js: it’s Fimo’s default. - **The email address of the marketer** you’ll invite in step 3. ## Who does what | **Step** | **Who** | **Where** | | --- | --- | --- | | 1. Build the site | You | A prompt in Claude Code | | 2. Bring the site into Fimo | You | A prompt from Fimo, pasted in Claude Code | | 3. Invite the marketer | You | Fimo Studio | | 4. Edit the pages | Marketer | Fimo Studio | | 5. Publish | Marketer or you | Fimo Studio | ## Step 1: Build the site with Claude Code 1. Create an empty folder and open Claude Code in it. 2. Paste the prompt below, with your own company, pages and audience. 3. Look at the result, and tell Claude Code what to change until you like it. ``` Build a marketing website for [your company] with Next.js (App Router). Pages: home, pricing, about, contact. Audience: [who it's for]. Keep all page text in one place per page, so it is easy to move into a CMS later. ``` The last line isn’t required, but text grouped per page is easier to move into Fimo in step 2. ## Step 2: Bring the site into Fimo Fimo gives you the prompt. You copy it into Claude Code, and Claude Code does the rest. 1. Log in to Fimo and click **Create site**. 2. Click **Build with ChatGPT, Claude or a coding agent**. 3. Click **Copy prompt**. Or click the Claude Code icon next to “Open in a coding agent” to open the prompt there in one click. 4. Paste the prompt into Claude Code, in your site’s folder. 5. When Claude Code asks what to start from, answer: `Existing code: the site in this folder.` ![The Build with your own AI window in Fimo, with the Copy prompt button and the icons that open the prompt in a coding agent](https://fimo.ai/media/blog/uploads/2026/11/13/B3eVjLnX-claude-code-guide-hd-onboarding-prompt.png) Pierre Burgy, Fimo’s co-founder and CEO, shows this step in the Getting started video, from 1:01: [Getting started on Fimo](https://www.youtube.com/watch?v=Bw1-2JBh1Ps) Claude Code sets up Fimo, brings your site in and creates a first preview: a private, hosted copy of the site where your marketer will edit. Nothing is public yet. Claude Code won’t publish the site on its own. Publishing always waits for a person to ask for it. In our test on a small site, this took about seven minutes. Note where Claude Code says the site now lives. In our test it moved the code into a new `my-site` folder inside the original one, and that is the folder to open in Claude Code from now on. When it’s done, Claude Code gives you a link. Open it: you see your site inside Fimo Studio, with the **Invite** and **Publish** buttons at the top right. ![The site built with Claude Code, open in the Preview tab of Fimo Studio](https://fimo.ai/media/blog/uploads/2026/11/13/4LqIh8-L-claude-code-guide-hd-preview.png) Click the pointer icon, then a headline, and check that its text appears in the sidebar. If it does, the page is ready to hand over. If Studio says “Nothing to edit” instead, see the common problems at the end of this guide. **Haven’t built the site yet?** Skip step 1. Paste the same prompt into Claude Code in an empty folder, and answer `A new idea` when it asks what to start from. Claude Code builds the site in Fimo with you. **Is the site already online?** There is another way in, which starts from the site’s public address instead of its code: 1. In Fimo, click **Create site** and enter your website address. 2. Fimo scans the homepage for search engines and AI, then rebuilds it in Fimo with the problems it found fixed. Its text is editable straight away. 3. Bring in the other pages: in the **Import the rest of your site** window, click **Copy prompt** and paste it into Claude Code. It moves the other pages with their content and media, keeps your page addresses and asks you before anything is published. ![The Import the rest of your site window in Fimo, with the Copy prompt button and the icons that open the prompt in a coding agent](https://fimo.ai/media/blog/uploads/2026/11/13/Su4_RQ7l-claude-code-guide-hd-import-rest-clean.png) This path rebuilds the site in Fimo. It doesn’t link the code Claude Code wrote, and website import is still in alpha. Follow the steps above if you want Claude Code to keep working on the code it wrote. ## Step 3: Invite the marketer 1. Open the site in Fimo Studio. 2. Click **Invite** in the header. 3. Enter the marketer’s email address. 4. Choose **Can edit**. 5. Click **Invite**. ![The Invite panel in Fimo Studio, with an email address typed in and Can edit selected](https://fimo.ai/media/blog/uploads/2026/11/13/s6BnYiJT-claude-code-guide-hd-invite.png) The invitation waits in the sharing panel until they accept. Once they do, the site appears in their Sites list with a Shared badge. There are three access levels. **Can view** opens the site without changing anything. **Can edit** lets someone edit content and images, and use the AI chat to change code. **Full access** adds settings, sharing and publishing. Give **Full access** to the marketer if they should publish on their own. ## Step 4: The marketer edits the site This is the part your marketer does, with no code and no terminal. 1. Open the site in Fimo Studio, on a computer. Edit mode works on desktop only. 2. Click the pointer icon in the preview header, or press Option+E on a Mac (Alt+E on Windows). 3. Click the text or image to change. An orange outline marks it and its fields open in the right sidebar. 4. Type the new text or pick a new image from the media library. 5. Check the result in the preview. Changes save automatically and show up without reloading the page. ![Edit mode in Fimo Studio: the homepage headline is outlined in orange and its text field is open in the right sidebar](https://fimo.ai/media/blog/uploads/2026/11/13/wJd6LuFk-claude-code-guide-hd-edit-mode.png) To see every field of the page, or to add, duplicate, remove or reorder items in a list (customer logos, pricing plans, features), click **All fields** at the bottom of the sidebar. ![The All fields form open in the Fimo Studio sidebar, listing the homepage fields next to the page: hero eyebrow, hero heading, hero subtitle](https://fimo.ai/media/blog/uploads/2026/11/13/gyp9KmT3-claude-code-guide-hd-all-fields.png) This is Fimo’s [visual editor](/features/visual-editor). What a marketer doesn’t change here: colors, spacing, fonts and layout. For a design change, they can ask the AI chat in Fimo, or the request goes back to Claude Code. That split is on purpose: the design stays consistent while the words change as often as the team needs. ## Step 5: Publish the changes 1. Check the pages in the preview: text, links, images, mobile layout. 2. Click **Publish** at the top right of the site header. 3. Click **Publish** in the panel and wait until the status finishes. 4. Open the live address and check your main pages once more. ![The Publish panel in Fimo Studio, showing the site status and the Publish button](https://fimo.ai/media/blog/uploads/2026/11/13/3dYnlYhW-claude-code-guide-hd-publish.png) Saved changes don’t update the public site until someone publishes. If a publish fails, the live site keeps its previous version, and every published version can be restored from the version history. ## Step 6: Keep building with Claude Code Connecting Fimo doesn’t change how you work with Claude Code. It keeps writing code in the folder linked to Fimo (see step 2): new pages, new components, a redesign. Each time it adds a page, ask it to make that page’s content editable in Fimo too. Fimo also adds agents that look after the site once it’s live, for SEO, AI search visibility and broken links. You choose whether they publish on their own or wait for your approval on each change. Read more on the [Fimo agents page](/features/agents). ## Prefer the terminal? Claude Code runs Fimo commands behind the scenes. If you’re comfortable in a terminal, you can run them yourself, in the site’s folder: - `npx fimo@latest skills install --agents=claude-code` installs the Fimo skills for Claude Code. - `npx fimo@latest link` connects the folder to a Fimo site. - `npx fimo@latest deploy -m "feat: editable content"` opens a preview. - `npx fimo@latest invite --email "jane@yourcompany.com" --role edit` invites a teammate. The full list is in the [Fimo docs](https://fimo.ai/docs). ## Claude Code with Fimo vs a website builder Website builders such as Webflow, Framer or Wix let you build the site yourself on their canvas, with AI features to help. That’s a good fit if you want one tool and are happy to build within its limits. Claude Code writes real code in a framework you choose, which gives you more freedom, but on its own it leaves your team with no way to edit. Fimo fills that gap: Claude Code keeps writing the code, and the content becomes editable for people who don’t code. For a tool-by-tool view, see [how Fimo compares](/compare). | | **Website builders (Webflow, Framer, Wix)** | **Claude Code alone** | **Claude Code with Fimo** | | --- | --- | --- | --- | | Who builds | You, on their canvas | Claude Code | Claude Code | | Code | Stays in the builder | Yours | Hosted in a private Git repository at Fimo, which you can clone | | Marketer edits the page | Yes | No | Yes | | Hosting | Included | Set up separately | Included | ## Common problems **Studio says “Nothing to edit”.** The text of that page is still written in the code, where a marketer can’t change it. Paste this into Claude Code: ``` Load the fimo-code skill. Move the visible text and images of this page, including the header and footer, into Fimo content, so my team can edit them in Fimo Studio. Keep the design, the URLs and the rest of the site unchanged. Then deploy a new preview. Do not publish. ``` - **Claude Code is stuck on the sign-in.** It can open the sign-in page but can’t finish it. Complete it in your browser, then tell Claude Code to continue. - **The marketer can’t find edit mode.** It only works on a computer, not on a phone. The shortcut is Option+E on a Mac and Alt+E on Windows. - **A change doesn’t show on the live site.** It’s saved in the preview but not published yet. Follow step 5. ## FAQ ### Can I edit a website built with Claude Code without coding? Yes. Fimo gives you a prompt to paste into Claude Code. It brings the site into Fimo and moves the page text there. After that, anyone you invite can click the text on the page in Fimo Studio, change it and publish, without opening the code. ### Do I have to rebuild my Claude Code site to use Fimo? No. Fimo links to the site as it is and keeps your framework. The only change is that the text moves from the code into Fimo, and Claude Code does that for you, page by page. ### Which frameworks work with Fimo? Next.js, Astro, SvelteKit, React Router, TanStack and Vite. If Claude Code hasn’t built the site yet, Next.js is the simplest choice because it’s Fimo’s default. ### Can Claude Code keep working on the site after I connect Fimo? Yes. Claude Code keeps writing code in the folder linked to Fimo. Your team edits the content in Fimo Studio while Claude Code works on pages and components. ### Can a marketer break the design? No. In Fimo Studio, a marketer edits content: text, links, images and lists. Colors, spacing, fonts and layout stay in the code. Design changes go through the AI chat in Fimo or through Claude Code. ### Can an agency hand a Claude Code site to a client? Yes. The agency builds the site with Claude Code and connects it to Fimo, then invites the client from Fimo Studio. **Can edit** lets the client change content, and **Full access** also lets them publish. The agency keeps working on the code with Claude Code. ### Where is the code stored? Fimo hosts the code in a private Git repository. You can clone it to your computer at any time, from the Clone button in Fimo Studio. GitHub sync is coming soon. ### How much does it cost? Fimo has a Free plan with no card. Your own domain starts with the Starter plan at $99 per month. Claude Code is billed by Anthropic.