Build an Interactive Cinematic Product Website

Claude Desktop

The free desktop app. You work in its Code tab, which needs a paid Claude plan such as Pro. Create an empty folder for your website, then open it there.

Download Claude Desktop

https://claude.com/download

Claude Desktop Code Local Select the project folder Open Trust Workspace

Higgsfield

A Higgsfield account with generation credits, connected to Claude. It creates your product visuals.

Open Higgsfield MCP

https://higgsfield.ai/mcp

Sign in to Higgsfield and copy the connector URL. Then, in Claude Desktop:

Claude Desktop Customize Connectors Add custom connector

Name it Higgsfield, paste the URL, then connect and sign in. Once Claude shows it as Connected, continue to Step 1.

Hostinger Hosting

You'll publish your finished website on Hostinger. Set up hosting now, or continue if you already have it.

Hostinger Hosting

Any Hostinger web hosting plan can run this static website.

Get Hostinger Hosting

Your website is ready. Now it needs a home online.

Get Hostinger Hosting

Recommended plan: Unlimited. Any Hostinger web hosting plan can run this static website.

USED IN TUTORIAL

Already have Hostinger hosting? Continue below.

Connect Hostinger to Claude

Already connected Hostinger to Claude? Skip to the next task. Otherwise, open the plugin directory:

Claude Desktop Customize Plugins Discover

Find Hostinger and install the official Hostinger plugin. Open the plugin's Connectors tab and connect Hostinger. Sign in to Hostinger in the browser window that opens and approve the access.

Then return to your website's Code session.

Publish Your Website

Send this prompt in the same Code session. Claude confirms which Hostinger website to use, publishes your site, checks it live and gives you the address. Open it, and tick this task when your website looks and works as expected.

Publish the Website to Hostinger

Publish the approved website as a static site, check it live over HTTPS, and get the live address.

Publish my approved website to my Hostinger account with the Hostinger tools. BEFORE PUBLISHING - Use the Hostinger tools from the Hostinger plugin. If they are not available, or I am not signed in to Hostinger, stop and tell me how to connect Hostinger. Never ask for my password, and never write a token or key into any file. - If .hostinger/site.json exists in this project, publish to the website it names. - Otherwise, list my Hostinger websites and ask me which one to use, or offer to set up a new website on a free temporary Hostinger domain. Never guess. Tell me that publishing replaces everything on that website, and only continue once I have confirmed it. PACKAGE - Publish the approved website exactly as it is. Do not redesign, rewrite or regenerate anything. - Check that the site folder contains every image, video and file the website uses, including every desktop and phone video version and every poster, and that nothing points to a file elsewhere on my computer, to a local address or to a temporary link. File names in the code must match the files exactly, including upper and lower case. - Package the CONTENTS of the site folder as one archive, with index.html at the top level. Never include the cinematic or product-photos folders, CLAUDE.md, .hostinger or any other project file. PUBLISH AND CHECK - Deploy the archive to the confirmed website as a static website. - Open the live address and check that it shows this website's real content, not a placeholder page. - Check that the address opens over HTTPS. If SSL is not active yet, set it up with the Hostinger tools and turn on the HTTPS redirect. - On the live website, at desktop and phone sizes, check that every image, poster and video loads from this domain over HTTPS (videos as video/mp4, and phone sizes getting the phone versions), that the scroll sequence plays forward and back and holds its frame when scrolling stops, and that the menu links and main button work. - If the deployment fails or anything on the live website is wrong, check the deployment details with the Hostinger tools, fix the cause in this project, and ask me before publishing again. Never tell me the website is live and working when a check failed — say exactly what failed. - Save the website's domain in .hostinger/site.json, so later updates go to the same website. Save only the domain — never a token or a key. When it is live, give me the live address, what you checked, and any change you had to make.

Publishing replaces everything on the Hostinger website you choose. Use a new website, or one you want to replace.

After Publishing (Optional)

Connect your own domain, or publish a change later.

Connect My Domain

Click Customize Prompt, add your domain, then copy the prompt.

Connect my domain {{DOMAIN}} to the website you just published, using the Hostinger tools. - The website is the one saved in .hostinger/site.json. If that file is missing, or you are not sure which domain I mean, ask me — never guess which website or domain to change. - First check that the domain is in my Hostinger account. If it is not, or the connection needs something only I can do, tell me exactly what to do and wait. - Change only what is needed to point the domain at this website. Leave the website itself unchanged, and do not touch any other domain settings, such as email records. - Make sure the domain opens over HTTPS, and turn on the HTTPS redirect once the certificate is active. - Only give me manual DNS steps if the Hostinger tools genuinely cannot make the change. - If the website's main domain changes, update .hostinger/site.json so later updates still go to this website. When finished, tell me whether the domain is connected, which address to open, and anything I still need to do, such as waiting for the change to take effect everywhere.

Your Domain

e.g. aurafragrance.com

Publish an Update

Click Customize Prompt, describe your change, then copy the prompt.

Update my website in three stages. Stop after stage 2 and wait for my approval. 1. CHANGE Make only this change: {{CHANGE}} Keep everything else exactly as it is, especially the approved cinematic visuals. Read the project rules in CLAUDE.md and follow them: do not regenerate approved Higgsfield images or video, and if this change genuinely needs a new paid generation, tell me what it is and its cost (as Higgsfield reports it, or say it is unknown), and wait for my yes. 2. PREVIEW - Check that the change works on desktop and on phones, that the scroll sequence still plays forward and back, and that there are no new console errors. - Show me the preview and tell me in one or two lines what you changed. - Then stop. Do not publish anything until I reply Publish. If I ask for adjustments instead, make them and show me the preview again. 3. APPROVED PUBLISH — only after I reply Publish - Publish to the same Hostinger website as before: the domain saved in .hostinger/site.json. If it is missing, ask me which website to use — never guess. - Publish exactly what I approved. Do not make any other change first. - Check that the site folder contains every file the website uses, including every video version and poster, then package the CONTENTS of the site folder as one archive, with index.html at the top level. Never include the cinematic or product-photos folders, CLAUDE.md, .hostinger or any other project file. - Deploy it to that website as a static website with the Hostinger tools. - Open the live address and check that it shows the approved change. If the old version still shows, clear the website's cache with the Hostinger tools and check again. - Give me the live URL.

Your Change

e.g. Change the hero headline to Crafted in Light