Agentic Product Prototyping

This skill allows product managers and founders to bypass the traditional "design-to-engineering" bottleneck by acting as a "generative lead" who directs AI agents to build, deploy, and maintain software. By focusing on "AI-native coding"—understanding system components and debugging rather than syntax—you can reduce the cost of software creation to near zero.

The Prototyping Workflow

1. Draft the "Super-Prompt" (The PRD)

Instead of a vague request, provide a structured prompt that mimics a Product Requirement Document. Define the stack and core functionality immediately.

• Define the Stack: Specify Node.js, React, or Python (or tell the agent to "choose the best modern stack for a web app").
• List Core Features: Use bullet points for specific functionality (e.g., "Voting system," "Kanban board for status tracking," "Admin dashboard").
• Set Design Constraints: Specify "Modern UI," "Responsive mobile view," or "User-friendly dashboard."
• Define Data Persistence: Explicitly ask for a database (e.g., Postgres) to ensure the app saves user data.

2. Monitor the "Multiplayer" Session

Observe the agent as it builds. Treat the agent as another user in your workspace.

• Watch the Progress Pane: Monitor the installation of packages and database schema creation.
• Check for Proactive Fixes: Agents often spot their own errors. Wait for the agent to attempt a self-repair before intervening.
• Verify via Screenshots: Ask the agent to take a screenshot of the homepage to verify the UI is rendering correctly before you even open the app.

3. Apply "AI-Native" Debugging

When the agent gets stuck (the "Gap"), your role is to unblock it.

• Ask for the Admin Path: If the agent builds an admin panel but you can't find it, ask: "How do I log into the admin panel?" or "Create an admin account for me using a SQL query."
• Iterate on UI Pixels: Use an assistant-style tool for small adjustments. Example: "Move this button 3 pixels to the left" or "Change the header color to match this hex code."
• Unblock Migrations: If a feature requires a database change, ask the agent to "Write the migration script" or use a side-chat (like Claude or ChatGPT) to help you understand the error and feed the solution back to the agent.

4. Deploy and Scale

• One-Click Deployment: Use integrated cloud services (e.g., Replit's Google Cloud abstraction) to get a live URL immediately.
• Maintenance: Use the agent to run periodic SQL queries or update packages.
• Human-in-the-Loop: If the agent reaches a fundamental architectural limit (like complex database sharding), use the prototype as a "live PRD" to hand off to a professional engineer.

Core Principles: "Amjad's Law"

• ROI on Learning to Code: The return on investment for learning to read and debug code (not write it from scratch) doubles every six months as AI agents become more powerful.
• Generative over Executional: Your value shifts from "managing a process" to "generating ideas." The faster you can generate and test ideas, the more successful the product.
• AI-Computer Interface (ACI): Treat the environment as a computer designed for an AI. Give the agent tools (Shell access, SQL access, File editor) rather than just a chat box.

Examples

Example 1: Internal Feature Request Dashboard

• Context: A PM needs a way for users to vote on upcoming features to help prioritize the roadmap.
• Input: A prompt specifying: "Build a Node.js web app where users can submit feature requests, upvote them, and I can move them from 'Planned' to 'In Progress' via an admin login."
• Application: The agent builds the Postgres schema for votes, the React front-end, and the auth for the PM.
• Output: A live URL the PM shares with the community to collect real data in 10 minutes.

Example 2: Marketing Competitive Pricing Tool

• Context: A Marketing Lead wants to monitor a competitor's pricing daily without manual checks.
• Input: "Build a Python app that scrapes [Competitor URL] daily, saves the price of 'Product X' to a database, and alerts me via Slack if it drops below $50."
• Application: The agent sets up a cron job (scheduled task), handles the web scraping logic, and integrates the Slack API.
• Output: A background tool that runs indefinitely, providing the team with a competitive edge.

Common Pitfalls

• The "Git" Trap: Don't waste time learning low-level version control (Git) or environment configuration. Let the agent manage the "nonsense" and focus only on the app's logic and UI.
• Vague Iteration: Avoid saying "Make it better." Instead, say "Add a comment thread to the feature request page" or "Change the font to Inter."
• Migration Errors: AI agents can struggle with changing existing database structures. If an error occurs after adding a feature, ask the agent to "Show me the current database schema and tell me why the last change failed."
• Over-Siloing: Don't wait for a "final design" to start building. Use the agent to build the functional prototype first, then use a Figma-to-Code extension to clean up the pixels.