Start with a Snake game: ask AI to write code in small steps, run it, and check the results yourself. Then follow the development of an e-commerce content tool, from identifying a user problem and defining a manageable first version to debugging, recovery, deployment, and observing real use. Learn to turn an idea into a web product other people can use.

适合人群

People without formal programming training who want to build web products with AI
People who use AI chat but struggle to explain requirements, limit changes, or check results
People who have built a page or demo and need help with errors, recovery, or deployment

解决的问题

A page looks finished, but people cannot complete the task it is meant to support
Too many first-version features make it hard to decide whose problem to solve first
When AI breaks the code, you struggle to find the cause and protect existing work

学完收获

Identify your first users and a specific problem, then define the core user flow and scope of the first version
Give AI the relevant project information, review the plan, and complete one small user flow at a time
Run the product yourself, investigate problems with developer tools, and retest after changes
Use Git to save recovery points and protect existing changes
Define release checks, deploy a public version, and use observed user behavior to choose the next improvement
Document your AI coding process and turn a proven, recurring workflow into a Skill

课程亮点

Start with a Snake game, then follow an e-commerce content tool through the full development process
Twenty-one core lessons cover requirements, implementation, verification, deployment, and feedback
Four appendices explain 100 common terms so you can describe requests and understand what AI is doing
Check completion by running the product; you can begin without memorizing programming syntax

全部章节

25 个章节

Lesson 1: Get Your First Idea Running

Narrow an initial request to a small runnable, observable result, propose a bounded change based on actual gaps, and complete a feedback loop by retesting the original path and adjacent behavior.

Lesson 2: Choose Between Browser Tools, AI IDEs, and the CLI

Choose a browser tool, AI IDE, or CLI based on setup cost, project context, control, and operational risk.

Lesson 3: Run the Code and Verify the Fix

Turn a vague failure into a reproducible problem report and use matching runtime evidence to decide whether the fix is complete.

Lesson 4: Find the Real Problem Behind the Idea

Rewrite a broad product idea as a testable problem statement centered on the gap between a user's current situation and desired outcome.

Lesson 5: Choose First Users You Can Study

Select an accessible, testable first user group from a broad audience by looking for a shared situation, difficulty, and goal.

Lesson 6: Turn a Vague Request into a Core User Flow

Use business questions to turn a vague product request into a core flow with input, processing, output, and essential failure feedback.

Lesson 7: Use an MVP to Control the First Version

Define what the first version must include, what can wait, and what is explicitly out of scope around one validation goal.

Lesson 8: Write Acceptance Criteria You Can Actually Check

Write acceptance criteria along the core flow that are executable, observable, decisively pass or fail, and cover critical states.

Lesson 9: Understand Files, Runtime, Data, and Services

Explain a small web product through four layers—project files, runtime, saved data, and external services—and identify which layers a request affects.

Lesson 10: Provide the Context Your Coding Task Needs

Select and organize enough relevant context for a specific coding task so AI has less room to guess about the current state, scope, and done criteria.

Lesson 11: Review the Plan Before AI Starts Coding

Review an implementation plan for correct intent, bounded scope, sensible order, risk controls, stopping points, and verification before AI makes changes.

Lesson 12: Describe a Product Through Objects, State, and Data

Describe product behavior through objects, properties, states, relationships, and actions, then use sample data to check whether the description is consistent.

Lesson 13: Build the First Complete Vertical Slice

Split a large requirement into a first vertical slice that connects user input, minimal processing, and a visible result.

Lesson 14: Turn the Demo into a Usable First Version

Find breaks in a demo by following real use, then add the state feedback and persistence behavior required for a usable first version.

Lesson 15: Use Git to Create Recoverable Checkpoints

Use Git to establish a clear before-and-after boundary for an AI change and choose whether to commit, revise, or recover without overwriting the learner's existing work.

Lesson 16: Debug from Symptoms and Evidence

Diagnose a bug in the order of reproducible symptom, relevant evidence, one hypothesis, minimal change, and retest.

Lesson 17: Set a Minimum Quality Bar

Derive a minimum quality bar from the product's promises and risks, then use it to decide whether to release or pause.

Lesson 18: Deploy a Version Other People Can Reach

Explain and verify the minimum delivery path from a fixed code version through build and environment configuration to deployment, production retesting, and rollback.

Lesson 19: Observe Real Users at Work

Record behavioral facts during a specific user task, separate them from interpretations and suggestions, and turn feedback into the next testable question.

Lesson 20: Build Your Personal Vibe Coding Workflow

Organize project experience into a personal workflow for defining, planning, executing, verifying, and recording work, with check depth adjusted to task risk.

Lesson 21: Turn a Repeatable Process into Your First Skill

Decide whether a repeated process deserves to become a Skill and design the smallest structure that can trigger, execute, and validate correctly.

Lesson 22: Remember AI Collaboration and Product Terms

Recall and accurately use core AI collaboration and product-definition terms in real Vibe Coding situations, including the differences between closely related concepts.

Lesson 23: Remember Frontend Page and Interaction Terms

Identify frontend structure, layout, controls, and feedback states on a web page, then use accurate terms to describe a requested change to AI.

Lesson 24: Remember Backend, Data, and Deployment Terms

Recall backend, network, storage, security, and deployment terms along a web request's data path, then use them to identify the layer where a problem occurs.

Lesson 25: Remember Development, Testing, and Git Terms

Understand the common terminal, technology-stack, testing, and Git operations performed by AI, then use accurate terms to constrain changes, verification, and delivery.