Skip to content
AI Growth Lab
Navigation menu
AI Growth Lab

Loading lesson…

CoursesContactPrivacy

Curriculum based on Datawhale / Easy Vibe · CC BY-NC-SA 4.0

← Back to course

AI-Native Engineer

Claude Code Fundamentals
  1. Getting Started with Claude Code
  2. Essential Claude Code Techniques
  3. Configuring Claude Code for Your Project
  4. Everyday Development Workflows
  5. Troubleshooting Claude Code
MCP: Connecting Claude Code to Tools
  1. Getting Started with MCP in Claude Code
  2. Using and Troubleshooting MCP
  3. Configuring Common MCP Servers
Claude Code Skills
  1. Finding and Using Your First Skills
  2. Understanding Skills and SKILL.md
  3. Creating and Improving Your Own Skills
  4. How Claude Skills Work Internally
Claude Agent Teams
  1. Understanding and Setting Up Agent Teams
  2. Build an RPG with Agent Teams
  3. Agent Teams Best Practices
  4. Choosing When to Use Agent Teams
AI-Assisted Development Workflows
  1. Choosing an AI Development Strategy
  2. Developing Features and Fixing Bugs with AI
  3. Refactoring and Reviewing Code with AI
  4. Building a Project Knowledge Base
  5. Improving AI Collaboration Efficiency
Building Agents with Claude Agent SDK
  1. Getting Started with Claude Agent SDK
  2. Advanced Features and Practical Agent Examples
  3. Building a Code-Quality Guardrail Pipeline
Engineering Workflows with Superpowers
  1. Getting Started with Superpowers and Its Core Skills
  2. Build an Authentication System with Superpowers
  3. Configuring and Using Superpowers Effectively
Spec Coding
  1. Spec Coding Foundations
  2. Practicing Spec Coding in Claude Code
  3. Moving from Vibe Coding to Spec Coding
  4. Spec Coding FAQ and Summary
GitHub Spec-Driven Development
  1. Workflow Foundations and Setup
  2. From Product Idea to Specification
  3. From Specification to Working Software
  4. Reusable Prompts and Responsible Autonomy
Cross-Platform Development
  1. From a Web Page to Real Software and an AI-Native Product
  2. How to Choose the Right Platform for Your App
  3. How to Build an Android App with Jetpack Compose
  4. How to Build an iOS App with SwiftUI
  5. Build a Store Inspection App with React Native and Expo
On this page
  • 3.1 Developing a New Feature
  • 3.2 Fixing Bugs

3. Workflows for Common Development Tasks

In day-to-day development, we encounter many different types of tasks. Below are several of the most common AI-assisted workflows.

3.1 Developing a New Feature

Scenario: the product manager gives you a new requirement, and you need to implement a new feature.

Complete workflow:

Lesson Contents

  1. 3.1 Developing a New Feature
  2. 3.2 Fixing Bugs
AI Development FAQ and Summary
How to Build a Cross-Platform App with Flutter
  • How to Build a PWA Local App
  • How to Build a Browser AI Assistant Extension
  • How to Build a Cross-Platform Electron Desktop App
  • How to Build Platform, Pixel-Art, and 3D Games with Godot
  • How to Build a VS Code Extension
  • How to Build an Industrial Qt Desktop App
  • How to Build Your Personal Website and Academic Blog
  • How to Publish the Application You Built

    • Step 1: Understand the requirement (done by you)

    Before you start coding, first clarify:

    • What feature needs to be implemented?
    • What are the inputs and outputs?
    • What are the edge conditions and exceptional cases?
    • What are the performance and security requirements?

    Step 2: Understand the existing code (ask AI to help)

    I need to implement a user comment feature. Please help me:
1. Check whether there is anything similar in the project
2. Find how user data and article data are stored
3. Understand the database operation conventions in this project

    Step 3: Make an implementation plan (with AI)

    Based on the analysis we just did, implementing the comment feature requires:
1. Creating a comment data model
2. Implementing CRUD APIs for comments
3. Adding comment display and posting functionality to the frontend

Please help me confirm whether this plan is reasonable and whether anything is missing

    Step 4: Implement the feature (AI generates, you review)

    According to the plan, first implement the comment data model.
Requirements:
- Include comment content, author, article ID, and creation time
- Support nested comment replies
- Add necessary indexes

    Now implement the comment API endpoints.
Requirements:
- Post a comment
- Delete a comment (only your own comments can be deleted)
- Get all comments for an article
- Support pagination

    Finally implement the frontend comment component.
Requirements:
- Show the comment list
- Comment posting form
- Support replying to comments

    Step 5: Test and verify (done by you)

    • Manually test the main flow
    • Test edge cases such as empty content and overly long content
    • Test permission control such as being unable to delete someone else's comment
    • Ask AI to help you write automated tests

    Real conversation example:

    You: I want to add a user comment feature so users can post comments on articles

AI: Okay, let me first understand the project structure.
    [AI analyzes the project code]
    I see that the project already has a user system (models/user.js)
    and an article system (models/article.js).

    Implementing the comment feature requires:
    1. Creating a comment data model (models/comment.js)
    2. Adding comment-related APIs (routes/comment.js)
    3. Adding comment display and posting functionality to the article detail page

    Should I start implementing it?

You: Yes, let's start. Create the data model first

AI: [Generates models/comment.js]
    I have created the comment data model with these fields:
    - id: comment ID
    - content: comment content
    - userId: author ID
    - articleId: article ID
    - parentId: parent comment ID (for nested replies)
    - createdAt: creation time

    Should I implement the API next?

You: Yes, implement the API

    3.2 Fixing Bugs

    Scenario: a user reports a problem, and you need to locate and fix it quickly.

    Complete workflow:

    Step 1: Gather information (done by you)

    Record the following information:

    • What is the error message?
    • How can this problem be reproduced?
    • When did it start happening?
    • How large is the impact scope?

    Step 2: Locate the problem (ask AI to help)

    User feedback: after clicking the "Submit Order" button, the page freezes
Browser console error: TypeError: Cannot read property 'id' of undefined
The error occurs on line 45 of checkout.js

Please help me:
1. Analyze possible causes
2. Find the relevant code
3. Check the data flow

    Step 3: Analyze the root cause (with AI)

    Check where this user object comes from
Inspect under what circumstances user could be undefined

    Step 4: Implement the fix (AI generates, you review)

    Fix this problem with these requirements:
1. Add defensive code to check whether user exists
2. If user does not exist, redirect to the login page
3. Add a friendly error message

    Step 5: Verify the fix (done by you)

    • Reproduce the issue using the original steps and confirm the problem is solved
    • Test related functionality to ensure no new problems were introduced
    • Think about whether similar problems exist elsewhere

    Real conversation example:

    You: A user reported that after logging in, refreshing the page logs them out

AI: This is usually a token storage or validation issue. Let me check:
    1. Where is the token stored, localStorage or cookies?
    2. Is the token reloaded when the page refreshes?

    Please tell me which file contains the token-related code

You: utils/auth.js

AI: [Analyzes utils/auth.js]
    I found the issue: the token is stored in sessionStorage,
    and sessionStorage is cleared when the page is refreshed.

    Solution: use localStorage instead

    Would you like me to change it?

You: Yes, change it

AI: [Modifies the code]
    The change is complete. The token is now stored in localStorage,
    so it will not be lost after a page refresh.

    I recommend that you test:
    1. Log in and refresh the page to confirm the user stays logged in
    2. Close and reopen the browser to confirm the user stays logged in
    Previous
    Sign in to track progress
    Next