// AI-POWERED WEBSITE PLANNING TOOL

Turn Your Vision Into
a Perfect Claude Prompt

Answer a few smart questions and get a single, comprehensive prompt that builds your entire website — no Figma required.

Planning Modules

~5min

To Complete

Perfect Prompt

STEP 1 OF 9 — WEBSITE FOUNDATION 0% complete

STEP 01 / 09

Website Foundation

Let's start with the basics — what kind of site are we building and who's it for?

Website Type *

Portfolio

Personal brand & showcase

SaaS / App

Software product

E-Commerce

Products & checkout

Landing Page

Single conversion page

Blog / Content

Articles & media

Agency / Services

B2B service company

Non-Profit

Mission-driven org

Local Business

Restaurant, shop, etc.

Please select a website type.

Business / Project Name *

Please enter a name.

One-line description of what you do *

Keep it punchy — this becomes your hero headline foundation.

Please enter a description.

Target Audience *

Please describe your audience.

STEP 02 / 09

Pages & Features

Which pages do you need? Select all that apply — Claude will build the full site map.

Pages to Include

Home

About

Services / Features

Pricing

Portfolio / Work

Blog

Contact

FAQ

Testimonials

Team

Case Studies

404 / Error Page

Key Interactive Features Needed

Contact Form

Email Signup

Live Chat

Pricing Calc

Search Bar

Gallery

Video

Testimonial Slider

Cookie Banner

Sticky Nav

Mobile Menu

Dark Mode Toggle

Social Feeds

Booking / Scheduling

Any specific page or feature not listed above?

STEP 03 / 09

Design & Aesthetic

Define the visual personality of your site. Claude will translate this into a complete design system.

Overall Design Vibe *

Minimal

Clean, airy, quiet

Bold

Strong, vivid, punchy

Luxury

Dark, gold, refined

Playful

Fun, bright, creative

Tech / Cyber

Dark, neon, futuristic

Corporate

Trusted, formal, solid

Editorial

Magazine, story-driven

Neobrutalist

Bold borders, raw

Please choose a design vibe.

Color Theme

Dark or Light theme preference

Dark Mode

Light Mode

Both + Toggle

Typography Personality

Bold Display

Elegant Serif

Geometric Sans

Monospace Accents

Script / Handwritten

Oversized Type

Design References / Inspiration (optional)

STEP 04 / 09

Content & Messaging

Define your brand voice and key messages. Claude will write copy for every page.

The more specific you are here, the more accurate and on-brand the generated copy will be. You can always edit the final output.

Brand Voice *

Professional

Casual & Friendly

Bold & Direct

Inspirational

Witty & Playful

Technical

Empathetic

Please select a voice.

Primary Goal / Call to Action

Free Trial / Demo

Book a Call

Buy Now

Contact / Quote

Download

Learn More

Key Value Proposition #1

Key Value Proposition #2

Key Value Proposition #3

Social Proof / Credibility Indicators

Words / Phrases to USE (your brand vocabulary)

Words / Phrases to AVOID

STEP 05 / 09

Technical Stack

How should this site be built? Claude will produce production-ready code to match.

Output Format / Technology *

HTML / CSS / JS

Single file, no build tools

React + Tailwind

Component architecture

Next.js

SSR, routing, API

Vue.js

Lightweight SPA

Vanilla JS

No frameworks, pure code

Astro

Static + islands

Please select a tech stack.

Hosting / Deployment Target

Self-hosted

Vercel

Netlify

GitHub Pages

Cloudflare

AWS

VPS

External Integrations / APIs

Stripe

Supabase

Google Analytics

Mailchimp

Calendly

HubSpot

Google Maps

YouTube

Social Share

Performance Requirements

Core Web Vitals

Lazy Load Images

Minified Code

Font Preload

WCAG Accessibility

SEO Optimized

Print Styles

STEP 06 / 09

Animations & Interactions

Define how the site moves and responds. Motion is part of your brand experience.

Animation Intensity

Subtle

Clean, quiet motion

Moderate

Professional polish

Rich

Immersive experience

Animation Effects to Include

Scroll Reveals

Hover Effects

Load Stagger

Parallax

Animated Counters

Typing Effect

Gradient Animation

Particle BG

Nav Highlight

3D Card Tilt

Custom Cursor

Skeleton Loaders

Easing Style

Smooth Ease

Spring / Bounce

Sharp & Snappy

Linear

STEP 07 / 09

Responsive Behavior

Define how the layout adapts across devices.

Primary Device Target

Mobile-First

Phone primary

Desktop-First

Full responsive

Equal Priority

All screens

Breakpoints to Target

Mobile 375px

Tablet 768px

Desktop 1280px

Large Desktop 1440px

Ultra-wide 1920px+

Mobile-Specific Behaviors

Hamburger Menu

Stacked Layout

44px Touch Targets

Hide Secondary Content

Swipe Gestures

Sticky Mobile CTA

Mobile Accordions

STEP 08 / 09

SEO & Analytics

Bake search optimization into the build from day one.

Primary Keyword / Search Term

Geographic Target

SEO Elements to Include

Meta Tags

OG Tags

Semantic HTML

Structured Data

Canonical Tags

Sitemap

robots.txt

Image Alt Text

Breadcrumbs

Analytics Setup

GA4

GTM

Conversion Tracking

Heatmap (Hotjar)

Plausible

STEP 09 / 09

Final Details

Last few specifics — then we'll generate your complete prompt.

Existing Brand Assets (optional)

Competitor Sites / Sites to Differentiate From

What MUST be included that we haven't covered?

Output Detail Level

Full Build

Complete, deploy-ready code

Prototype

Functional with real design

Spec Only

Architecture & planning

Your Complete Site Prompt

Prompt copied to clipboard — paste it into Claude.ai

Turn Your Vision Intoa Perfect Claude Prompt

Turn Your Vision Into
a Perfect Claude Prompt