What this is: Two prompts — one high-level, one extremely specific — that get you an editorial, ultra-modern landing page in a single shot from Claude Opus 4.7. Plus the thinking behind why they work.
The experiment
I was curious what the current frontier model could do if you gave it real creative latitude instead of pixel-perfect specs. Most "build me a landing page" prompts read like design documents — exact colors, exact fonts, exact spacing. That tests instruction-following. It doesn't test taste. So I tried two prompt styles on the same brief:
- A high-level prompt — vibes, constraints, a few "don'ts." Let the model make every meaningful decision itself.
- A master prompt — every decision pre-made. Typography, palette, motion, structure, copy. Essentially a design doc in prose.
Both should produce something shippable. But they test very different things — and if you're using AI to build real product, knowing which prompt style fits which situation matters.
Prompt 1 — The high-level version
Use this when you want to see what the model's actual design sense is. Output will vary run to run. That's the point.
Build a single-file HTML landing page for an invisible or abstract
product — a fragrance house, a literary imprint, a record label, a
tea merchant, a philosophy journal. Pick one. The product should
not require photography to sell; it should be sold through language,
color, and motion.
Aesthetic direction: ultra-modern editorial. Think the intersection
of rauno.me's motion restraint, a Comme des Garçons press site's
editorial confidence, and the typographic maximalism of an
independent art magazine. It should feel like it was designed by a
two-person studio in Paris or Tokyo, not generated.
Commit to a strong point of view. Avoid:
- Generic SaaS aesthetics (centered hero, three-column features,
purple gradients)
- Sans-serif-everything (Inter, Roboto, Space Grotesk)
- AI-obvious choices (neon glows, glassmorphism, isometric
illustrations, floating 3D orbs)
- Decorative animation that doesn't serve the concept
Commit to:
- Typography as the primary visual. Use a variable serif with
expressive axes (optical size, weight, italic) as the hero of
the page. Pair with one supporting typeface for metadata.
- Color as structure, not decoration. Full-bleed saturated panels
earn more trust than accent colors on white.
- A conceptual spine for the page — a metaphor native to the
product that organizes the sections. Don't default to
hero/features/pricing/CTA.
- Grain, noise, or texture that keeps flat colors from looking
sterile.
- Motion that feels physical and considered. Pick your spots — one
signature scroll-linked effect matters more than ten
micro-interactions.
Technical:
- Vanilla HTML, CSS, JS. No build step.
- GSAP + ScrollTrigger for orchestration
- Lenis for smooth scroll
- Google Fonts only
- Responsive down to mobile
Include real editorial copy. No lorem ipsum, no "elevate your
senses" marketing language. Write like a human with a point of view.
Dates, prices, place names, numbered editions — the small details
that signal a real brand.
One HTML file. Treat every decision — typeface pairing, palette,
structural metaphor, motion choices, copy voice — as yours to make.
The only wrong answer is playing it safe.
Why this prompt works
It specifies the problem, not the solution. "Invisible or abstract product" is a constraint that forces the model to pick something where its design instincts actually matter. A sunglasses brand would let it lean on product shots. A fragrance or literary imprint forces it to solve with typography and color alone.
The "avoid" list is doing heavy lifting. Design quality from LLMs is mostly about what they don't reach for. Banning Inter, purple gradients, glassmorphism, and isometric illustrations eliminates ~80% of generic output. The "commit to" list then gives permission to be bold in the remaining space.
"The only wrong answer is playing it safe" — LLMs default to hedging when given creative latitude. That closing line explicitly flips the incentive.
What to expect
Run this on Claude Opus 4.7 and you'll get a fully-formed brand concept — not just styling. In my runs I got a niche fragrance maison called SÈVE structured around the three acts of a perfume (top, heart, base), a literary imprint with a three-part manifesto structure, and a tea merchant organized around the six Chinese tea families. Each with its own palette, typography, and copy voice. Variation is the point. If the model picks the same concept twice in separate sessions, it's pattern-matching, not reasoning about the brief. Opus 4.7 doesn't do that here — genuine different outputs.
Prompt 2 — The master prompt
Use this when you want a specific, reproducible output. This is the version you'd use in production — when you've already decided the direction and you need the model to execute it precisely. This prompt is built around one concept (SÈVE — a fragrance house) and locks in every decision.
Build a single-file HTML landing page for SÈVE, a fictional niche
fragrance house. Production-grade, ultra-modern editorial aesthetic
inspired by rauno.me, Comme des Garçons press sites, and Awwwards
SOTD winners. Use vanilla HTML/CSS/JS — no React, no build step.
BRAND CONCEPT
SÈVE is a slow-craft perfume maison. Tagline: "Composed slowly."
The landing page is structured like a fragrance itself — three
acts: Top (Tête), Heart (Cœur), Base (Fond). Each act is a
full-bleed saturated color panel representing a scent. No product
photography of bottles. Materials only.
Voice: editorial, confident, slightly cold. Uses em-dashes.
Capitalizes French words. Roman numerals for dates. Prices in
euros (€220–€340).
TECH STACK (CDN only, no npm)
- GSAP 3.12.5 + ScrollTrigger (cdnjs)
- Lenis 1.1.13 smooth scroll (jsdelivr)
- Google Fonts: Fraunces (variable, with opsz/SOFT/WONK axes)
+ JetBrains Mono (300, 400, 500)
- Inline SVG noise filter via data URI (fractalNoise, 0.9
baseFrequency, 0.08 alpha, mix-blend-mode: multiply)
TYPOGRAPHY
- Hero title: Fraunces, weight 300, clamp(5rem, 25vw, 26rem),
line-height 0.82, letter-spacing -0.06em. One accent character
italic + different optical size + colored.
- Panel titles: Fraunces 300, clamp(4rem, 14vw, 14rem). One
letter per title italic with opsz 9.
- Body: JetBrains Mono, 0.75rem, letter-spacing 0.05em,
line-height 1.9, opacity 0.75.
- Labels: mono uppercase, 0.65rem, letter-spacing 0.25em.
- Metadata prefixed with em-dash.
COLOR SYSTEM
--ink: #111110 (warm near-black)
--paper: #f4efe6 (warm cream, not white)
--accent-top: dusty peach (bergamot)
--accent-heart: cadmium red (rose oud)
--accent-base: deep forest (vetiver)
Each scent panel takes over 100vh with its accent color as
full-bleed background. Text inverts (paper on dark, ink on light).
PAGE STRUCTURE
1. Fixed nav with mix-blend-mode difference (inverts against
every background)
2. Progress bar — 2px, scrubs with scroll, mix-blend difference
3. Hero — meta labels, massive title with per-char hover, three-
column footer (subtitle / body / CTA)
4. Three scent panels — each 100vh, 12-col grid: label top-left,
Nº top-right, huge title + price, quote + notes left, editorial
image + secondary image right, ingredients + buy bottom
5. Marquee between panels — Fraunces at 8vw, infinite horizontal
loop, scroll velocity couples to speed
6. Philosophy section — image + large italic manifesto paragraph
7. Contact sheet — 8-cell grid, grayscale default, color on hover
8. Footer — giant ghost "brand name" behind link columns
MOTION SYSTEM
- Lenis smooth scroll (duration 1.4, custom easing)
- Custom cursor with gsap.quickTo lag-follow, expands 6x on panel
hover, shows contextual label
- Hero char stagger (0.12s, power4.out)
- Scroll-linked variable font weight (wght 200 → 400) on panel
titles as they enter viewport — signature detail
- Clip-path image reveals (inset 0 0 100% 0 → inset 0)
- Counter-parallax between primary and secondary images
- Marquee timeScale coupled to ScrollTrigger.getVelocity()
CRITICAL DETAILS — DO NOT SKIP
- Noise overlay via SVG data URI, mix-blend multiply
- Warm paper bg (#f4efe6), never pure white
- Warm ink (#111110), never pure black
- French accents preserved, Roman numeral dates
- Em-dashes instead of colons for metadata
- Grain is non-negotiable — it's what keeps flat colors from
looking AI-generated
Single HTML file. Ship it.
Why this prompt works
Version-lock the dependencies. "Use GSAP" gets you GSAP 3.x whatever. "Use GSAP 3.12.5 from cdnjs" gets you a version that actually works with the Lenis version you specified. Version-locking eliminates the "it compiles but nothing animates" failure mode.
Put the non-negotiables last. LLMs drop subtle details when building large single-shot outputs. The "CRITICAL DETAILS — DO NOT SKIP" block at the end primes the most important constraints into short-term memory before the model starts generating.
Describe motion by what it feels like, not just what it does. "Scroll-linked variable font weight animation from wght 200 → 400 as panel enters viewport — signature detail" is more useful than "animate font weight." The framing of why a motion exists shapes how the model implements it.
On Claude Opus 4.7's capabilities — what actually changed
A few honest observations from using this for real design work. Not a benchmark post.
Taste under ambiguity. The high-level prompt is where the capability gap really shows. Ask Opus 4.7 to build something editorial with latitude, and it will reach for Fraunces or Instrument Serif, pick a warm off-white over pure white, use mix-blend-mode: difference on navigation, add a noise layer without being asked. These are the exact decisions a designer who reads It's Nice That would make. It doesn't pattern-match to "landing page design" — it pattern-matches to "what would the Are.na crowd do here."
Motion orchestration. Earlier Claude models could write GSAP code. Opus 4.7 can write GSAP code that feels right — knowing when to use power3.out vs power4.out, when scrub:1 serves the moment vs. scrub:0.5, when a stagger should be 0.08s vs 0.15s. These micro-decisions are what separate "it animates" from "it feels expensive."
Long single-shot outputs. A full landing page with 600+ lines of HTML/CSS/JS in one generation, with no dropped details between the opening and closing braces. Earlier models would forget the responsive breakpoint by the time they got to the footer. Opus 4.7 holds the full composition in its head.
The specific detail it got right that surprised me: scroll-linked variable font axis animation. I didn't explicitly ask for it — the high-level prompt just said "variable serif with expressive axes." It inferred that a variable font in 2026 is meant to be animated and wired it into ScrollTrigger without prompting. That's taste, not capability.
Where it still needs handholding. Copy. The default voice is still mildly "AI editorial" — a bit too self-aware, a bit too "crafted for those who understand." I rewrite about 40% of the copy from the master prompt version. The high-level version tends to be better here because the model isn't trying to nail a specific brand voice it's been over-briefed on.
The prompt size threshold. On Opus 4.7, both prompts single-shot reliably. On smaller/older models (Sonnet 3.5, GPT-4o), the master prompt works but the high-level one collapses into generic output. The capability being tested is really restraint — knowing when not to add a feature, when not to reach for a cliché. Smaller models can't resist.
How to use this
If you're shipping a real brand
Start with the high-level prompt. Generate 3-5 variations. Pick the concept and direction you like. Then write your own master prompt locking in the decisions you want to keep. The best output isn't either prompt on its own — it's the high-level prompt's concept refined into a master prompt you can iterate on.
If you're learning
Run the high-level prompt on two or three different models. Watch how taste differs. Claude Opus 4.7, GPT-5, and Gemini 2.5 Pro will each pick different products, different metaphors, different palettes. That comparison is more educational than any design blog.
If you want to remix
Swap "fragrance house" for your actual domain. A niche coffee roaster, a Kashmiri textile label, a Vedic astrology imprint, a record label. The structural advice (typography-first, color as structure, conceptual spine) generalizes. The specifics don't.
Further reading from me
- Figma MCP + Claude Code: Setup Guide
- Guide: Build Your First Personal AI Agent in Claude Code
- Build Your Own Karpathy Wiki — From Scratch
If you remixed this, send me the URL. I'd genuinely like to see what domain you applied it to. DMs open at @deepika.builds.
