Code · Claude Sonnet 5.5
The hero section from the skill, for Hero.md
The hero section from the skill, for Hero.md, built around the wired hero image. Reference (Hero.md): # Hero - **Product:** Driftline, a sleep-tracking ring that reads your night and gives you a calm morning summary - **For:** Light sleepers and busy people who want better rest without a screen by the bed - **Headline:** Sleep deeper. Wake clearer. - **Subline:** Driftline is a quiet ring that tracks your sleep all night and turns it into one simple morning score. No screen, no fuss, just rest. - **Button:** Order Driftline - **Link:** See how it works - **Proof:** Rated 4.8 stars by 12,000 sleepers - **Look:** Midnight navy background, a soft blue glow as the accent on the button, and a refined serif headline with a clean sans for the small text Reference (website-hero SKILL.md): --- name: website-hero description: Designs and builds a website's hero section, the first screen, with a hero image made for the layout, a headline that says what it is, one clear action and proof, as one responsive HTML section. Use for landing page heroes, product launches, above-the-fold sections and homepage headers. --- # Website hero ## Read first Hero.md for the product, the words, the proof and the look; the design reference, product photo and logo wired in. ## Hero image (16:9) - Made for the layout: the subject on the right third (unless Hero.md says otherwise), and a calm, empty area on the left where the headline will sit. - One subject, one light, the palette from Hero.md; a product photo wired in is kept exactly as it is. - No words, logos or interface in the picture. ## The section - One HTML file: a slim nav (the logo or name, three or four links, one button), then the hero filling the first screen (100svh, at least 640 px tall), with semantic markup, styles scoped under one root class and CSS custom properties. - A headline of at most eight words saying what it is and for whom, a subline of one or two sentences, one primary button and one quiet secondary link, and the proof from Hero.md under them when it gives a real one (never a placeholder or a note). - The wired hero image large: behind the words with a scrim on their side, or beside them; it covers its box without stretching, positioned so the subject stays in view at every width. - Type with presence: the headline at 56 to 88 px on desktop (clamp()), tight leading, at most two typefaces, and the accent colour on the button only. - A gentle entrance: the words rise and fade in over 600 ms, staggered, and stay put with prefers-reduced-motion. - Responsive from 360 px: on phones the nav becomes a menu button, the image sits above or behind the words with a scrim, and the button is full width. ## Avoid Lorem ipsum, more than one primary button, centred walls of text, stock-photo clichés, words over a busy part of the picture, a hero shorter than the screen, and made-up customer logos.
Meng To@shadownessguy0097- Model
- Claude Sonnet 5.5
- Made by
- Meng To
- Shared
- Likes
- 0
Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.
