WEBSITE DESIGN JUMPSTART PROMPT Use this prompt as a jumping-off point, not a rigid template. You do NOT have to copy every section exactly. Rename sections, remove sections, reorder sections, combine sections, or only use the parts you like. Adapt the design to your own brand, audience, product, service, app, or idea. Anything inside [BRACKETS] is meant to be replaced with your own information. Do not invent real company names, real prices, real customer claims, or personal details unless I explicitly provide them. -------------------------------------------------- PROJECT BASICS -------------------------------------------------- Create a polished, modern website for: Brand or company name: [YOUR BRAND NAME] Product, service, app, or project name: [YOUR PRODUCT NAME] What it does: [DESCRIBE WHAT YOUR PRODUCT / SERVICE / TOOL DOES] Who it is for: [DESCRIBE YOUR AUDIENCE] Main goal of the page: [SELL A PRODUCT / EXPLAIN A SERVICE / SHOWCASE A TOOL / GET SIGNUPS / BOOK CALLS / BUILD TRUST / OTHER] Primary call to action: [YOUR MAIN CTA] Secondary call to action: [YOUR SECONDARY CTA] -------------------------------------------------- IMPORTANT CREATIVE DIRECTION -------------------------------------------------- Treat the site like a real, finished website. Do not describe it as a mockup, demo, fake site, example site, or concept unless I specifically ask you to. Do not add explanatory text telling visitors how the site was built. Do not copy every section mechanically. Use this as a design and layout reference, then make smart adjustments for the project. If a section does not make sense for my project, replace it with something that does. If I only want one or two sections from this prompt, build only those sections. -------------------------------------------------- OVERALL VISUAL STYLE -------------------------------------------------- Create a dark, polished, premium interface with a professional but slightly futuristic feel. The site should feel custom and intentional, not like a generic SaaS template. Suggested visual direction: Main background: [YOUR MAIN BACKGROUND COLOR] Secondary panel color: [YOUR PANEL COLOR] Primary accent: [YOUR PRIMARY ACCENT COLOR] Secondary accent: [YOUR SECONDARY ACCENT COLOR] Positive / success color: [YOUR SUCCESS COLOR] Warm accent: [YOUR WARM ACCENT COLOR] Primary text: [YOUR PRIMARY TEXT COLOR] Muted text: [YOUR MUTED TEXT COLOR] Border style: thin semi-transparent borders Use: - strong contrast - dark panels - subtle gradients - soft glows only around important interactive elements - rounded corners - clean spacing - clear visual hierarchy - tasteful shadows - polished hover states Avoid: - excessive neon - giant empty spaces - low-contrast text - overly bright glassmorphism - random decorative clutter - generic template-looking layouts -------------------------------------------------- TYPOGRAPHY -------------------------------------------------- Body font: [YOUR BODY FONT] Heading / display font: [YOUR HEADING FONT] Suggested modern pairing: Inter for body copy Space Grotesk for headings, labels, and badges Headlines should be: - bold - clean - highly readable - tightly tracked where appropriate - large without overwhelming the layout Avoid decorative fonts unless they fit the brand. -------------------------------------------------- 1. TOP NAVIGATION -------------------------------------------------- Create a polished horizontal navigation bar. Left: [YOUR LOGO OR BRAND NAME] Navigation links: [LINK 1] [LINK 2] [LINK 3] [LINK 4] [LINK 5] Optional right-side actions: [SIGN IN / CONTACT / LOGIN / SECONDARY ACTION] [PRIMARY CTA BUTTON] Home link: [YOUR HOME PAGE URL] Keep the navigation clean, dark, professional, and easy to scan. -------------------------------------------------- 2. FULL-WIDTH HERO SECTION -------------------------------------------------- Use a full-width hero image as the background of the entire hero section. Hero image path: [YOUR HERO IMAGE PATH] Example: assets/images/your-hero-image.jpg The image should: - use background-size: cover - span the full hero width - sit behind the hero content - include a dark overlay for readability - use subtle ambient accent lighting Hero eyebrow: [SHORT LABEL OR CATEGORY] Main headline: [YOUR MAIN HEADLINE] Optional highlighted words: [WORDS TO ACCENT WITH A GRADIENT OR COLOR] Hero supporting copy: [YOUR HERO DESCRIPTION] Primary button: [PRIMARY CTA] Secondary button: [SECONDARY CTA] Optional compact stat cards: [STAT 1] [STAT 2] [STAT 3] Optional small information card: [CARD TITLE] [CARD COPY] If stats or an information card do not fit the project, remove them. -------------------------------------------------- 3. MAIN PRODUCT / TOOL / CONTENT AREA -------------------------------------------------- Create one large primary content area beneath the hero. Use one or two columns depending on the content. LEFT SIDE OR PRIMARY CONTENT: [DESCRIBE THE MAIN INTERACTIVE TOOL, FORM, PRODUCT, SERVICE, OR CONTENT] RIGHT SIDE OR SUPPORTING CONTENT: [DESCRIBE RESULTS, SUMMARY, PREVIEW, BENEFITS, VISUALS, OR SECONDARY CONTENT] For an interactive tool, consider: - tabs - sliders - number inputs - text inputs - dropdowns - toggles - live calculations - summary cards - charts or visual allocation bars Only include controls that actually make sense for the project. Every visible control should work. -------------------------------------------------- 4. OPTIONAL CATEGORY / ITEM SYSTEM -------------------------------------------------- If users need to add their own categories, items, services, tasks, expenses, or custom entries, include: Section title: [ADD YOUR OWN ...] Short explanation: [WHY USERS MIGHT ADD CUSTOM ITEMS] Input: [NAME YOUR CATEGORY / ITEM / SERVICE] Button: [+ ADD CATEGORY / + ADD ITEM / + ADD SERVICE] When a custom item is added: - display it immediately - start blank or at a neutral default - allow the user to edit it - include it in calculations or totals if relevant - allow removal when appropriate Do not prefill personal data. -------------------------------------------------- 5. PRIMARY ACTION AREA -------------------------------------------------- If the page includes calculations or interactive results, include a clear action such as: [CALCULATE] [GENERATE] [UPDATE] [COMPARE] [BUILD] [SAVE] If live updating makes sense, update automatically while also keeping the main action button. -------------------------------------------------- 6. VISUAL SUMMARY OR ALLOCATION CARD -------------------------------------------------- Optional section title: [SUMMARY TITLE] Possible content: - total value - category percentages - progress - allocation - comparison - status - live breakdown Use a clean visual bar or simple chart only if it helps users understand the information faster. Do not add charts just for decoration. -------------------------------------------------- 7. PRACTICAL INSIGHT / EDUCATION CARD -------------------------------------------------- Include a short text-only insight card if helpful. Title: [INSIGHT TITLE] Copy: [SHORT PRACTICAL MESSAGE THAT HELPS THE USER UNDERSTAND WHAT THEY ARE SEEING] Keep this concise. Do not lecture the user. Do not repeat controls that already exist elsewhere on the page. -------------------------------------------------- 8. RESULTS / OUTPUT SECTION -------------------------------------------------- Create a results section if the project produces an outcome. Possible fields: [RESULT 1] [RESULT 2] [RESULT 3] Use dynamic text where useful. Examples: - positive state - negative state - neutral state - progress state - completion state Style results clearly so the most important number or outcome is immediately obvious. -------------------------------------------------- 9. FEATURE STRIP -------------------------------------------------- Optional compact feature cards: Feature 1: [FEATURE TITLE] [FEATURE DESCRIPTION] Feature 2: [FEATURE TITLE] [FEATURE DESCRIPTION] Feature 3: [FEATURE TITLE] [FEATURE DESCRIPTION] Feature 4: [FEATURE TITLE] [FEATURE DESCRIPTION] Remove any feature card that does not add value. -------------------------------------------------- 10. GET THE PROMPT / DOWNLOAD SECTION -------------------------------------------------- Optional section title: Want to Build Something Like This? Suggested copy: Use this prompt as a starting point for your own website. Rename sections, change colors, replace the copy, remove anything you do not need, or copy only the pieces you like. Download button: Download the Website Starter Prompt Download file: [YOUR PROMPT FILE PATH] Example: assets/prompts/website-design-jumpstart-prompt.txt -------------------------------------------------- 11. FOOTER -------------------------------------------------- Keep the footer minimal. Brand: [YOUR BRAND NAME] Copyright: [YOUR COPYRIGHT TEXT] Footer links: [LINK 1] [LINK 2] [LINK 3] [LINK 4] -------------------------------------------------- FUNCTIONAL REQUIREMENTS -------------------------------------------------- Build the page with: [HTML / CSS / VANILLA JAVASCRIPT / REACT / OTHER] If no framework is required, prefer HTML, CSS, and vanilla JavaScript. Every visible control should work. If the page includes forms, sliders, tabs, calculations, or custom categories: - inputs must update correctly - sliders and exact number fields should stay synchronized when both are present - totals should update live when appropriate - buttons should work - custom items should be addable and removable - calculations should not show NaN, undefined, or broken values - start user-entered values at neutral defaults unless I specify otherwise - do not insert fake personal data - do not require a backend unless the project actually needs one -------------------------------------------------- RESPONSIVE BEHAVIOR -------------------------------------------------- Desktop: [DESCRIBE DESKTOP LAYOUT] Tablet: [DESCRIBE TABLET LAYOUT] Mobile: - stack content into one column where needed - keep text readable - keep buttons easy to tap - keep number inputs compact - avoid horizontal overflow - preserve all important functionality -------------------------------------------------- DESIGN QUALITY CHECK -------------------------------------------------- Pay close attention to: - spacing - hierarchy - alignment - border radius consistency - hover states - focus states - readable contrast - input sizing - button sizing - card proportions - responsive layout - polished slider design - avoiding oversized empty boxes - avoiding unnecessary sections The finished site should feel like a real, polished product or business website. Again: this prompt is only a jumping-off point. Change anything that needs changing. Rename sections. Remove sections. Reorder sections. Use only the pieces you like. Replace all [BRACKETED PLACEHOLDERS] with information that fits your own project.