🚀 BuildFlow AI - Complete Tutorial & Prompt Engineering Guide

Getting Started
Understanding BuildFlow's Capabilities
The P.F.D.A. Framework
Writing Effective Prompts
Advanced Patterns
Common Mistakes
Examples by Category
Troubleshooting

🎯 Getting Started {#getting-started}

What is BuildFlow AI?

BuildFlow AI transforms text descriptions into fully functional, production-ready web applications. Unlike traditional development, you describe what you want, and AI generates the complete code instantly.

What Can You Build?

✅ Landing pages and websites
✅ Interactive web applications
✅ Dashboards and admin panels
✅ E-commerce platforms
✅ Booking and scheduling systems
✅ Social platforms and communities
✅ Productivity tools
✅ Educational applications

The 3 Levels of Prompting

Level 1: Simple (Beginners)

"Create a coffee shop website"

→ Gets you a beautiful, functional site in seconds

Level 2: Detailed (Intermediate)

"Create a coffee shop website with menu categories, 
online ordering form, location map, and opening hours"

→ More specific features and functionality

Level 3: Structured (Advanced)

App Name: Roast & Revel
Purpose: Coffee e-commerce with inventory management
Features: [detailed list]
Design: [specific aesthetic]
Data: [database requirements]

→ Production-ready applications with advanced features

🔧 Understanding BuildFlow's Capabilities {#capabilities}

What BuildFlow DOES Generate:

✅ Single-File HTML Applications

Complete, self-contained HTML files
React components via CDN
Tailwind CSS for styling
Works immediately in any browser

✅ Supabase Integration

Database (PostgreSQL)
User authentication
File storage
Real-time updates

✅ Advanced Features

Interactive forms with validation
State management
Multi-page navigation
CRUD operations
Search and filtering
Sorting and pagination
Real-time updates

What BuildFlow CANNOT Generate:

❌ Build Tools & Frameworks

No Next.js with API routes
No separate Node.js backend
No npm package management
No custom build processes

❌ Complex Infrastructure

No microservices
No separate backend servers
No GraphQL servers
No custom databases (only Supabase)

Technical Architecture

BuildFlow generates applications using:

Frontend: React 18+ via CDN
Styling: Tailwind CSS via CDN
Backend: Supabase (PostgreSQL, Auth, Storage)
Deployment: Single HTML file that runs anywhere

⚡ The P.F.D.A. Framework {#pfda-framework}

The P.F.D.A. (Purpose, Features, Data, Aesthetics) framework is the most powerful way to get production-ready applications.

P - Purpose & Persona

Define WHO and WHY:

Who will use this app?
What problem does it solve?
What's the main goal?

Examples:

❌ Bad: "Make an app"
✅ Good: "Help freelancers track billable hours"

❌ Bad: "Recipe website"
✅ Good: "Community recipe sharing for home cooks"

F - Features & Functionality

List SPECIFIC features (3-5 key ones):

What can users do?
What interactions exist?
What data flows where?

Examples:

❌ Bad: "Has recipes"
✅ Good: "User-submitted recipes with image upload, 
         like/save to collections, comment system with 
         real-time updates"

❌ Bad: "Shopping cart"
✅ Good: "Shopping cart with add/remove items, quantity 
         adjustment, persistent storage, total calculation 
         with tax"

D - Data & Technology

Specify DATA REQUIREMENTS:

What needs to be saved?
What database tables?
Does it need authentication?

Examples:

❌ Bad: "Save user data"
✅ Good: "Products table (name, price, stock), Orders 
         table (user_id, items, total, status), Users 
         via Supabase Auth"

❌ Bad: "User login"
✅ Good: "Supabase Auth with email/password, protected 
         dashboard route, user profile with order history"

A - Aesthetics & Design

Describe VISUAL STYLE:

What mood/feeling?
What colors?
What style references?

Examples:

❌ Bad: "Nice looking"
✅ Good: "Modern and minimalist with dark mode, blue/purple 
         gradients, glassmorphism effects"

❌ Bad: "Professional"
✅ Good: "Corporate aesthetic with navy blues, clean sans-serif 
         typography, subtle shadows, formal layout"

Complete P.F.D.A. Example

App Name: FitTrack Pro

Purpose: Help gym-goers track workouts and progress for 
personal fitness goals

Key Features:
1. Workout logging with exercise, sets, reps, weight tracking
2. Progress charts showing strength gains over time
3. Exercise library with instructions and muscle groups
4. Workout templates for quick logging
5. Personal records tracking (PRs) with notifications

Tech Stack: Supabase for workout data and user authentication
Authentication: Required - users have personal workout history
Design: Energetic and motivating with orange/red accents, 
dark mode, bold typography, progress visualization charts

Data Model:
- workouts table: id, user_id, date, duration, notes, created_at
- exercises table: id, workout_id, name, sets, reps, weight, rpe
- templates table: id, user_id, name, exercises (JSON)
- personal_records table: id, user_id, exercise_name, max_weight, date

User Journey: Sign up → Create workout → Log exercises → 
View progress charts → Break personal record → Get motivated!

📝 Writing Effective Prompts {#effective-prompts}

The 5 Principles of Great Prompts

1. Be Specific, Not Vague

❌ "Make a website"
✅ "Create a restaurant website with menu, reservations, and gallery"

❌ "Build an app for fitness"
✅ "Build a class booking app for gyms with schedule, registration, and payment"

2. Mention Data Requirements

❌ "E-commerce site"
✅ "E-commerce site with Products table, Shopping Cart state, and Order history in Supabase"

❌ "User accounts"
✅ "User accounts with Supabase Auth, profile pages, and saved preferences"

3. Specify Authentication Needs

❌ "Login page"
✅ "Supabase Auth with email/password login, protected dashboard, and user-specific data"

❌ "Members area"
✅ "Public landing page, Supabase Auth signup, protected member dashboard with subscriptions"

4. Describe Visual Style

❌ "Good design"
✅ "Modern with glassmorphism, purple/blue gradients, smooth animations"

❌ "Professional look"
✅ "Corporate aesthetic, navy blue, clean typography, structured layouts"

5. List User Actions

❌ "Task app"
✅ "Task app where users can add tasks, mark complete, filter by status, and search"

❌ "Recipe site"
✅ "Recipe site where users can browse, search by ingredients, save favorites, and submit their own"

Quick Prompt Formulas

For Landing Pages:

Create a [type] landing page for [audience] featuring:
- Hero section with [specific content]
- [Number] key features with icons
- [Pricing/testimonials/other sections]
- Contact/signup form with [fields]
Design: [style description]

For Applications:

Build a [type] app that helps [users] [do what]:
1. [Feature 1 with specific functionality]
2. [Feature 2 with data integration]
3. [Feature 3 with user interaction]
Use Supabase to store [what data]
Design: [visual style]

For E-commerce:

Create an e-commerce platform for [products] with:
- Product catalog from Supabase ([fields])
- Shopping cart with [features]
- User accounts (Supabase Auth) with order history
- Admin dashboard to manage [what]
Design: [aesthetic] with [colors]

🎨 Advanced Patterns {#advanced-patterns}

Pattern 1: Search & Filter

Include these keywords to get advanced search:

"Include search functionality filtering by [category], [price], [date]"
"Add filter dropdowns for [options]"
"Search bar that filters in real-time"

Pattern 2: Real-Time Updates

For collaborative or live features:

"Use Supabase real-time subscriptions for [what updates]"
"Show live updates when [event] happens"
"Real-time chat/comments with instant refresh"

Pattern 3: File Uploads

For images and files:

"Image upload using Supabase Storage for [purpose]"
"File uploads with drag-and-drop interface"
"Profile photo upload with preview"

Pattern 4: Complex Forms

For multi-step or validated forms:

"Multi-step form with validation for [fields]"
"Form with conditional fields that show/hide based on [selection]"
"Dynamic form with add/remove field groups"

Pattern 5: Data Visualization

For charts and graphs:

"Progress charts showing [metric] over time"
"Bar chart comparing [data points]"
"Dashboard with pie charts, line graphs, and statistics"

Pattern 6: Admin Panels

For content management:

"Admin dashboard protected by Supabase Auth where admins can:
- Add/edit/delete [content]
- View analytics for [metrics]
- Manage user permissions"

⚠️ Common Mistakes {#common-mistakes}

Mistake 1: Being Too Vague

❌ Problem:

"Make a cool app"
"Create something for my business"

✅ Solution:

"Create a booking system for my photography studio with 
calendar, package selection, and payment processing"

Mistake 2: Not Mentioning Data

❌ Problem:

"Build a blog"

✅ Solution:

"Build a blog with Posts table in Supabase, Categories, 
Tags, and Comments with user authentication"

Mistake 3: Assuming Complex Architecture

❌ Problem:

"Create a Next.js app with API routes and PostgreSQL"
(BuildFlow can't do this)

✅ Solution:

"Create a single-page app with Supabase backend"
(BuildFlow CAN do this)

Mistake 4: No Design Direction

❌ Problem:

"Make it look nice"

✅ Solution:

"Modern and minimal with dark mode, blue/purple gradients, 
smooth animations, clean typography"

Mistake 5: Forgetting Mobile

❌ Problem:

(Not mentioning responsive design)

✅ Solution:

"Fully responsive design optimized for mobile, tablet, desktop"
(Though this is usually automatic!)

📚 Examples by Category {#examples}

Business & E-commerce

Basic E-commerce

Create an online plant shop with:
- Product grid showing plant photos, names, prices
- Shopping cart with add/remove items
- Checkout form with shipping info
- Order confirmation page
Design: Natural greens, clean and organic aesthetic

Advanced E-commerce

App Name: GreenThumb Nursery

Purpose: Online plant marketplace with inventory management

Features:
1. Product catalog from Supabase (name, species, price, care_difficulty, stock)
2. Advanced filtering (type, light needs, water needs, pet-safe)
3. Shopping cart with quantity, subtotal calculation
4. User accounts (Supabase Auth) with purchase history
5. Admin panel to manage products, update stock levels, view orders
6. Plant care guides for each product

Tech Stack: Supabase for products, orders, users
Authentication: Optional for browsing, required for checkout
Design: Natural with greens/browns, plant photography, friendly and organic feel

Data Model:
- products: id, name, species, description, price, category, light_needs, water_needs, pet_safe, stock, image_url
- orders: id, user_id, items (JSON), total, shipping_address, status, created_at
- care_guides: id, product_id, guide_text, tips

Productivity & Tools

Basic Todo App

Create a todo list with:
- Add new tasks with input field
- Check off completed tasks
- Delete tasks
- Filter by all/active/completed
Save to local storage
Design: Clean minimalist, blue accents

Advanced Project Manager

App Name: TaskFlow

Purpose: Team project management with kanban boards

Features:
1. Multiple projects with kanban columns (To Do, In Progress, Review, Done)
2. Drag-and-drop task cards between columns
3. Task details modal (title, description, assignee, due date, priority)
4. Team member management
5. Filtering by assignee, priority, due date
6. Activity log showing recent changes

Tech Stack: Supabase with real-time updates for collaborative editing
Authentication: Required - users see only their projects
Design: Professional with blue/purple theme, clean boards, smooth drag animations

Data Model:
- projects: id, owner_id, name, description, created_at
- tasks: id, project_id, title, description, status, priority, assignee_id, due_date
- team_members: id, project_id, user_id, role
- activity: id, project_id, user_id, action, description, timestamp

Social & Community

Basic Blog

Create a personal blog with:
- List of blog posts (title, excerpt, date)
- Individual post pages
- Categories and tags
- Search functionality
Design: Clean typography, comfortable reading experience

Advanced Community Platform

App Name: DevConnect

Purpose: Developer community for sharing code snippets and tutorials

Features:
1. Browse posts with syntax-highlighted code blocks
2. User profiles with bio, social links, contributed posts
3. Like, bookmark, and comment on posts
4. Tag-based filtering and search
5. Markdown editor for creating posts
6. Follower system and activity feed

Tech Stack: Supabase for posts, users, interactions, with real-time comments
Authentication: Required to post, comment, like, follow
Design: Dark theme with neon accent colors, code-inspired aesthetic, modern dev tool look

Data Model:
- posts: id, user_id, title, content, code_language, tags, created_at, updated_at
- comments: id, post_id, user_id, content, created_at
- likes: id, post_id, user_id, created_at
- follows: id, follower_id, following_id, created_at
- bookmarks: id, user_id, post_id, created_at

🔧 Troubleshooting {#troubleshooting}

Issue: Generated App Doesn't Have All Features

Solution: Be more specific about each feature

Instead of: "Add user accounts"
Write: "Add Supabase Auth with email/password signup, 
login form, protected dashboard, and user profile page"

Issue: Design Doesn't Match Expectations

Solution: Provide detailed design requirements

Instead of: "Modern design"
Write: "Modern with dark mode (#1a1a2e background), 
neon blue (#00d4ff) accents, glassmorphism cards, 
smooth fade-in animations"

Issue: Missing Database Integration

Solution: Explicitly mention Supabase and data structure

Instead of: "Save user data"
Write: "Use Supabase to store data in a Users table 
(id, name, email, preferences, created_at)"

Issue: App Is Too Simple

Solution: Use the P.F.D.A. framework for complexity

Instead of: "Create a task app"
Use P.F.D.A. template with:
- Clear purpose
- 5+ specific features
- Detailed data model
- Design specifications

Issue: Authentication Not Working

Solution: Be explicit about auth requirements

Write: "Require Supabase Auth login before accessing 
dashboard. Show login/signup form if not authenticated. 
Include sign out button in nav."

💡 Pro Tips

Tip 1: Start Simple, Then Iterate

Generate a basic version
Test it
Add more specific requirements
Regenerate with improvements

Tip 2: Use the Examples Library

Don't start from scratch! Use example prompts as templates and customize them.

Tip 3: Mention Supabase Early

If you need data persistence, say "Use Supabase" in your first sentence.

Tip 4: Describe the User Journey

"User lands on homepage → clicks pricing → signs up → accesses dashboard"

Tip 5: Reference Design Inspiration

"Design like Stripe's website" or "Similar to Linear's dashboard"

Tip 6: Test Incrementally

Generate → Test → Refine → Regenerate

🎓 Practice Exercises

Exercise 1: Beginner

Turn this vague prompt into a specific one: ❌ "Make a gym website"

Your answer should include:

Specific sections
Visual style
Call to action

Exercise 2: Intermediate

Add Supabase integration to this prompt: "Create a recipe app where users can browse recipes"

Your answer should include:

Database table structure
What data to store
Authentication requirements

Exercise 3: Advanced

Write a complete P.F.D.A. prompt for: "A marketplace where photographers can sell their photos"

Your answer should include:

All P.F.D.A. components
Detailed data model
User journey
At least 5 features

📖 Glossary

Supabase: Backend platform providing database, authentication, and storage

CDN: Content Delivery Network - how we load React and other libraries

State Management: How the app remembers and updates data while running

CRUD: Create, Read, Update, Delete - basic database operations

Real-time: Updates that happen instantly without refreshing the page

Protected Route: Page that requires login to access

Row Level Security (RLS): Database security that controls who can access what data

Local Storage: Browser storage that persists even after closing the tab

🆘 Getting Help

Quick Reference Card

📋 Basic Prompt Structure:
Create a [type] [app/website] with:
- [Feature 1]
- [Feature 2]
- [Feature 3]
Design: [style]

🔥 Advanced Prompt Structure:
App Name: [Name]
Purpose: [Goal]
Features: [List 5]
Tech: Supabase for [what]
Auth: [Yes/No + details]
Design: [Detailed style]
Data: [Tables + fields]
Journey: [User flow]

Need More Help?

Use the Prompt Assistant - Opens automatically to guide you
Browse Examples - 30+ ready-to-use prompts
Read P.F.D.A. Guide - Framework for advanced apps
Start Simple - Get something working, then improve

🚀 Ready to Build?

You now have everything you need to create amazing applications with BuildFlow AI!

Remember the golden rule:

"The more specific you are, the better your results"

Start with:

Choose an example from the library
Customize it for your needs
Generate and test
Iterate and improve

Happy building! 🎉

BuildFlow AI Tutorial

🚀 BuildFlow AI - Complete Tutorial & Prompt Engineering Guide

Table of Contents

🎯 Getting Started {#getting-started}

What is BuildFlow AI?

What Can You Build?

The 3 Levels of Prompting

🔧 Understanding BuildFlow's Capabilities {#capabilities}

What BuildFlow DOES Generate:

✅ Single-File HTML Applications

✅ Supabase Integration

✅ Advanced Features

What BuildFlow CANNOT Generate:

❌ Build Tools & Frameworks

❌ Complex Infrastructure

Technical Architecture

⚡ The P.F.D.A. Framework {#pfda-framework}

P - Purpose & Persona

F - Features & Functionality

D - Data & Technology

A - Aesthetics & Design

Complete P.F.D.A. Example

📝 Writing Effective Prompts {#effective-prompts}

The 5 Principles of Great Prompts

1. Be Specific, Not Vague

2. Mention Data Requirements

3. Specify Authentication Needs

4. Describe Visual Style

5. List User Actions

Quick Prompt Formulas

For Landing Pages:

For Applications:

For E-commerce:

🎨 Advanced Patterns {#advanced-patterns}

Pattern 1: Search & Filter

Pattern 2: Real-Time Updates

Pattern 3: File Uploads

Pattern 4: Complex Forms

Pattern 5: Data Visualization

Pattern 6: Admin Panels

⚠️ Common Mistakes {#common-mistakes}

Mistake 1: Being Too Vague

Mistake 2: Not Mentioning Data

Mistake 3: Assuming Complex Architecture

Mistake 4: No Design Direction

Mistake 5: Forgetting Mobile

📚 Examples by Category {#examples}

Business & E-commerce

Basic E-commerce

Advanced E-commerce

Productivity & Tools

Basic Todo App

Advanced Project Manager

Social & Community

Basic Blog

Advanced Community Platform

🔧 Troubleshooting {#troubleshooting}

Issue: Generated App Doesn't Have All Features

Issue: Design Doesn't Match Expectations

Issue: Missing Database Integration

Issue: App Is Too Simple

Issue: Authentication Not Working

💡 Pro Tips

Tip 1: Start Simple, Then Iterate

Tip 2: Use the Examples Library

Tip 3: Mention Supabase Early

Tip 4: Describe the User Journey

Tip 5: Reference Design Inspiration

Tip 6: Test Incrementally

🎓 Practice Exercises

Exercise 1: Beginner

Exercise 2: Intermediate

Exercise 3: Advanced

📖 Glossary

🆘 Getting Help

Quick Reference Card

Need More Help?

🚀 Ready to Build?