The Definitive Guide to Writing Prompts That Work
Master the art of AI prompting with comprehensive templates, real-world examples, pro tips, and common mistakes to avoid. Everything you need to go from prompt novice to power user.
The prompt is everything. In the world of AI-powered development, the quality of what you build is directly proportional to the quality of how you communicate with AI.
This handbook is your complete guide to mastering AI prompting for JustCopy.ai and beyond. Whether you are building landing pages, full-stack applications, or anything in between, the techniques here will help you get better results faster.
Think of AI prompting like giving directions to a skilled builder. If you say "build me a house," you will get a generic house. But if you specify "a modern 3-bedroom home with an open floor plan, floor-to-ceiling windows facing south for natural light, a minimalist kitchen with white cabinets and marble countertops, and a wraparound deck" - now the builder knows exactly what you want.
The same principle applies to AI. Vague prompts produce vague results. Specific, well-structured prompts produce exactly what you envision, often exceeding your expectations.
Good prompts reduce back-and-forth from 10+ attempts to 1-2
Specific prompts match your mental image almost perfectly
Well-prompted outputs need minimal polish
Master these five core principles, and you will write better prompts than 90% of users.
The more specific your prompt, the more accurate the AI output. Vague prompts lead to generic results.
Make a websiteCreate a SaaS landing page for an email marketing tool with a dark theme, hero section with email capture, and 3 pricing tiersTell the AI who the target audience is, what problem you are solving, and the overall goal.
Build a dashboardBuild an analytics dashboard for e-commerce store owners to track sales, inventory, and customer behaviorInclude visual preferences like colors, style, mood, and layout to guide the design.
Make it look niceUse a minimal design with lots of whitespace, Inter font, subtle shadows, and a purple (#8B5CF6) accent colorEnumerate specific sections, features, or components you need included.
Add some sectionsInclude: hero with CTA, feature grid with 6 items, testimonials carousel, pricing table, FAQ accordion, and footer with social linksDescribe interactive behaviors, animations, and user flows explicitly.
Make it interactiveAdd smooth scroll navigation, hover animations on cards, form validation with inline errors, and a sticky header on scrollEvery highly effective prompt contains these essential building blocks, assembled in a logical order.
Create a SaaS landing page for "TaskMaster" - a project management tool that helps remote teams collaborate more effectively. Target: Small to medium tech companies with distributed teams Goal: Drive free trial signups Include: - Hero with headline, subheadline, and email capture form - Social proof bar with customer logos - 4 feature cards with icons and descriptions - "How it works" section with 3 steps - Testimonials carousel with photos and quotes - Pricing table with Free, Pro, and Enterprise tiers - FAQ accordion with 6 questions - Footer with links and newsletter signup Design: - Style: Modern, clean, professional - Colors: Dark theme (#0F0F0F background), purple accent (#8B5CF6) - Typography: Inter font, large headlines (48px+) - Lots of whitespace between sections Functionality: - Smooth scroll navigation - Sticky header that appears on scroll up - Form validation with inline errors - Hover animations on cards (subtle lift + shadow) - FAQ items expand/collapse on click
Copy these battle-tested templates and customize them for your projects. Each has been refined through thousands of successful builds.
Use this comprehensive template for any project. Fill in the brackets with your specific requirements.
Create a [TYPE OF PAGE/APP] for [COMPANY/PRODUCT NAME] that [MAIN PURPOSE/GOAL]. Target Audience: [WHO WILL USE THIS] Problem Solved: [WHAT PAIN POINT IT ADDRESSES] Required Sections: - [Section 1 with details] - [Section 2 with details] - [Section 3 with details] - [Section 4 with details] Design Requirements: - Style: [modern/minimal/bold/playful/corporate/luxurious] - Color scheme: [primary color, accent color, or mood] - Typography: [serif/sans-serif/specific font] - Layout: [single page/multi-page/dashboard] Functionality: - [Interactive feature 1] - [Interactive feature 2] - [User flow detail] Reference: [Similar sites or styles for inspiration]
Perfect for quick prototypes and MVPs when you need to move fast.
Build a [TYPE] for [USE CASE]. Must have: - [Essential feature 1] - [Essential feature 2] - [Essential feature 3] Style: [STYLE DESCRIPTION] Primary CTA: [MAIN ACTION USER SHOULD TAKE]
Optimized for conversion-focused landing pages with clear structure.
Create a high-converting landing page for [PRODUCT/SERVICE]. Hero Section: - Headline: "[YOUR HEADLINE]" - Subheadline: "[SUPPORTING TEXT]" - CTA Button: "[BUTTON TEXT]" - Visual: [image type or description] Social Proof: - [Testimonials/Logos/Stats] Features Section: - Feature 1: [Name] - [Description] - Feature 2: [Name] - [Description] - Feature 3: [Name] - [Description] Objection Handlers: - FAQ or guarantee section addressing [COMMON CONCERNS] Final CTA: - [OFFER OR URGENCY ELEMENT] Design: [STYLE] theme with [COLOR] accents Optimize for: [mobile conversions/desktop/both]
Structured template for building SaaS product interfaces and dashboards.
Build a [TYPE] SaaS application interface for [PRODUCT NAME]. Main Navigation: - [Nav item 1] - [Nav item 2] - [Nav item 3] Dashboard View: - Key metrics: [Metric 1], [Metric 2], [Metric 3] - Charts: [Chart type for what data] - Recent activity: [What to show] Core Features: - [Feature 1 with functionality details] - [Feature 2 with functionality details] - [Feature 3 with functionality details] User Actions: - [Primary action users take] - [Secondary actions] Settings/Account: - [Settings options needed] Design System: - Theme: [light/dark/system] - Primary color: [HEX] - Border radius: [px] - Spacing: [compact/comfortable/spacious]
Template for e-commerce pages with all essential shopping elements.
Create an e-commerce [homepage/product page/collection page] for [BRAND NAME] selling [PRODUCT TYPE]. Header: - Logo, search, account, cart - Navigation: [Categories] Hero/Featured: - [Promotion or featured collection] Product Display: - Grid/List view with: image, name, price, [additional info] - Filtering by: [Filter options] - Sorting by: [Sort options] Product Card Features: - Quick view, wishlist, add to cart - [Show ratings/reviews/badges] Trust Elements: - [Shipping info, returns policy, secure payment badges] Footer: - [Links, newsletter, social, contact] Style: [Brand aesthetic] Colors: [Brand colors]
Showcase your work professionally with this portfolio template.
Build a portfolio website for [NAME], a [PROFESSION/ROLE]. About Section: - Bio highlighting [KEY ACHIEVEMENTS] - Skills: [Skill 1], [Skill 2], [Skill 3] - [Photo style: professional/casual/illustrated] Work/Projects: - Display format: [grid/case studies/timeline] - Each project shows: [title, description, image, link, tech used] - Categories: [Category 1], [Category 2] [Experience/Testimonials]: - [Work history or client testimonials] Contact: - [Form fields needed] - Social links: [Platforms] Style: [Creative/minimal/corporate/technical] Personality: [Adjectives describing your brand] Color scheme: [Colors that represent you]
Perfect for cloning a site you like and customizing it for your needs.
Clone [URL] with these modifications: Keep: - [Element to keep 1] - [Element to keep 2] - [Layout structure] Change: - Colors: [New color scheme] - Branding: [New company name, logo placeholder] - Content: [What content to replace] Add: - [New section or feature] - [Additional functionality] Remove: - [Elements to remove] Make it suitable for: [Your use case/industry]
Build a reusable component library for consistent design.
Create a component library with the following components: Button Component: - Variants: primary, secondary, outline, ghost - Sizes: sm, md, lg - States: default, hover, disabled, loading Card Component: - Variants: [list variants] - With: image, title, description, actions Form Components: - Input (text, email, password, number) - Textarea, Select, Checkbox, Radio - With validation states [Additional Components]: - [Component 1 with variants] - [Component 2 with variants] Design Tokens: - Colors: primary [HEX], secondary [HEX], accent [HEX] - Typography: [Font family], sizes [scale] - Spacing: [Scale] - Border radius: [Values] - Shadows: [Elevation levels]
See exactly how professionals prompt for different types of projects. These are ready to use or adapt for your needs.
Best for: SaaS product launches, AI tools marketing
Create a modern SaaS landing page for "WriteGenius" - an AI writing assistant for content marketers. Hero Section: - Headline: "Write 10x Faster with AI That Understands Your Brand" - Subheadline: "Generate blog posts, social content, and marketing copy that sounds like you - in seconds" - CTA: "Start Writing Free" (primary) and "Watch Demo" (secondary) - Show a mockup of the app interface Social Proof Bar: - "Trusted by 10,000+ marketers at:" followed by 5 company logos Features Grid (3 columns): 1. Brand Voice AI - Learns your tone and style 2. SEO Optimization - Built-in keyword suggestions 3. Team Collaboration - Share and edit with your team How It Works (3 steps): 1. Describe what you need 2. AI generates options 3. Edit and publish Testimonials: - 3 testimonial cards with photo, quote, name, title, company Pricing Table: - Free: 5,000 words/month, basic features - Pro ($29/mo): 50,000 words/month, brand voice, SEO - Team ($99/mo): Unlimited words, 5 seats, analytics FAQ Section: - 5 common questions about AI writing tools Footer: - Links, newsletter signup, social icons Design: Dark theme (#0A0A0F background) with purple (#8B5CF6) accents Style: Clean, minimal, lots of whitespace Animations: Subtle fade-in on scroll, hover effects on cards
Best for: B2B services, professional firms, agencies
Build a premium consulting agency website for "Strategos Partners" - a strategy consulting firm. Navigation: - Logo, Services, Case Studies, About, Insights, Contact - Sticky header with blur background on scroll Hero: - Large typography: "Transform Strategy Into Results" - Subtle background: abstract geometric animation or gradient mesh - CTA: "Schedule a Consultation" Services Section: - 4 services in a grid: 1. Corporate Strategy 2. Digital Transformation 3. Operations Excellence 4. M&A Advisory - Each with icon, title, brief description, and "Learn More" link Case Studies: - 3 featured case studies as large cards - Show: Client industry (anonymized), challenge, result (e.g., "+340% Revenue Growth") - Hover to reveal "Read Case Study" button About/Team: - Brief firm description - 4 partner profiles: circular photo, name, title, LinkedIn Insights/Blog: - 3 recent articles: thumbnail, category tag, title, date Contact: - Split layout: contact form on left, contact info + map on right - Form: Name, Email, Company, How can we help? (textarea) Footer: - Minimal with links, copyright, privacy policy Design: Sophisticated, premium feel Colors: Black, white, and gold (#C5A572) accents Typography: Playfair Display for headings, Inter for body Spacing: Generous whitespace Animation: Smooth scroll, subtle parallax on hero
Best for: Product detail pages, DTC brands, electronics retail
Create a product page for premium wireless headphones "SoundMax Pro" on an electronics e-commerce site. Product Gallery: - Main image with zoom on hover - 5 thumbnail images below - 360-degree view button - Video thumbnail for product video Product Info: - Brand: SoundMax - Title: SoundMax Pro Wireless Headphones - Rating: 4.8 stars (2,847 reviews) - clickable to jump to reviews - Price: $349 (was $449) with "Save $100" badge - Color selector: Midnight Black, Pearl White, Navy Blue (each changes main image) - Quantity selector - "Add to Cart" primary button - "Add to Wishlist" secondary button Key Features (icons + text): - 45-hour battery life - Active Noise Cancellation - Spatial Audio - Premium leather cushions Tabs: - Overview (detailed description) - Specifications (table format) - Reviews (with filter by rating) - Q&A Related Products: - 4 product cards in a carousel Trust Badges: - Free 2-day shipping - 30-day returns - 2-year warranty - Secure checkout Sticky Add to Cart Bar: - Appears on scroll with product name, price, and add to cart button Design: Clean, modern, product-focused Colors: White background, black text, blue (#0066FF) accents Make the product the hero - lots of space around it
Best for: Productivity tools, project management, team software
Build a project management dashboard interface similar to Linear meets Notion. Sidebar (collapsible): - Logo at top - Search bar (Cmd+K hint) - Sections: - Inbox (with notification count badge) - My Tasks - Projects (expandable list) - Teams (expandable list) - Settings - User avatar and dropdown at bottom Top Bar: - Breadcrumb: Team > Project > View - View toggle: Board | List | Calendar - Filter button - Sort dropdown - "New Task" button (primary) Main Content (Kanban Board View): - 4 columns: Backlog, To Do, In Progress, Done - Column headers show task count - Task cards with: - Title - Priority badge (P1 red, P2 orange, P3 yellow) - Assignee avatar - Due date (red if overdue) - Tag/label - Comment count icon - Drag and drop visual feedback - "Add Task" at bottom of each column Task Quick View (slide-in panel): - Title (editable) - Status dropdown - Assignee dropdown - Due date picker - Priority selector - Description (markdown) - Subtasks checklist - Comments thread - Activity log Design: - Dark theme (#0D0D0D background, #1A1A1A cards) - Purple (#8B5CF6) for primary actions - Clean, minimal UI - Keyboard navigation hints - Smooth animations on interactions
Best for: Restaurants, cafes, bars, local dining establishments
Create a website for "Sakura" - an upscale Japanese restaurant. Hero: - Full-screen background video of sushi preparation (or high-quality food image) - Overlay with restaurant name "Sakura" in elegant typography - Tagline: "Authentic Japanese Cuisine" - Two buttons: "View Menu" and "Reserve a Table" About Section: - Split layout: image of chef on left, text on right - Brief story about the restaurant and head chef - Philosophy of authentic, seasonal ingredients Menu Preview: - Category tabs: Sushi, Sashimi, Hot Dishes, Drinks - 6-8 items per category with: - Beautiful food photo - Dish name (Japanese + English) - Brief description - Price - "View Full Menu" link Gallery: - Masonry grid of restaurant interior, dishes, and ambiance - Lightbox on click Reservations: - Embedded reservation widget or form - Date picker, time selector, party size - Special requests textarea - Phone number for direct booking Location: - Map embed - Address, hours of operation - Parking information Footer: - Newsletter signup for special events - Social media links (Instagram especially) - Contact information Design: - Elegant, sophisticated - Colors: Black background, white text, gold (#C9A050) accents - Typography: Mix of Japanese-inspired and elegant serif - Lots of high-quality food photography - Subtle animations - Mobile-first (many restaurant searches are mobile)
Best for: Developer portfolios, tech professionals, engineers
Build a developer portfolio for a full-stack engineer with 5 years experience. Hero: - Terminal-style introduction with typing animation: "Hi, I'm Alex Chen. I build things for the web." - Brief tagline about specialization - CTA buttons: "View Projects" and "Get in Touch" - Social links: GitHub, LinkedIn, Twitter About Section: - Professional photo - 2-3 paragraphs about background and interests - Tech stack icons (React, Node.js, Python, AWS, PostgreSQL, Docker) Projects Section: - 4-6 featured projects as cards: - Screenshot/preview image - Project name - Brief description (2 lines) - Tech tags - Buttons: "Live Demo" and "GitHub" - Each project expandable or links to detailed case study Experience Timeline: - Vertical timeline of work history - Company logo, role, dates, brief description - Key achievements as bullet points Blog/Writing (optional): - 3 recent articles: title, date, read time - Link to full blog Contact Section: - "Let's work together" heading - Contact form: name, email, message - Or display email directly - Response time expectation Footer: - Copyright, social links, "Built with [tech]" Design: - Dark theme (works well for developers) - Green (#00FF88) accent color (terminal-inspired) - Monospace font for code elements, sans-serif for body - Smooth scroll - Easter egg: Konami code triggers a fun animation - Mobile responsive with hamburger menu
These insider techniques will elevate your prompts from good to exceptional.
Before writing your prompt, visualize exactly what you want the final result to look like. The clearer your mental picture, the better your prompt will be.
Instead of starting to type immediately, spend 30 seconds thinking: "I want a landing page that feels premium and trustworthy, with a hero that immediately shows the product value, testimonials that build credibility, and a clear path to sign up."
Mention specific websites or styles you admire. This gives the AI a clear benchmark for design quality and direction.
"Create a landing page with Linear's minimal aesthetic and Stripe's clear value proposition structure. Use the hero layout style from Vercel's homepage."
Always include specific color codes rather than general descriptions. "Blue" can mean hundreds of different shades.
"Use a dark theme with #0A0A0F as the background, #FFFFFF for primary text, #888888 for secondary text, and #6366F1 as the accent color."
For interactive elements, describe all states: default, hover, active, disabled, loading, error, and success.
"The submit button should have: default (blue background), hover (slightly darker blue), loading (show spinner, disable clicks), success (green with checkmark), error (red with shake animation)."
Always specify mobile behavior. Over 50% of web traffic is mobile, and AI might optimize for desktop by default.
"On mobile: collapse navigation into hamburger menu, stack feature cards vertically, make CTAs full-width, and ensure tap targets are at least 44px."
Do not try to get everything perfect in one prompt. Start with the structure, then refine styling, then add interactions.
Prompt 1: "Create a pricing page with 3 tiers" → Prompt 2: "Add monthly/annual toggle" → Prompt 3: "Highlight the Pro tier as recommended" → Prompt 4: "Add feature comparison table below"
Sometimes specifying what NOT to do is as important as what to do.
"Do NOT include: stock photo-looking images, generic lorem ipsum text, overly complex animations, or more than 3 font sizes."
The same information can be presented in vastly different ways. Define the tone for copywriting.
"Write copy that is: conversational but professional, confident without being arrogant, benefit-focused rather than feature-focused, and uses active voice."
Learn from others' errors. These are the most frequent prompting mistakes and exactly how to fix them.
Vague prompts force the AI to make assumptions, which often do not match your vision.
Make me a nice website for my businessCreate a SaaS landing page for a project management tool targeting remote teams. Include hero with value proposition, 4 feature cards, pricing table with 3 tiers, and customer testimonials. Use a dark theme with purple accents.Trying to build an entire complex application in one prompt leads to overwhelmed AI and poor results.
Build a complete e-commerce platform with user accounts, product management, shopping cart, checkout, payment processing, order tracking, admin dashboard, inventory management, and analyticsStart: "Build an e-commerce product listing page with filters and product cards." Then: "Add a shopping cart sidebar." Then: "Create the checkout flow."Not specifying mobile behavior leads to websites that only work well on desktop.
Create a dashboard with a sidebar, charts, and tablesCreate a dashboard with: collapsible sidebar (hidden by default on mobile), charts that resize responsively, tables that scroll horizontally on small screens, and a mobile-friendly bottom navigation as alternative to sidebarWithout style guidance, you get generic, template-looking designs.
Build a portfolio websiteBuild a portfolio website with minimal design: lots of whitespace, large typography (48px+ headlines), subtle hover animations, black and white with one accent color (#FF6B35), and a grid-based layout for projectsFocusing only on UI elements without considering the user journey and interactions.
Add a contact formAdd a contact form with: name (required), email (required, validate format), message (required, min 10 chars). Show inline validation errors on blur. Disable submit button until valid. On submit: show loading state, then success message with checkmark, and reset form after 3 seconds.Words like "nice," "modern," or "clean" mean different things to different people.
Make the design modern and cleanMake the design minimal with: no gradients, single accent color, card shadows using only black at 5% opacity, 8px border radius, 24px spacing between sections, and Inter font familyLeaving content to AI imagination results in generic placeholder text that needs replacing.
Add a hero section with headline and descriptionAdd a hero section with headline: "Ship Products 10x Faster" and subheadline: "JustCopy.ai turns your ideas into deployed websites in under 2 minutes. No coding required."Thinking the first output should be exactly what you want leads to frustration.
Create my entire website exactly as I envision itCreate the initial structure, then: "Make the header sticky", "Change hero background to gradient", "Add more padding between sections"Ready to level up? These advanced strategies are used by power users to achieve exceptional results.
Establish design tokens and patterns at the start to ensure consistency across all subsequent prompts.
Before building pages, establish your design system: "Use this design system for all components: Tokens: - Primary: #6366F1 - Secondary: #EC4899 - Background: #0A0A0F - Surface: #1A1A1F - Border: #2A2A2F - Text Primary: #FFFFFF - Text Secondary: #A0A0A0 Spacing: 4px base (4, 8, 12, 16, 24, 32, 48, 64) Border Radius: 6px (buttons), 8px (cards), 12px (modals) Shadows: 0 2px 8px rgba(0,0,0,0.3) for elevated elements Typography: - Font: Inter - H1: 48px/1.2, font-weight 700 - H2: 32px/1.3, font-weight 600 - Body: 16px/1.6, font-weight 400 Now create a [component/page] following these patterns."
Build reusable components before assembling full pages for better consistency and flexibility.
"First, create these base components: 1. Button component with variants: - Primary (filled), Secondary (outlined), Ghost (text only) - Sizes: sm, md, lg - With optional left/right icon slots 2. Card component with variants: - Basic (just padding and border) - With header and body sections - Interactive (hover state, click target) 3. Input component: - Text, email, password types - With label, helper text, error message slots - Focus and error states Then use these components to build the signup page."
Define all possible states and transitions for complex interactive components.
"Create a multi-step checkout flow with these states: States: 1. Cart Review - Shows items, quantities, subtotal - Actions: Update quantity, Remove item, Proceed to shipping 2. Shipping Info - Form: Address, city, zip, country - Actions: Back to cart, Continue to payment - Validation: All fields required 3. Payment - Form: Card number, expiry, CVV - Shows order summary sidebar - Actions: Back to shipping, Place order 4. Processing - Shows loading spinner - "Processing your order..." message - No actions available 5. Confirmation - Order number, estimated delivery - Order summary - Actions: Continue shopping, Track order Error States: - Payment declined: Show error, stay on payment step - Network error: Show retry button Transitions should animate smoothly between steps."
Use specific, well-known websites as design references to quickly communicate complex aesthetic preferences.
"Create a landing page combining: - Linear's typography and spacing (large, bold headlines, generous whitespace) - Stripe's gradient backgrounds and glass-morphism effects - Vercel's clear product screenshots and demo sections - Notion's friendly, approachable copywriting tone The page should feel premium but accessible, technical but not intimidating."
Explicitly define what to avoid to prevent common AI defaults you do not want.
"Create a minimal portfolio website. AVOID: - Gradient backgrounds (use solid colors only) - Shadow effects stronger than 5% opacity - More than 2 fonts - Decorative elements that do not serve a purpose - Animations longer than 300ms - More than 3 colors total - Centered text blocks longer than 2 lines - Generic stock photo aesthetics EMBRACE: - Asymmetric layouts - Large amounts of whitespace - Photography as the main visual element - Subtle micro-interactions - Typography as design element"
Build in layers, starting with core functionality and progressively adding enhancements.
"Layer 1 - Structure: Create the basic page structure with semantic HTML sections for: hero, features, pricing, footer. No styling yet, just structure. Layer 2 - Core Styling: Add basic styling: typography, colors, spacing, responsive layout grid. Layer 3 - Components: Add component-level styling: card shadows, button styles, form inputs. Layer 4 - Interactions: Add hover states, focus styles, and basic transitions. Layer 5 - Animations: Add scroll-triggered animations, page transitions, and micro-interactions. Layer 6 - Polish: Add loading states, skeleton screens, and edge case handling."
When things do not go as expected, use this guide to diagnose and fix common issues.
AI prompting is the practice of writing instructions or descriptions that guide AI tools to generate desired outputs. In the context of website building with JustCopy.ai, prompting means describing what you want to create in natural language, and the AI interprets your description to generate functional code and designs. The quality of your prompt directly affects the quality of the output - more specific, well-structured prompts lead to better results.
Effective prompts for JustCopy.ai typically range from 50-300 words. Too short (under 30 words) leads to generic, assumption-filled results. Too long (over 500 words) can confuse the AI with conflicting instructions. The sweet spot includes: what you are building, key sections/features, design direction, and any specific functionality. Use bullet points for clarity rather than long paragraphs.
No technical knowledge is required. The best prompts describe outcomes, not implementations. Instead of saying "use flexbox with justify-content: space-between," say "arrange the cards in a row with equal spacing between them." Focus on what you want to achieve, and let the AI handle the technical details. That said, if you do have technical knowledge, you can include it for more precise control.
Start by establishing a design system in your first prompt, defining colors, fonts, spacing, and component styles. Then reference this system in subsequent prompts. You can also reference previous elements ("match the style of the header we created") or specific values ("use the same #6366F1 purple"). Building components first and then assembling pages also ensures consistency.
Iteration is normal and expected in AI prompting. If the output is not right: 1) Identify specifically what is wrong, 2) Ask for targeted changes ("make the buttons rounded instead of square"), 3) If fundamentally off, try rephrasing your original prompt differently. Most successful AI projects involve 3-5 iterations to get exactly what you want. Think of it as a conversation, not a single command.
While there is no required format, structured prompts consistently produce better results. Start with what you are building, then list required sections as bullet points, followed by design requirements, and finally any specific functionality. Use clear section headers like "Design:", "Features:", "Functionality:" to organize complex prompts. The templates in this handbook provide proven structures to follow.
The fundamentals of good prompting (specificity, context, design direction) apply across AI tools, but each tool has strengths and preferences. JustCopy.ai excels with outcome-focused prompts describing what you want to achieve. Code-focused tools like Cursor prefer more technical prompts. Component tools like v0 work best with single-component requests. Adapt your prompt style to each tool's strengths.
Describe animations in terms of: trigger (what causes it), effect (what changes), duration (how long), and easing (how it feels). For example: "When the user scrolls to the features section (trigger), each card should fade in from below (effect) over 400ms (duration) with an ease-out curve (easing). Stagger each card by 100ms." Being specific about timing and behavior prevents generic or jarring animations.
Specify behavior at key breakpoints: desktop (1200px+), tablet (768-1199px), and mobile (below 768px). For each component, describe how it should adapt: "The 4-column feature grid should become 2 columns on tablet and 1 column on mobile. The navigation should collapse into a hamburger menu below 768px with a slide-out drawer." Mobile-first prompting (describing mobile, then enhancements for larger screens) often produces better results.
Practice and iteration are key. Start with the templates in this handbook, then customize based on results. Study websites you admire and practice describing them in prompt form. When you get good results, save those prompts as templates for future use. Pay attention to which specific phrases work well and which lead to misunderstandings. Over time, you will develop an intuition for effective prompting.
Use these templates and techniques with JustCopy.ai to build production-ready websites in minutes. No coding required.
50,000 free tokens/month - No credit card required - Deploy in 2 minutes