Prompts & Best Practices

Learn how to write effective prompts to get the best results from Pentoggle

The quality of your generated website depends heavily on how you describe it. This guide will help you craft effective prompts that produce excellent results.

Be specific and detailed

The more specific you are, the better Pentoggle can understand your vision. Include details about:

  • What sections or pages you need
  • What content goes in each section
  • Design style and aesthetic
  • Colors, fonts, and visual elements
  • Any specific functionality required
Too vague:

"Create a website for my business"

Better:

"Create a landing page for my interior design business. Include a hero section with 'Transform Your Space' headline, a portfolio grid showing 8 projects, an about section explaining our 15-year expertise, and a contact form. Use an elegant, sophisticated design with cream and gold colors."

Describe structure clearly

Organize your description by sections or pages. This helps the AI understand the hierarchy and flow of your site.

Good structure example:

Create a portfolio website with these sections:

1. Hero section:
   - My name: "Sarah Chen"
   - Tagline: "Full-stack developer & designer"
   - CTA button: "View My Work"

2. Projects section:
   - Grid of 6 project cards
   - Each card shows project image, title, and brief description
   - Click to view project details

3. About section:
   - Headshot photo on the left
   - Bio paragraph on the right
   - Skills list below

4. Contact section:
   - Email: sarah@example.com
   - LinkedIn and GitHub links
   - Simple contact form

Design: Clean, modern, minimal. Use a light color scheme with blue accents.

Specify design preferences

Help the AI understand your aesthetic by being specific about design elements:

Color schemes:

  • "Use a dark theme with purple accents"
  • "Corporate blue and white color scheme"
  • "Warm, earthy tones — terracotta, sage green, cream"
  • "Vibrant, playful colors inspired by children's brands"

Style references:

  • "Minimal and clean like Apple.com"
  • "Modern SaaS landing page like Stripe"
  • "Bold and colorful like Spotify"
  • "Professional and trustworthy like a law firm"

Typography:

  • "Use a modern sans-serif font for headings"
  • "Elegant serif font for body text"
  • "Large, bold headlines"
  • "Readable font size suitable for long-form content"

Provide real content

Instead of asking for placeholders, provide actual content when possible:

Placeholder content:

"Add a hero section with a headline and description"

Real content:

"Add a hero section with headline 'Welcome to CloudSync' and description 'Sync your files across all devices instantly and securely'"

Real content helps you visualize the final result and makes iteration more efficient.

Iterate effectively

After your initial generation, use these strategies for refinement:

Club multiple small requests (something like that)

Make focused requests for better results:

  • ✅ "Change the hero background to a gradient"
  • ✅ "Make the contact form fields larger"
  • ❌ "Change everything to look more modern and add animations and fix the colors"

Be specific about what to change:

  • Instead of: "Make it look better"
  • Say: "Increase spacing between sections and use a softer color palette"

Reference existing elements:

  • "Add a testimonials section below the features"
  • "Change the pricing table to match the style of the hero section"
  • "Move the contact form to the right side of the about section"

Good vs. bad examples

Example 1: Portfolio website

Bad prompt:

"Make me a portfolio website"

Good prompt:

"Create a portfolio website for Alex Martinez, a UX designer: Hero: Full-screen with 'UX Designer & Creative Thinker' and 'Scroll to explore' indicator Projects: 3x2 grid of case studies with hover effects, each showing client name and project type About: Two-column layout with headshot on left and bio on right, followed by skills tags Contact: Email link, social media icons, and a simple message form Design: Modern, minimal, lots of white space. Use black text on white background with bright orange as accent color for links and buttons."

Example 2: Business landing page

Bad prompt:

"Create a landing page for my app"

Good prompt:

"Create a landing page for 'BudgetWise', a personal finance app: Hero section: - Headline: 'Take Control of Your Finances' - Subheadline: 'Track spending, set budgets, and reach your financial goals' - Two CTAs: 'Download iOS' and 'Download Android' - Hero image showing app interface on phone Features section: - 3 columns highlighting key features: 1. 'Smart Budgeting' - Set and track budgets automatically 2. 'Expense Tracking' - Categorize spending with AI 3. 'Financial Insights' - Get personalized recommendations Social Proof: - 'Trusted by 100,000+ users' - 5 star rating badges from App Store and Google Play Pricing: - Free tier and Premium tier at $4.99/month - Feature comparison table FAQ section with 5 common questions Footer with links to Privacy Policy, Terms, Support, and social media Design: Professional, trustworthy. Use teal blue as primary color with dark navy accents. Include subtle gradient backgrounds."

Pro Tips Summary

  • Be specific about sections, content, and design
  • Organize your description with clear structure
  • Provide real content instead of placeholders
  • Reference design styles you like
  • Club multiple small requests (something like that) when iterating
  • Start with core structure, then refine details