How to Write AI Prompts That Actually Build the Website You Want

The Gap Between What You Ask and What You Get

You open Claude or Cursor, type "build me a SaaS landing page," and hit enter. What comes back looks like every other generic SaaS landing page on the internet. Dark background, purple gradient, three feature cards, a CTA button. It technically works, but it's not your website.

The problem isn't the AI. The problem is the prompt. Vague prompts produce vague results — every time, without exception.

Why Specificity Wins

AI coding tools are pattern-matching engines trained on millions of websites. When you say "landing page," the model averages all the landing pages it has ever seen and gives you the median result. When you say "a SaaS landing page for a developer productivity tool called LaunchKit, targeting senior engineers, dark theme with a purple-to-coral gradient, built in Next.js 16 with Shadcn/UI" — it has enough constraints to build something specific.

The more constraints you add, the less the AI has to invent, and the closer the output is to what you actually want.

The Anatomy of a Great Website Prompt

A production-ready website prompt should cover six areas:

1. Project identity What is it called, what does it do, who is it for? One clear paragraph is enough: "LaunchKit is a CLI tool that helps senior engineers manage monorepo workspaces. Target audience: developers at mid-to-large tech companies who use pnpm workspaces and turborepo."

2. Tech stack — be version-specific "Next.js" is not enough. Say: "Next.js 16 App Router, TypeScript strict mode, Tailwind CSS v4, Shadcn/UI with zinc base color, Supabase for auth and database, deployed to Vercel." Every word here eliminates a decision the AI would otherwise make randomly.

3. Design system Colors (hex codes), typography (font families and sizes), spacing scale, border radius, shadow style. Spell it out: "Background #0A0A0F, primary #6C47FF, surface #14141C, border #2A2A3A, heading font Plus Jakarta Sans, body font Inter."

4. Page structure List every page and its key sections. "Homepage: hero with headline + subtitle + CTA button + terminal animation, features section with 6 cards in a 3x2 grid, pricing section with 3 tiers, footer." This is your sitemap turned into a build brief.

5. Features and functionality Auth (which provider?), payments (Stripe? which model?), realtime (Supabase channels?), search (basic filter or full-text?), file uploads, notifications. Name them explicitly.

6. Code conventions "TypeScript strict mode, named exports only, colocate component tests, use Zod for all form validation, React Hook Form for form state, no default exports except for page components."

Before vs After

Weak prompt: "Build a portfolio website for a developer."

Strong prompt: "Build a portfolio website for Alex Chen, a full-stack developer specializing in TypeScript and distributed systems. Target audience: engineering hiring managers at Series B–D startups. Theme: glassmorphism, dark background #050508, white/translucent cards with backdrop-blur, Inter font. Pages: home (animated hero with typed name + role, project grid, skills), projects/[slug] (case study layout), about (timeline of experience), contact (form with EmailJS). No database. Deploy to Vercel. Tailwind v4, no component library."

The strong prompt produces a first draft you can actually ship. The weak prompt produces a template you'll spend hours fixing.

Let WebPromptify Do the Work