high-end-website-design

Generate cinematic hero images, looping videos, and single-file HTML landing pages.

7|2|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/MRWillisT/PullNexus --skill high-end-website-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: high-end-website-design
Source: https://github.com/MRWillisT/PullNexus/tree/main/skills/high-end-website-design
Command: npx skills add https://github.com/MRWillisT/PullNexus --skill high-end-website-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This skill solves the problem of creating premium, cinematic landing pages and slide decks when design assets and layout polish are fragmented across tools, prompts, and scattered references.

Core Features & Use Cases

  • End-to-end premium page pipeline: Generates a cinematic hero image, converts it into a seamlessly looping hero video, and then composes a single-file HTML slide/landing page with reduced-motion safety.
  • Design-system-first output: Produces an editorial-grade HTML experience with premium typography rules, consistent spacing, relative paths, and an auto-generated deck navigator for multi-slide browsing.
  • Use cases: Ideal for high-end product launches, agency portfolios, fashion/fragrance launches, cyberpunk/brutalist/editorial/vaporwave style pages, and any request that needs an AI image paired with a native looping hero video.

Quick Start

Tell the skill: Make me a high-end luxury landing page with a cinematic looping hero background for a product called "Aurora Fragrance".

Frequently Asked Questions about high-end-website-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a looping hero video background for a luxury landing page?

To create a looping hero video background for a luxury landing page, you generate a cinematic hero image, convert it into a seamless looping video using strict firstFrameUrl equals lastFrameUrl logic, and render it into a single-file HTML experience.

Can I build a presentation deck with a cinematic hero video in a single HTML file?

Yes, you can build a presentation deck in a single HTML file featuring a cinematic hero video. The process renders a production-ready HTML experience with an auto-generated deck navigator for multi-slide browsing and reduced-motion support.

What is seamless video looping logic and why is it needed for web design?

Seamless video looping logic requires setting the firstFrameUrl equal to the lastFrameUrl so the video plays without visual cuts. It is needed in luxury web design to maintain cinematic continuity across hero background loops.

Does the generated HTML output support accessibility for reduced motion preferences?

Yes, the generated single-file HTML output supports accessibility by including reduced-motion safety. This ensures users with vestibular disorders or preference settings experience a compliant presentation deck or landing page.

How do I generate an editorial-grade typography system for a high-end web page?

To generate an editorial-grade typography system for a high-end web page, the skill applies premium typography rules, consistent spacing, and relative media paths directly within the single-file HTML output during the design-system-first rendering process.

What is needed to host input frames for generating seamless looping hero videos?

Generating seamless looping hero videos requires public hosting of the first and last frame inputs. This allows the strict firstFrameUrl equals lastFrameUrl looping logic to fetch and process the images for native video conversion.