Tubegraph

AI coding workflow and fundamentals

6 min read

From: gregisenberg

Successfully leveraging AI for coding requires a structured approach that addresses the inherent unpredictability of large language models (LLMs) [00:31:00]. While tutorials might suggest that AI can build an entire application from a simple prompt [00:44:00], reality often presents unpredictable results and numerous errors [00:53:00]. The problem to solve is how to streamline the AI coding flow to achieve more predictable outcomes [00:28:00].

Core Workflow Principles

An effective AI workflow integration strategy focuses on consistency and reducing ambiguity [01:16:00]. The recommended workflow involves three key steps:

1. Write Clear and Detailed Specs Up Front

Spending significant time upfront to write very clear and detailed specifications is crucial [01:30:00]. This step is about communicating effectively with AI, much like a product team works with engineers [01:52:00].

  • Simulate Product Team Process: The aim is to simulate how a product team normally works, with a Product Manager (PM) writing core functionality specs and an engineering manager detailing individual tickets or architecture [01:56:00]. This leaves less ambiguity [02:11:00].
  • Uncover Uncertainty: This process helps uncover many uncertainties upfront, leading to more consistent results [02:22:00].
  • Structure: A common spec structure includes a project overview, core functionality breakdown, documentation for key features, current file structure, and additional requirements [09:14:00].
    • Project Overview: Simple statement of the project’s purpose, e.g., “building a Reddit analytics platform” [11:19:00].
    • Core Functionality: Must-have features, e.g., listing subreddits, adding new ones, displaying top posts and analysis in tabs [11:43:00].
    • Key Feature Documentation: Include proof-of-concept code snippets for critical functionalities, such as fetching data (e.g., Reddit posts with Snow-Wrap) and categorizing data using structured output (e.g., OpenAI) [12:53:00]. This allows for early debugging and alignment [17:19:00].
    • File Structure: Communicate the project’s file structure to AI tools like Cursor to prevent incorrect file creation or dependency issues [10:02:00]. Tools like tree can help generate this [34:16:00].
    • Additional Requirements: Specific instructions for web apps (e.g., use client, environment variables, error handling) or iOS apps (e.g., file creation, API calls) [10:19:00]. These can be saved as templates [10:54:00].
  • Leverage Stronger Models for Detail: Use more powerful models (e.g., GPT-4o) to expand the initial draft into a detailed Product Requirement Document (PRD) [35:38:00]. This acts like an “engineer manager” filling in architectural details and dependencies [35:48:00].

2. Be Clear About the Role of Different Platforms

Understanding when to use which tool for specific tasks is essential [02:37:00].

  • Functionality First (e.g., Cursor): Focus Cursor on building core functionality without initially considering the User Interface (UI) [02:49:00]. This is contrary to common practice but yields more success [02:55:00]. Building functionality first ensures the core project works as intended, making UI improvements more predictable later [46:08:00].
  • UI Touch-ups Later (e.g., Vercel v0): Use tools like Vercel v0 to refine and enhance the UI interface bit by bit, once the underlying functionality is robust [02:57:00]. Providing examples of desired styles, like “similar to Vercel,” helps guide the AI [46:48:00].

3. Reusable Modular Prompts

Developing and sharing reusable, modular prompts for standard features can significantly speed up the development process [03:08:00].

  • Standard Features: Features like user sign-in (authentication) or payment systems are often similar across different projects [03:44:00]. Instead of rebuilding them every time, a collection of pre-tested prompts can generate the entire functionality [03:50:00].
  • Community Sharing: The community could benefit from an aggregator of such modular prompts to facilitate sharing and reuse [55:14:00].

Practical Application: Building a Reddit Analytics Platform

The described workflow is demonstrated through building a Reddit analytics platform [06:17:00].

Initial Setup and Spec Creation

  1. Repository Setup: Start with GitHub for version control [08:45:00].
  2. Draft Spec: Begin with a draft spec inside the Cursor composer, outlining the project overview, core functionalities, and additional requirements [09:07:00].
  3. Proof of Concept (POC): Before full implementation, build small POCs for critical functionalities.
    • Reddit Data Fetching: Use ChatGPT to identify a suitable package (e.g., Snow-Wrap) for fetching Reddit data in a Next.js project [13:28:00]. Then, use Cursor to generate a simple TypeScript script to fetch posts, including details like title, link, and score [14:46:00]. Ensure environment variables (.env) are used for credentials [15:25:00].
    • OpenAI Structured Output: Create a script using OpenAI’s structured output to categorize subreddit posts based on predefined categories (e.g., “tools and solutions,” “pain and anger,” “advice request,” “money talk”) [20:34:00]. It’s important to refine the prompt to make it generic and avoid hardcoding JSON structures [25:49:00].
    • Debugging POCs: Debugging and problem-solving strategies with AI coding are crucial here. If errors occur, prompt the AI with “help me debug” or “help me fix it” [17:33:00]. For more complex issues, using “let’s think step by step” leverages a “chain of thought” prompting technique, breaking down problems into smaller steps for better results [29:42:00].
  4. Project Setup: Initialize the project (e.g., with Shadcn UI components like button, input, dialogue, tabs) [32:30:00]. Create an instructions folder and copy the draft spec and .env.local file [33:42:00].
  5. Generate Detailed File Structure: Use a tree command to capture the project’s file structure (excluding node_modules and .git) [34:51:00]. Paste this into the spec to inform Cursor where to create files [35:10:00].
  6. Engineer Manager Role (GPT-4o): Use a stronger model like GPT-4o to elaborate on the spec, generating a comprehensive project file structure and identifying dependencies based on the initial documentation [36:00:00]. This detailed PRD makes the development process much smoother for the AI, similar to how engineers prefer detailed specs [38:05:00].

Iterative Building with AI

Once the detailed spec is ready, build the application functionality step by step using Cursor.

  1. Break Down Tasks: Instead of one-shotting the entire application, break it down into smaller, manageable tasks defined by the spec [39:41:00]. This reduces the likelihood of errors and makes debugging easier [40:47:00].
  2. Iterative Implementation: Implement each part sequentially, prompting Cursor to refer to the documentation and make sure it builds according to the plan [40:39:00].
  3. Debugging: If errors occur, add debug information to the code [42:35:00]. This provides Cursor with specific error messages to fix, improving the effectiveness of debugging and problem-solving strategies with AI coding [42:52:00].
  4. UI Refinement: Once the core functionality is stable, transition to Vercel v0 to refine the UI. Since the code is already functional, UI adjustments become more predictable [46:02:00].

Reusable Prompts in Action

A crucial aspect of AI workflow integration strategies is the use of reusable prompts. For instance, a pre-written prompt for user authentication can be adapted and applied to different projects [52:01:00]. By following the documented steps within the prompt (e.g., setting up OAuth, installing libraries, building sign-in/sign-up pages), Cursor can quickly implement standard features [53:33:00]. This approach can be extended to other common functionalities like payment systems [55:06:00].

Conclusion

This structured workflow, emphasizing detailed upfront planning, specific tool roles, and reusable prompts, transforms AI coding challenges into a more predictable and efficient process [56:05:00]. It changes the role of the product manager, enabling them to also act as engineers by writing specs and building the product [38:10:00]. While not a one-shot solution, it significantly speeds up development compared to traditional methods, providing an “electric-assisted bicycle” boost to the coding process [57:37:00].

Graph View