Customize this template
Use the reference as a creative starting point, generate media for your brand, then build and deploy your own version.
- 1
Download and inspect the references
Save the original media, then note the composition, lighting, motion, and details you want to preserve in your version.
Sign in to start seven days for $1.
- 2
Create images for your version
Upload the downloaded references to ChatGPT, add your brand and content changes, then use the image prompt below.
- 3
Recreate the motion
Give ChatGPT the video reference and the prompt below to draft a customized production prompt. Then upload the reference and generated prompt to Google Flow or another video generator.
Sign in or upgrade in the previous step to reveal the video prompt.
- 4
Build the customized website
Collect your generated images and videos. Give them and the website-building prompt to a coding agent such as Codex, Google Antigravity, or Claude.
Sign in or upgrade above to reveal the website-building prompt.
Premium membership unlocks the downloadable website bundle.
- 5
Deploy your website
Import the finished project into Vercel and deploy it. If your coding agent supports it, you can optionally follow the Vercel MCP setup guide to deploy from your workflow.
What can you learn from Cloud Hero?
Cloud Hero is a build-ready website reference for people studying saas, hero. Use its visual direction, content hierarchy, and interaction choices as a starting point for an original website built around your own audience and product truth.
Best for
- SaaS teams
- Hero teams
Patterns to study
- SaaS page hierarchy
- Hero page hierarchy
Why it works
The reference gives Cloud Hero a coherent visual point of view while keeping the main idea easy to scan.
Implementation notes
- Keep the main promise visible without animation.
- Test the reading order at mobile width.
- Use original content and assets for the finished page.