More screenshots

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Award Winning Web Design

    1

    Create award-caliber websites with signature motion, scroll storytelling, and bold, grid-breaking layouts.

    Free

    8 installsSecurity scanned
    Award Winning Web Design

    Award Winning Web Design

    Example session with this skill installed

    Design a high-end landing page concept for a luxury mechanical keyboard brand. Focus on a 'wow' hero section and scroll-driven storytelling.

    • Read your context and instructions
    • Compiled the award winning web
    • Generated the image

    I have designed a high-impact landing page concept for the luxury keyboard brand, focusing on a cursor-reactive hero moment and a staggered, scroll-linked product reveal.

    Design Direction: The Kinetic Tactile Experience

    ElementSpecification
    Signature MomentCursor-Reactive Hero: An oversized 3D render of a single keycap that rotates slightly to follow the mouse, with kinetic typography (8vw font-size) that slides behind the object.
    Motion PaletteStaggered Reveals: 0.8s duration, [0.22, 1, 0.36, 1] quintic easing. Elements do not fade; they slide up 20px while opacity scales from 0 to 1.
    InteractionMagnetic Buttons: CTA buttons have a 20px magnetic pull radius. The custom cursor morphs into a hollow circle when hovering over the product gallery.
    Layout RiskAsymmetric Grid: Product specs are placed on a broken 12-column grid, with technical diagrams overlapping the high-resolution photography.
    TypographyHeader: Clash Display (Bold). Body: Inter (Medium).
    Color Palette#0A0A0A (Deep Obsidian), #E5E5E5 (Platinum), #FF4D00 (Safety Orange Accent).

    Implementation Guidance

    For the hero animation, use GSAP or Framer Motion to map the mouse x/y coordinates to the rotation of the hero image. Ensure the pointer-events: none property is applied to the kinetic type so it doesn't interfere with the magnetic button interaction.

    // Example Easing for GSAP
gsap.to(".hero-title", {
  y: 0,
  opacity: 1,
  duration: 1.2,
  ease: "expo.out",
  stagger: 0.1
});

    Next steps

    1. Select a high-fidelity 3D asset for the central hero component.
    2. Map the scroll-progress to the "Exploded View" section of the keyboard components.
    3. Apply the accessibility checklist to ensure the motion can be disabled via prefers-reduced-motion.

    award-winning-web-design.png

    PNG · 1536×1024

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    The problem

    Standard LLM design outputs often feel like generic templates. They lack the motion craft, signature interactions, and bold layout risks required for high-end digital experiences or portfolio-grade websites.

    What it does

    • Identifies a single signature "wow" moment for a project to ensure the design remains focused and premium.
    • Choreographs motion sequences using staggered reveals and specific easing values to avoid cheap-looking animations.
    • Provides concrete directions for breaking the grid via asymmetric layouts, overlapping elements, and kinetic typography.
    • Integrates subtle interaction details like magnetic buttons and morphing custom cursors to reward user attention.
    • Balances expressive design with performance and accessibility checklists to ensure the site is functional, not just flashy.

    Frameworks & tools

    Designed for frontend developers using Framer Motion, GSAP, Tailwind CSS, Three.js, and modern React/Next.js stacks.

    Why this beats prompting it yourself

    General prompts usually result in "safe" layouts with basic fade-ins. This skill applies specific motion principles and layout techniques inspired by Awwwards and FWA standards, focusing on the small numeric choices in easing and timing that define high-end craft.

    Use cases

    • Designing an immersive landing page for a premium hardware product.
    • Building a high-impact creative portfolio with seamless page transitions.
    • Creating a scroll-driven storytelling experience for a brand launch.
    • Pitching a concept that needs to stand out from generic SaaS templates.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    8 installs

    Downloaded by developers to date

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 20 days ago

    • Free to download with an account

    Listed20 days ago

    What's inside

    Frequently Asked Questions