Before starting, ensure you have set up your Onepage MCP connection in Claude.
For more information on how to connect Claude and Onepage, please check the article "Connect Claude with Onepage MCP".
By combining Higgsfield AI, Claude (with MCP), and Onepage, you can turn static landing pages into immersive visual experiences.
Here is a quick overview of the tools in your new tech stack and how they collaborate:
Higgsfield AI MCP (The Visual Studio): Built directly into Claude! Higgsfield is an AI video generator designed for cinematic motion, 3D camera sweeps, and animations. Claude accesses it directly via the MCP to generate videos for you.
Claude (The Web Developer): Claude handles the actual building. Using its MCP (Model Context Protocol) connection to Onepage, Claude can directly edit, layout, and update your site behind the scenes.
The Onepage Scroll Skill (
skill.md): This is a small instruction file you upload to Claude. It gives Claude the exact design rules and code blueprints needed to trigger interactive scroll effects when your Higgsfield video is added. You can download the file here.Onepage (Your Website Platform): The home for your landing page, where your final layout and video animations go live.
How the Process Works
Since both Higgsfield and Onepage are connected directly to Claude via MCP, the entire creation process happens in a single step:
You give Claude a single prompt.
Claude instructs Higgsfield via MCP to generate a video.
Claude reads your
skill.mdand automatically builds the finished page in Onepage, complete with the scroll effect!
Let’s get your workspace set up step-by-step so you can start building.
Step-by-Step Instructions
Step 1: Add the Onepage Scroll Skill to Claude (skill.md)
To teach Claude how to correctly apply specific scroll effects for your Higgsfield videos, use our pre-configured Skill file.
Download the Skill: Download the Onepage Higgsfield Skill (.zip) file and unzip it to retrieve
skill.md.Open Claude: Go to your Claude account.
Add to Project Knowledge:
Create a New Project in Claude (e.g., "Onepage Website Builder").
Click the + icon on the right side in the project area under Files.
Upload the
skill.mdfile.
Once you added the file, it will look like this:
If you want, you can click on it and see the content:
Now Claude understands all the exact code rules and scroll mechanics required for Onepage!
Step 2: Connect the Higgsfield MCP to Claude
Instead of manually creating videos on Higgsfield.ai, you can simply connect Higgsfield directly as an MCP connector in Claude:
In your Higgsfield account, go to the MCP & CLI section.
Copy the Higgsfield Connector URL:
https://mcp.higgsfield.ai/mcpOpen Claude and navigate to Settings ➔ Connectors.
Click Add ➔ Add Custom Connector.
Name the connector Higgsfield and paste the URL.
Complete the one-time sign-in to establish the connection.
Once the tools are connected, it should look like this:
Don't forget to update the permissions to allow Claude to access your connected tools.
Step 3: The All-in-One Prompt in Claude
Now, return to your Claude chat (inside the Project where you uploaded the skill.md file):
You can now directly instruct Claude to generate the video and create the page in Onepage:
"Generate a video via Higgsfield using [video description]. Then build a new Onepage page called '[Page Name]' and embed the generated video in the Hero section using the scroll effect defined in skill.md."
Step 4: Review Your Page
Open your Onepage editor or preview link to see your new animated Higgsfield section live with scroll interaction!
Practice: From Concept to Live Page
Below you will find two example prompts that you can use in Claude to generate a video in Higgsfield via MCP. The prompts also instruct Claude to create a new section in Onepage and automatically integrate the generated video into that section.
Example 1: The "Apple-Style" Interactive Product Reveal
This example uses a dynamic 3D glass rendering to create a premium, interactive hero section that reacts as the visitor scrolls down your page.
The All-in-One Claude Prompt:
First, generate a video via the Higgsfield MCP using the following prompt: 'Cinematic slow-motion 3D render of a futuristic glass smartphone unfolding floating in zero gravity, glowing neon accents, dark obsidian background, octanerender, highly detailed, 8k resolution, smooth camera orbital motion'. After that, create a brand-new Onepage page named 'Quantum Device'. Build an elegant Hero section in Dark Mode with the heading 'The Future of Telephony', a short subheading, and a primary CTA button 'Pre-order Now'. Use the video just generated via Higgsfield as the main Hero visual and apply the interactive scroll-reveal effect from skill.md, so that the device unfolds smoothly as the user scrolls down.
Example 2: Futuristic AI SaaS Energy Loop
Perfect for modern tech tools, modern agencies, or software platforms looking for an instant "wow factor" the moment a visitor arrives.
The All-in-One Claude Prompt:
"First, generate a video via Higgsfield using the following prompt: 'Abstract liquid gold and dark chrome waves pulsing to life, cinematic volumetric lighting, deep shadows, continuous seamless loop, smooth camera dolly forward, hyperrealistic 3d motion graphic'.
Next, create a new Onepage page named 'Nexus AI'. Build a new feature spotlight section with a heading, two columns of feature points in crisp white text, and use the generated Higgsfield video as the section background. Apply the parallax scroll effect defined in skill.md so that the fluid background subtly reacts to page scrolling."
💡 Tip: Always reference `skill.md` in your prompt so Claude knows to apply the precise scroll logic to your new video asset!
Summary of how the workflow operates:
Thanks to the dual MCP integration, you control your entire design and development process directly from within Claude. Claude instructs Higgsfield to generate the video, reads the rules from your skill.md, and automatically builds your page in Onepage, complete with the scroll effect.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂