When I build a landing page from scratch, I begin by shaping a clear product narrative, then I lock the visual system, generate each section with focused prompts, and refine the final experience through spacing, motion, and hierarchy. This post shares the exact prompting framework I use to create a complete AI-assisted landing page with more consistency and better design quality.
You can view the live demo here: https://landing-1-kohl.vercel.app/.
Before writing code, I define the product name and positioning, target audience and use cases, conversion goal, brand tone, and the visual constraints that should guide the interface. Without this context, generated UI usually looks generic. With this context in place, prompts become precise, directional, and much easier to iterate on.
The following prompts are optimized for generating and maintaining a high-fidelity, architecturally inspired landing page.
This prompt creates the foundational shell of the page with an architectural framing language and technical grid detail.
Create a Next.js main layout with a heavy structural and technical aesthetic.
Use #f8f9fa as the off-white page background and place a central card wrapper
with bg-[#f4f5f6].
Implement a fixed or absolute grid system using 1px bg-gray-300 lines, then
place PlusIcon junction markers at every major border intersection.
Keep the structural lines hidden on mobile with hidden sm:block so the layout
remains clean on smaller screens.
Add a subtle drop-in entry animation for the main card using framer-motion.This prompt defines a premium sticky navigation that behaves elegantly across desktop and mobile.
Build a premium sticky Navbar.
On desktop, create a floating container that shrinks slightly on scroll and
adds a glassmorphism backdrop blur effect with rgba(255,255,255,0.7).
Use minimalist text links with a slide-in underline hover effect.
On mobile, implement a hamburger menu using Lucide React Menu and X icons, and
animate a smooth slide-down overlay menu with AnimatePresence.
Include scroll-state detection logic to trigger visual transitions cleanly.This prompt focuses on dominant typography, controlled texture, and a high-quality call-to-action interaction.
Create a Hero section that feels dominant and architectural.
Set the main heading to text-[40px] sm:text-7xl md:text-[84px] lg:text-[104px]
and animate it word by word with staggered Framer Motion entry transitions.
Add a subtle hatched repeating-linear-gradient pattern at about 8% opacity over
the background, then mask the bottom edge of the section with a smooth gradient
transition into the next content block.
Build a primary CTA button with a custom clip-path arrow hover animation.This prompt builds social proof with a structural grid and subtle brand-motion treatment.
Design a Trusted By section using a 3x2 grid that collapses to one column on
mobile, two columns on small screens, and three columns on large screens.
Add 1px gray borders between every grid item to preserve the architectural
rhythm.
Populate each cell with minimalist grayscale logo carousels that slide or flip
on a timed interval.
Add subtle hover polish that brightens each logo and introduces a faint inner
glow.This prompt turns feature content into a visual storytelling block with modular architecture.
Implement a 2x2 Bento Grid for feature storytelling with grid-cols-1 on smaller
viewports and md:grid-cols-2 on medium and above.
Style each card with bg-[#fdfdfd] and a 1px structural border.
Include an animated SVG illustration in every card, such as document scanning,
data workflow, or live chart motifs, and scale illustrations to about
scale-[0.8] on mobile to prevent overflow.
Place PlusIcon markers at each corner intersection to preserve the architectural
theme.This prompt keeps the FAQ clear, spacious, and interaction-friendly.
Create an FAQ section with strong typography and generous whitespace.
Use a vertical list structure with thin border separators between each item.
Implement smooth answer expansion and collapse with framer-motion height auto
animation.
Use a rotating plus-minus or chevron icon with subtle micro-interactions so the
state change feels obvious and refined.This prompt closes the page with a conversion-focused footer that still follows the same structural language.
Build a structural footer with a newsletter strip.
Design the newsletter as a full-width bar with a large headline and a
minimalist input field.
Below it, create a four-column layout for Product, Resources, Company, and
Brand.
Add a bottom bar that includes a pulsing green system-status indicator and
copyright text.
Keep the footer palette aligned with the main card background using #f4f5f6.Do not ask AI for the entire landing page in one shot. Generate the layout shell first, then navigation, hero, social proof, features, FAQ, and footer in sequence. When all sections are ready, run one final refinement pass for spacing rhythm, border consistency, and motion timing so the page feels designed as one system rather than separate generated pieces.
These are the final prompts I personally use for this workflow. I used Opus 4.7 during the coding process for assistance and iteration speed, and after that I completed and finalized the implementation myself.
I was not able to record every screenshot from the process, but I have provided the full prompt guide so you can follow the same workflow step by step and reproduce the final result with clarity.