samarv/building-with-ai-engineers

Building with AI Engineers

In the era of AI-driven development, the primary bottleneck is no longer writing code, but the human's ability to act as a high-fidelity translator. This skill shifts the focus from "how to build" to "what to build," using a "Minimum Lovable Product" (MLP) mindset to create software that users actually care about.

The AI Collaboration Workflow

1. The Initial Prompt (Defining the MLP)

Instead of a Minimum Viable Product, aim for a Minimum Lovable Product. Start with a broad concept but use specific reference points to anchor the AI's design and logic.

• Identify the Anchor: Use a known entity as a baseline (e.g., "An Airbnb clone" or "A Tinder for cats").
• State the Core Action: Define the one primary interaction the user must complete (e.g., "User should be able to purchase a home listing directly").

2. High-Fidelity Refinement

Once the UI is generated, do not rely solely on text prompts for small changes.

• Visual Editing: If the tool allows, edit text and colors visually. This changes the underlying code instantly without the latency of re-generating the entire page.
• Specific Interaction Prompts: When adding features, describe the UI component and the expected result (e.g., "Add a button that triggers a pop-up modal for payment").

3. Using "Chat Mode" to Unstuck

If the AI introduces a bug or a logical loop, transition from "Command Mode" to "Chat Mode."

• Inquire, Don't Command: Ask, "How does this specific function work?" or "Why am I not getting the result I want here?"
• Detailed Error Reporting: Never say "it doesn't work." Instead, say: "I expected [X] to happen when I clicked [Y], but instead [Z] occurred. Are we missing a requirement?"

4. Transitioning to Functionality

Move from a "mockup UI" to a "functioning product" by integrating backends.

• Data Persistence: Prompt the agent to connect to a backend-as-a-service (like Supabase).
• Authentication: Specifically request a login flow that handles user sessions.
• Payments: Add specific instructions for Stripe or other third-party integrations.

Internal "Lenny Mode" (Self-Coaching)

Before finalizing any AI-generated feature, run a mental "Lenny Mode" check:

• Is this actually solving a problem for a specific user?
• Why am I building this specific feature right now?
• How many people actually have this pain point?

Examples

Example 1: The Marketplace Prototype

• Context: Building a niche marketplace for vintage watches.
• Input: "Create a marketplace for vintage watches. Add a 'Make an Offer' button on the listing page."
• Application: The AI generates a 'Book Now' button instead.
• Refinement: "Change the 'Book Now' button text to 'Make an Offer.' Ensure it opens a modal where the user can input a dollar amount and a message."
• Output: A functional UI with a specialized bargaining modal.

Example 2: Troubleshooting a Broken Flow

• Context: The login button isn't redirecting the user.
• Input: "The login doesn't work." (Incorrect approach)
• Application: Use Chat Mode: "I've connected Supabase, but when I click 'Submit' on the login form, the console shows a 404 error and the page doesn't redirect. Can you check the auth callback URL?"
• Output: The AI identifies a mismatch in the redirect URL settings and provides a fix.

Common Pitfalls

• Vague Instructions: AI does not understand "why" unless you specify the "what." Be ruthlessly specific about UI elements and data states.
• Giving Up on Bugs: When the AI gets stuck, users often abandon the prompt. Instead, use Chat Mode to ask the AI to explain its own code, which often helps it "re-think" the logic.
• Over-Engineering the Roadmap: Don't plan a 6-month roadmap. Identify the single biggest bottleneck (e.g., "I need users to be able to pay") and solve that today.
• Passive Interaction: Treat the agent like a junior engineer who needs precise requirements, not a magic box. Your value is in your "taste" and your ability to verify if the output is correct.