Prompt Guide

Writing clear and specific prompts helps CodePup AI understand exactly what you want to build. This guide shows you how to craft effective prompts that generate better websites faster.

---

What Makes a Good Prompt?

A good prompt is:

• Specific — clearly describes what you want
• Detailed — includes design preferences, features, and functionality
• Structured — organizes information logically
• Goal-oriented — explains the purpose of your website

---

Prompt Structure

Basic Structure

Build a [type of website] for [purpose/audience]

Features:
- [Feature 1]
- [Feature 2]
- [Feature 3]

Design:
- [Color scheme/style]
- [Layout preferences]

Advanced Structure

For more complex projects, include:

• Functionality — specific user interactions
• Integrations — Payment, Email, authentication
• Content sections — hero, features, pricing, etc.
• Target audience — who will use this site

---

Examples of Good Prompts

Simple Website Examples

Landing Page for a Product

Build a modern landing page for a SaaS productivity app called "TaskFlow"

Sections:
- Hero with headline "Streamline Your Workflow" and CTA button
- Features section with 3 cards (Task Management, Team Collaboration, Analytics)
- Pricing table with 3 tiers (Free, Pro, Enterprise)
- Testimonials section
- Footer with links and social media

Design:
- Clean, minimal design with purple and white color scheme
- Modern sans-serif fonts
- Responsive for mobile and desktop

Portfolio Website

Create a portfolio website for a freelance graphic designer

Pages:
- Home with hero section and featured projects
- About page with bio and skills
- Portfolio gallery with project thumbnails
- Contact form

Design:
- Creative, bold design with black background
- Image-focused layout
- Smooth animations and transitions

---

Interactive Website Examples

SaaS Dashboard

Build a dashboard for a project management SaaS product

Features:
- Dashboard with project overview cards
- Create/edit/delete projects
- Task list with status tracking
- User profile settings

Design:
- Modern dashboard UI with sidebar navigation
- Blue and white color scheme
- Data visualization with charts
- Responsive design

Booking Platform

Create a booking platform for fitness classes

Functionality:
- Browse available classes by date/time
- Book and cancel appointments
- User dashboard showing booked classes
- Admin panel to manage classes

Design:
- Energetic, vibrant design (orange and teal)
- Calendar view for class scheduling
- Mobile-friendly interface

---

E-Commerce Website Examples

Online Store

Build an e-commerce store selling handmade jewelry

Features:
- Product catalog with categories (Rings, Necklaces, Bracelets)
- Product detail pages with images and descriptions
- Shopping cart functionality with payment while checkout
- Sedn Welcome email in First SignUp and Order confirmation
- Order history for customers

Design:
- Elegant, luxury aesthetic (gold and cream colors)
- High-quality product image galleries
- Trust badges and secure checkout indicators

Digital Products Store

Create a store for selling digital templates and courses

Functionality:
- Product listings with preview images
- Automatic download/access after purchase
- User accounts to access purchased items
- Email delivery of purchase links
- Discount code support

Design:
- Clean, professional design
- Download indicators and file size info
- Clear call-to-action buttons

---

Tips for Better Prompts

Be Specific About Design

Instead of “make it look good,” say “use a gradient background with blue (#1E40AF) to purple (#7C3AED), rounded corners, and shadow effects.”

List All Features

Don’t assume CodePup AI knows what features you want. Explicitly list everything: navigation menu, contact form, search bar, etc.

Describe User Flows

Explain how users interact: “When user clicks ‘Add to Cart’, show a confirmation notification and update cart count in header.”

Provide Examples

Reference existing websites: “Similar layout to Stripe’s pricing page” or “hero section like Apple’s product pages.”

---

Common Mistakes to Avoid

1. Making Specific UI Changes

Too Vague

“Make the spacing better”

Good Example - Use Visual Descriptions

“Increase the spacing between sections to give more breathing room, add more margin between feature cards so they don’t feel cramped, and make the header shorter”

2. Adding Components

Missing Important Details

“Add a contact form”

Good Example

“Add a contact form component with fields: name, email, subject, and message. Include a send button that submits the message to our support email”

3. Styling Your Website

Unclear Design Preferences

“Make it modern”

Good Example

“Modern design with glassmorphism effects, gradients, and micro-interactions. Use a dark theme with accent color #FF6B6B”

---

Iterating on Your Project

After the initial generation, you can refine your website with follow-up prompts:

Design Refinements

- "Change the header background to a gradient from blue to purple"
- "Make the buttons larger with more rounded corners"
- "Add hover effects to the feature cards"

Feature Additions

- "Add a newsletter signup form in the footer"
- "Include a testimonials carousel on the homepage"
- "Add filtering options to the product catalog"

Content Updates

- "Update the hero headline to 'Transform Your Business Today'"
- "Add a FAQ section with 5 common questions"
- "Include social media links in the footer"

---

---

Debugging Prompts

When you encounter errors or functionality issues, providing clear, specific information helps CodePup AI fix problems quickly. Always include the exact location, what you expected to happen, and what actually happened.

1. Reporting Functionality Issues

Vague Issue Report

“The button doesn’t work”

Good Example

“On the checkout page, when I click the ‘Add to Cart’ button for a product, nothing happens. It should redirect to the cart page, but it stays on the same page with no response.”

2. Reporting Console Errors

Generic Error Report

“There’s an error on my site”

Good Example

“I’m getting this error in the browser console on the products page:

Uncaught TypeError: Cannot read property 'price' of undefined
    at ProductCard.jsx:45

This happens when I try to filter products by category.”

3. Component-Specific Issues

Unclear Component Issue

“The form isn’t submitting properly”

Good Example

“The contact form in the footer isn’t submitting. When I click ‘Send Message’, the form fields don’t clear and no success message appears. I expected to see ‘Message sent successfully’ and have the fields reset.”

Tips for Effective Debugging Prompts

• Specify the exact page or component where the issue occurs
• Describe the steps to reproduce the problem
• Include error messages from browser console (Dev Tools → Console)
• Explain expected vs actual behavior - what should happen and what’s happening instead
• Mention when the issue started - “after adding product in cart while click on Checkout button” or “on the homepage only”
• Include relevant details - browser version, device type if mobile-specific
• Use version control to rollback - If the issue is difficult to debug, you can rollback to a previous working version using CodePup AI’s version control feature and try again

---

Next Steps

Getting Started Learn the basics of creating your first project with CodePup AI.

Chat & Modify Discover how to refine your project using natural language commands.

Stripe Integration Learn how to add payments and subscriptions to your website.

Resend Integration Set up email notifications and transactional emails.