Vibe Coding - Product Requirement and Design

Proper product design or product planning is a key to build a successful software. In traditional programming, a careful planning is done by business analysts in conjunction with business owners resulting in formal requirements and wireframes. Having a well define product requirements ensures a smooth development process. In vibe coding, we can even define product requirements and product design with the help of AI.

We give instructions to generative AI in plain natural language and AI generates the document with product requirements and wireframes.

Creating a Product Vision

In order to make an effective use of AI in Vibe Coding, we should first create a product vision using AI collaboration. We can ask AI, series of related questions to define our application's purpose and use cases.

Example - Agricultural Parts Store

We can begin the conversation with the generative AI by describing the idea and series of questions as shown below −

• Problem Identification − Ask AI the requirement in plain language. Describe the end purpose and target users. For example - "To create a online store for spare parts used in agricultural field."

• Target Users − Mention the end user needs, and their technical abilities. It helps to decide the scope of the product. For example - "Application should work in low network bandwidth areas as farmers works in fields. User interface should have images of the spare parts."

• Platforms − Mention the target platforms for the application. For example - "Code should work on mobile devices as well on laptops web browsers."

• Scope of Features − Ask AI for core features to be included in initial product offering. Ask features which can be added later. For example - "A prototype with parts search. Payments module can be added later."

• Technology Stack − Mention the programming language, frameworks and any tools. For example - "Application should be developed using Node and React".

• Data Requirements − Decide what data to persist, process and to be displayed. For example - "Parts name, title, description and image should be displayed."

• Security Constraints − Ensure that privacy, security concerns are addressed. Compliance issues to be checked. For example - "Prototype is not required to handle sensitive information, so minimal security constraints are fine.".

Creating a Product Requirement Document

Product Requirement Document, PRD is a very important artifact in a software development life cycle. It acts as a blue prints for both developers and as well AI tool. PRD is also shared with share holders to validate the requirements.

Next goal in Vibe coding is to transform our Product Vision into a Product Requirement Document with the help of AI. We can ask AI to create a PRD after sharing the product vision and ask following sections to be prepared −

• Product summary − Summarize the App and target goal of the App.

• Target audience − In this section, mention the end users.

• Core features − List core functionalities to be developed as part of MVP, Minimum Viable Product.

• UI descriptions − Describe Layout and design fields for each navigable screen.

• Navigation − Describe navigation ways, like breadcrumb, top menus or side menus.

• Sample data − A sample data to mention the format and target products to be shown.

• Technical requirements − Mention frameworks, programming languages to be used. For example - Node, react etc.

• Styling − Look and Feel of the application, Responsive layout etc.

• Use cases −User work flows, interactions.

• Out-of-scope − Excluded features

Once PRD is created, we can organize features in following three categories.

• Must-have − Core features to be developed as part of initial product offering.

• Should-have − Features which enhances user experience but can be added later.

• Could-have − Optional features which can be added as product matures.

Example User flow

Entry → List Products → Show Product Details → Add to Cart → Review Cart → Checkout → Confirmation

A PRD should have wireframes and user flow diagrams which makes it easier to comprehend and communicate the requirements. We can ask AI tools to create wireframes, user flow diagrams and interface specifications.

Define Coding Standards and Guidelines

We can ask AI Tools to define coding standards to ensure quality and consistency in code generated by AI.

• Code style − Naming conventions, code formatting styles, documentation, comments style.

• Security − Validations, authorization, authentication, and data protection.

• Testing − Unit testing, integration testing, test coverage etc..

• Performance − Option to do Load handling,to test response times for peak loads

• Accessibility − Inclusive design.

Example Prompt

Suggest coding standards for a responsive web app built with React. Include Formatting, testing, load and performance guidelines.