AI-Assisted Code Development Workflow: Define, Refine, Multiply, Expand
This video presents a comprehensive workflow for AI-assisted code development, broken down into four key phases:
Introduction and Overview
- The presenter, Matt, shares his experience building code almost exclusively with AI for "several years."
- He describes his workflow as "really tight" and "highly successful," especially with today's AI models and tools.
- The video will guide viewers from a "really rough idea" through ideation, planning, defining, refining, multiplying with agents, and expanding uses of AI.
1. Define Phase
- This phase is about capturing information, brainstorming ideas, and creating a clear definition of what needs to be built (the "what," not the "how").
- Ideation: Matt often starts with raw ideas, free-associating into a microphone to generate initial thoughts and then visual aids like a mock-up of the desired changes.
- Product Requirements Document (PRD): He uses ChatGPT (specifically GPT-4.5) to convert raw ideas, visual notes (an annotated screenshot), and existing documentation into a structured PRD.
- Crucial Step: Matt emphasizes that the definition phase is "incredibly important" and represents "70% of the meaningful work," believing it will be a major focus for future development.
- AI's Role: ChatGPT synthesizes the provided inputs into a clear, concise requirements document, detailing goals (e.g., smooth interaction, clear mental model, rich navigational context), experience overview, detailed requirements (e.g., ghosted interaction, robust handles, scroll gestures), and success criteria.
2. Refine Phase
- This phase focuses on iterating and improving the initial AI-generated code, as the first attempt is "never perfect."
- Context Management: The most critical aspect of refining is managing the AI's context window. Matt stresses the importance of minimizing the information in the context to ensure the AI focuses on the current problem.
- Clearing Context: He uses a
/clearcommand (or its equivalent) to reset the conversation history and free up context frequently, especially after completing a small, discrete task, ensuring the AI only has relevant information for the next step. - Visual Feedback (Screenshots): Since AI models like Claude Code don't "see" the UI, Matt uses screenshot utilities (like CleanShot) to capture visual states and annotate them with arrows and text. These images are then pasted directly into the AI's chat, enabling precise visual communication and iterative UI/UX refinement.
- Testing: Matt highlights the necessity of explicitly instructing the AI to write and run unit, visual, or end-to-end (E2E) tests. He includes these directives in his
CLAUDE.mdmemory file to ensure consistent test generation. He warns that without solid tests, making future changes will be problematic.
3. Multiply Phase
- This phase leverages cloud-based AI development environments to run multiple AI agents in parallel, accelerating the development process.
- Cloud-Based Agents: Matt uses Claude Code (and mentions similar features in CodeX and Gemini) to launch multiple, asynchronous tasks (sessions) within a project.
- Benefits: This allows him to initiate several related changes simultaneously without waiting for each to complete, effectively multiplying his output.
- Detached Operations: The tasks run in the cloud, independent of his local machine. He can close his computer, work on other things, or even initiate tasks from his phone.
- Iterative Comparison: He often kicks off multiple similar changes to compare different approaches and select the best one later.
- Pull Requests (PRs): Once tasks are completed in the cloud, they are pushed back to GitHub as PRs, ready for review and merging.
4. Expand Phase
- This phase explores using AI tools beyond traditional code generation, applying them to non-coding tasks like research, content generation, and data enrichment.
- Non-Coding AI Applications: Matt demonstrates using Claude Code for tasks that aren't directly coding but are crucial for a project.
- Custom AI Agents (Slash Commands): He creates custom slash commands (e.g.,
/history:editor) that act as specialized AI agents. - Data Enhancement Example: He shows an agent designed to enhance a historical timeline JSON file. This agent follows specific rules (defined in a markdown file) to:
- Validate image URLs (using a bash script tool).
- Search for and replace broken or missing image URLs with valid Wikimedia Commons images.
- Enhance descriptions, ensuring they are concise, interesting, and evocative.
- Ensure events are correctly grouped and identified.
- Iterative Data Transformation: The agent can iterate through the entire JSON dataset, applying these rules and making external web searches to enrich the data, effectively transforming raw data into high-quality, well-researched content.
- Persistence: These custom slash commands (agents) are stored within the project's repository, allowing him to reuse them and share them with other team members, maintaining consistency and efficiency across projects and over time.