A copy-pasteable prompt for a drop page in this visual system, guardrails included. It runs in Claude Code, Cursor, Framer, Lovable, v0, and Bolt, and in Beaver Builder AI.
Show the full prompt
Build a creator drop page for an independent designer releasing a pack of shader fills to a design-tool community. One product, one date, one list to join. Page archetype: creator drop and waitlist landing page, brand and lifestyle register, light cool ground.
Structure, top to bottom:
1. A plain top nav on the flat page ground: wordmark left, three text links right, in a monospace at 13px.
2. A full-bleed photographic hero about 85 percent of the viewport tall: a still-life photograph of pale dichroic iridescent film on glacier-blue paper with quiet negative space on the left. Over the quiet side, a two-layer scrim: a flat tint of the page ground at about 90 percent opacity sized to the text block, plus a gradient from that tint to transparent toward the busy side of the image. Inside the scrim: an inline byline sentence (drop number, date, read time), a headline in a semi-condensed monospace at 30 to 56px, a two-sentence deck in the serif, and two text-link calls to action, one filled cobalt. Check the headline's contrast against the busiest crop at desktop and at 390px; on mobile switch the scrim to a bottom-up gradient.
3. Along the hero's bottom edge, a launch-stage rail: eight numbered cells that anchor to the eight sections, on a translucent band with a hairline top. Below the hero, repeat those eight stages as a sticky spine in a narrow right column beside the reading column: small squares that fill ink once a stage is passed and cobalt for the current one, updated on scroll with a few lines of script. Hide the spine on narrow screens; the hero rail still works as the table of contents.
4. Sections as one reading column about 700px wide on a flat glacier-blue field, separated by hairlines, each opened by a monospace title with a small cobalt number. Items are drop rows: a solid uppercase status label on the left (Shipped with a date, or a pale Docs and Note label) and a serif title plus one or two sentences on the right. No cards, no icons, one vocabulary for the rail, the spine, and the section titles.
5. One contained overhead photograph of physical swatch chips as a plate at the top of the first item section, captioned beside it in the serif, and one strip of three square fills built only in CSS (a conic gradient, two layered radial gradients, SVG turbulence grain) whose hover and focus states shift the gradient angle, the highlight spot, or the grain opacity over 600ms. On mobile the fills scroll horizontally with snap points.
6. Long prompts or code sit behind a native disclosure element so the page never stalls on a wall of monospace.
7. End on a join block that links to a real feed or account rather than a fake form, with a small reprise of the swatch photograph.
Palette: glacier blue ground #E3EBF2, sheet white #F7FAFC for panels, navy ink #0F1B2B, cobalt #1B47C9 for the current stage, the primary button, and hover states only, steel blue #2C5C8F for italic text, hairlines #B7C7D6. Links are navy with a muted hairline underline. Spectral color appears only in the photographs and the three CSS fills, never in chrome.
Type: Martian Mono, semi-condensed, for the headline, section titles, byline, rail, labels, and code; Spectral for the deck, body, captions, and item titles, italic only for the one-line summary. Body 19px, line height 1.7, never justified.
Guardrails: no gradients on text, no glow, no dark mode, no purple-to-blue gradient chrome, radii 4 to 8px only, no left border stripes, no fake inputs or toggles, no readable text inside images, no photograph under body copy, hover and focus states on every link at about 150ms, and a prefers-reduced-motion guard that removes the fill transitions and smooth scrolling.
Replace the dichroic photographs with the material your product actually imitates, and keep the scrim measured.
