Prompt Engineering

    Writing Better Prompts

    Learn how to communicate effectively with Revlo's AI to build exactly what you want, faster.

    Core Principles

    Be Specific

    Clearly describe what you want. Include details about functionality, appearance, and behavior.

    Break It Down

    For complex features, break them into smaller steps. Build iteratively rather than all at once.

    Provide Context

    Reference existing features, mention your tech stack preferences, and explain the use case.

    Starting a New Project

    Initial Prompt Structure

    When starting a new project, include:

    • What type of application (e.g., blog, dashboard, e-commerce)
    • Main features you want
    • User roles or authentication requirements
    • Visual style preferences (optional)
    Good

    Create a task management app with user authentication. Users should be able to create, edit, and delete tasks. Each task should have a title, description, due date, and status (todo, in progress, done). Include a dashboard showing tasks grouped by status.

    Needs Improvement

    Make a todo app

    Pro Tip

    The first prompt sets the foundation. You can always add more features later through conversation.

    Adding Features

    Iterative Development

    After the initial generation, add features one at a time:

    Good

    Add a search functionality to filter tasks by title or description. Include a search bar at the top of the task list that filters in real-time as the user types.

    Good

    Implement email notifications when a task is due tomorrow. Use the Resend integration we connected earlier.

    Needs Improvement

    Add search and notifications and sorting and filters

    Why iterative is better:

    • Each feature is implemented with more attention to detail
    • Easier to test and verify each addition works correctly
    • You can adjust direction based on what you see
    • Less chance of conflicts or breaking existing code

    Using Integrations

    Integration-Aware Prompts

    When you have integrations connected, you can reference them directly:

    Supabase
    Good

    Add Supabase authentication with email and password. Create a login page and a registration page. After login, redirect users to the dashboard.

    Supabase + Database
    Good

    Create a Supabase table for storing tasks with columns: id, user_id, title, description, due_date, status, created_at. Add Row Level Security policies so users can only see their own tasks.

    Resend
    Good

    Send a welcome email using Resend when a new user registers. The email should include their name and a link to get started.

    Modifying Existing Code

    Making Changes

    Reference specific components or features when requesting changes:

    Good

    Change the task card styling to use a gradient background. The gradient should go from blue to purple for tasks with high priority.

    Good

    Update the dashboard to show a chart of tasks completed per week for the last 4 weeks using a bar chart.

    Good

    Fix the task creation form - make the due date field required and show an error message if the user tries to submit without selecting a date.

    Needs Improvement

    Make it look better

    Common Patterns

    Authentication

    Good examples:

    • "Add Supabase auth with email/password"
    • "Implement GitHub OAuth login"
    • "Add a protected route that requires login"
    • "Create a user profile page with edit functionality"

    Database Operations

    Good examples:

    • "Create a posts table with title, content, author_id"
    • "Add RLS policies to restrict access"
    • "Implement real-time subscriptions for new posts"
    • "Add pagination to the posts list"

    UI Components

    Good examples:

    • "Add a modal for creating new tasks"
    • "Create a sidebar navigation with icons"
    • "Implement a dropdown menu for user actions"
    • "Add loading skeletons while data fetches"

    Forms & Validation

    Good examples:

    • "Add form validation with error messages"
    • "Make email field required and validate format"
    • "Add a confirmation dialog before deleting"
    • "Show success toast after saving"

    Troubleshooting with Prompts

    When Things Don't Work

    If something isn't working as expected, be specific about the issue:

    Good

    The task creation form is not clearing after submission. Can you clear all fields and close the modal after a task is successfully created?

    Good

    I'm getting a TypeScript error in the TaskList component about 'status' being possibly undefined. Can you add proper type checking?

    Good

    The tasks are not filtering by status correctly. When I click "In Progress", it still shows all tasks. Can you fix the filter logic?

    Needs Improvement

    It's broken, fix it

    Best Practices Summary

    Do

    • Be specific about what you want
    • Describe the expected behavior
    • Reference existing features when modifying
    • Break complex features into steps
    • Mention integration names (Supabase, Resend, etc.)
    • Include visual or UX preferences
    • Specify error handling requirements

    Don't

    • Use vague terms like "make it better"
    • Request too many features at once
    • Assume the AI knows unstated preferences
    • Skip important details
    • Forget to mention authentication needs
    • Ignore error cases
    • Rush through the planning phase

    Ready to build?

    Start a new project and put these prompt engineering techniques into practice.