• Fast Principles
  • Posts
  • Code is a design tool and you don’t even have to code anymore

Code is a design tool and you don’t even have to code anymore

AI-PRDs could become the the new frontier of design prototyping with AI tools

Author

Jason DePerro
September 12, 2024

Remember when prototyping meant spending weeks in Figma or coding from scratch? Those days are over. With AI-powered product requirements document (AI-PRD), you can now go from documentation to functional prototype in 5 minutes. 

Yes, you read that right – 5 minutes. 

Okay, okay — it takes time to craft a well thought out product experience. Once this step is done the AI agent, in this case V0, can take it away and generate the prototype in a few minutes. Let’s talk about the AI-PRD and what it takes to craft a well thought out plan.

The AI-PRD is a living document that supports that contains the detailed requirements for a digital experience a human product owner wants an AI agent or agentic team to build. The goal of an AI-PRD is to create fine-grained control needed to drive the development of a product. Basic prompts are prone to miss the intended work output or give errors. AI-PRDs can be quickly written in a half-hour for a small project or take a day or several days for complex projects that require aligning teammates. 

This document contains familiar elements to a traditional PRD, but goes a step further into more detail documentation about features, for example, including component names the user wishes to be utilized by the agent developer. Further, project management details can be included about which agent is to be tasked and what the success criteria are. For basic capabilities like this web app we stick to a basic AI-PRD. 

The AI-PRD Creation Process

To kick things off, we leveraged AI tools to help us craft an AI-PRD for our latest project. We wrote a vision document describing the problem we are solving, who the user is, our solution, the key features and their capabilities. Then, we turned to Claude, our trusty AI assistant, to refine and expand the PRD, ensuring it covered all the necessary details.

Vision Statement Example: 

Purpose:
To create a continuous research assistant that helps academic researchers and professionals stay updated with the latest information on a given topic. The assistant uses AI to search, analyze, and deliver relevant, accurate, and up-to-date findings based on a customizable schedule (daily, 2x daily, weekly, 2x weekly, monthly).

User:
The audience for the web are are designers, design technologists, and product owners working on researching new digital product experiences and other research topics.

Goal:
Provide continuous research results about topics of interest to the user. The feed of a search topic will continuously refresh and add to the search results.

Key Features: 

1. Continuous Research Monitoring

The tool will continuously monitor selected topics and perform AI-driven searches to gather the most up-to-date information.

2. Customizable Search Frequency

Users can set the frequency of searches (daily, 2x daily, weekly, 2x weekly, monthly) based on their needs.

3. Summarized Results with Sources

The assistant will present users with concise summaries of the findings about how ti ties to the search query, including relevant links to the original sources for verification.

4. Topic Customization and Refinement

Users can define and refine their research topics by adjusting keywords, sources, and other parameters.

6. Search History and Archive

Users will be able to view and archive previous searches and reports to track how research evolves over time.

From AI-PRD to Prototype

With a well-defined AI-PRD, we were ready to build the prototype. Enter V0, a powerful AI agent developer from Vercel. We fed our AI-PRD into V0 as a prompt, and in under a minute, it generated a first version of the web app.

Case Study: Building a Research Agentic App

For this experiment, we decided to continue our exploration from the VertexAI vs. CrewAI provocation and build a prototype research assistant app. This app is designed to help users conduct recurring research on important topics, similar to Perplexity and Google Alerts.

V0 prototype of our research assistant interface

Results from our experiment writing an app prototype with just an AI-PRD Experiment

  • PRD Writing with Claude:
    Claude did a great job of fleshing out a comprehensive and well structured AI-PRD based on our initial vision statement and feature list. 

  • Prototyping with V0: 
    The code it generated was readable and familiar, using React.

  • Strengths and Limitations:
    V0 proved to be a capable tool for visualizing and rapidly iterating on digital projects. It excelled at writing the front-end code for our app. However, the limitations became apparent when it came to implementing complex systems, such as connecting the app to a language model or setting up a robust backend and database management.

  • Review of the Delivered App:
    The app generated by V0 had readable, front-end code, but it was hard-coded rather than dynamically connected to any data sources. While it served as a useful wireframe or prototype, it still required the collaboration of a human backend developer to create a fully functional end-to-end system.

Ready to get started prototyping with AI agents?

Want to test the process shared in today’s newsletter? Here are all the tools and resources: 

Brought to you by your AI agent guides

Hit that reply button and tell us: What burning topic should we tackle next? We're all ears! 👂✨