The first step in "learning by doing" is simply to get started!!

This year, a line from "漂白"—“learn by doing”—has been on fire. It’s become so popular that even though I haven’t watched the series, I often find myself repeating it. Many times, when working on projects or small tasks, you simply need to dive in without hesitation. The act of doing transforms learning from the abstract notion of "knowing" into a tangible, hands-on "experience."

DeepMind researcher Stefania Druga, when confronted with the impact of large language models on programming, did not predict the end of coding. On the contrary, she urged educators, “Don’t limit teaching to explaining syntax; instead, treat AI as a collaborative partner and consider ‘being able to complete a project’ as the minimum standard for learning.”

In her view, tools like ChatGPT have lowered the barrier for learning by doing to an all-time low. This, in turn, forces classrooms to transition toward a project-centered design—in other words, replacing “writing code” with “crafting a runnable narrative.”

Similarly focused on educational evolution is The Chronicle of Higher Education. In a column by Chad Raymond, the author juxtaposed the impact of calculators on math classes in the 1970s with today’s generative AI in the humanities: when tools can complete the “result,” teachers must free up time to discuss the “why.”

He advocates for students to continuously trial and error within open-ended projects, using AI as an instant-feedback "second pair of eyes." Essentially, this creates an institutional safety net for learning by doing.

Exploring with AI in a “get it done quickly” style—turning ideas into little toys—is incredibly satisfying. It helps me break tasks down, generate an initial frontend scaffold, and even uses a few clear Shell commands to tell me how to set up a repository.

The first time I saw a green checkmark next to a remote branch on GitHub, I truly understood the differences between push, fetch, and rebase—no textual explanation had ever given me that “new muscle memory” sensation.

The Joy and Benefits of “Toy” Projects

In just a few days, I built my personal website (yrzhe.top). The only cost was for the domain name—of course, there was also time and effort involved—but the positive feedback I received is hard to quantify. Once the site went live, AI and I optimized the interface and filled in the content. Gradually, the website became clean and attractive, adding both a survey module and a demo module, in which AI and I created many demo toy webpages.

For instance, I’ve recently created several websites that I find quite useful. First, there’s “Markdown to Image,” and then there’s “SEO Agent.” Although both are still in the realm of toy projects, the satisfaction when finishing them is immense. Throughout the process, the tool that helped me the most was Gemini 2.5 Pro, thanks to its extended context window and its ability to upload my entire code folder directly.

This website allows you to input text in Markdown format, generating an image preview on the right. You can choose whether to split the image by a horizontal line, upload your own fonts, and even select different backgrounds.

SEO Agent, on the other hand, lets you input a URL, HTML content, or Markdown text, and choose the AI model provider, specific model, and key. You can experiment freely to generate SEO insights and review your content. This page was entirely built by AI, so its workflow is autonomously managed by the AI agent, meaning the SEO results might not be perfect—but continuous interaction allows for iterative debugging.

Typically, achieving functionality with AI models comes easily, yet the aesthetic refinement of the interface may still need work. For that, I used a tool called Yourware—a platform touted as the Instagram for vibe coders—where you can share front-end web designs. It displays many visually appealing projects and features a function called "Boost Your Design" to help optimize your interface.

For example, I have a “Mother’s Day” themed website (its functionality is a bit lacking; this is purely about the interface🤣). I asked Yourware to optimize it. The system uses a reasoning model to think through adjustments, and the modified interface looks as follows:

I also optimized the SEO Agent web page interface using Yourware, and found that some elements looked much better. If you have further ideas, click the “remix” button at the bottom right of the shared webpage to start your creative spin-off.

The Toolbox: A Workflow to Realize Your Ideas

No single tool can achieve everything you want because each has its own strengths and weaknesses. That’s why we combine different tools.

One of Gemini’s advantages is its long context window—you can upload your entire code folder and have Gemini grasp every detail, enabling it to pinpoint the correct locations based on the overall context. Yourware, on the other hand, excels at aesthetics and has a v0 tool that can handle complex, highly interactive projects step by step. Gemini is the tool that gets things done in one shot. In v0, you can freely edit your code; so if you have some coding background, you can truly harness its potential.

Recently, I also discovered another handy AI agent tool—Scout. I’ve been using it intensively for research, data collection, and analysis. My current workflow is to use Scout for gathering and analyzing data, then have it generate a website. I start by opening the demo website to see what needs filling or fixing, then hand over the complete code folder to Gemini with the specific requirements. Gemini points out exactly where changes are needed, and I make the necessary adjustments. Once the demo is complete, I use Yourware to refine the page design.

V0, meanwhile, lets you handle more sophisticated tasks. For instance, I built a website that fetches and updates news. V0 features a preview, a code editor, and a chat box on the left. You can ask it to generate a demo in the chat, preview the result, and then adjust specific details in the code. Essentially, it integrates an IDE, deployment tools, and vibe coding into one platform.

Recently, my membership for my blog-building tool expired. With annual fees running into the hundreds or even thousands, I had the idea to build my own blog page—consolidating all content under one domain. I started by using v0 to generate a blog page based on the design of my main page.

Troubleshooting and Breakthroughs: What to Do When You Hit a Snag

The biggest challenge I encountered was that the website-building framework used by v0 differed from the framework of my main blog site. I needed to integrate the v0 output into my main website, but my site is primarily built in HTML, whereas v0 uses files with a tsx extension. Faced with this, I simply asked ChatGPT for help.

I provided the context—first, the structure of the files generated by v0, and where in my main website’s folder they should be placed. Then I showed it the framework of my main website’s folder and asked how to deploy and build the files on GitHub and Netlify.

AI makes writing code easier, but it doesn’t guarantee that everything will mesh perfectly. Often, what really hinders us is assembling different components—dealing with framework compatibility, dependency conflicts, and the minutiae of deployment details.

In general, there are a few troubleshooting approaches:

1. Clearly identify the differences: When facing two approaches or solutions, ask the AI to explain their differences, commonalities, and respective pros and cons.
2. Provide the full context: Include error messages, file structures, and relevant code when posing your question.
3. Break down the problem: Sometimes tackling everything at once can introduce redundancies or contradictions, so it helps to split the issue into smaller parts and inquire about each segment separately.

At times, I keep presenting the issue to the large language model and it falls into a loop, repeatedly circling back to the same problem or rephrasing issues. When this happens, I simply open a new window in Gemini, re-upload the code folder, and ask the question using a different approach.

Throughout this iterative process of interaction and modification, it’s crucial to keep track of changes—to ensure that the project remains traceable and reversible. This way, if we go wrong at any step, we can revert back to a previous stable state rather than risk scrapping the entire project.

SPAR: Getting Your Project to Truly Run

The magic of “get started first, then verify” is amplified in the AI era.

First, the barrier to entry has dropped dramatically. Instead of relying on colleagues or slogging through dense manuals, you only need to translate your ideas into natural language, and the model will produce a runnable prototype. Second, the feedback loop is unprecedentedly short: error messages, fix suggestions, and explanations are almost all delivered in a single exchange—reducing the gap between understanding and execution to a single keystroke.

Since AI came along, vibe coding has grown in popularity, spawning many coding tools like v0, Loveble, and Bolt. What once took days can now be accomplished in just a few hours. Many people describe their journey of writing websites with AI as evolving from “copy-pasting” to “breaking down steps and writing submodules.” AI forces learners to articulate problems in increasingly specific terms, turning abstract knowledge into verifiable code.

After some time of vibe coding, I distilled my workflow into the “S-P-A-R” model:

1. Sketch – Define the project requirements.
2. Prototype – Create a demo first.
3. Ask – Deeply explore the “why” behind each part.
4. Refine – Polish and reflect on the details.

For a recent group project where we needed to design a job recruitment website, I first engaged in extensive conversations with GPT O3 to uncover design issues, brainstorm innovations, discuss designs, and exchange ideas on functionality. In the end, I had it produce a detailed design document.

I then copied the entire document into v0 so that it knew what I intended to build and could generate a demo website. We iterated by interacting with the website, clicking through it, fixing errors, and finally producing a complete demo.

Then, we dug deeper into specific parts—for example, how to deconstruct and reconstruct a resume section, how to optimize UI design, how to incorporate animations, etc.—discussing each detail with the tool until everything was harmonized. Finally, we reflected on the overall layout, ensuring each section fitted well with the others, and that interactive logic was sound.

Another important point is to understand what changes the AI made to your code. Recognize what those differences signify and whether they meet your requirements. This ensures you achieve your goals with the most streamlined approach.

Reflection and Methodology: From “Copy-Paste” to “Understanding and Optimizing”

In my journey of building projects, I initially relied on copy-pasting; however, this approach eventually led to problems I simply couldn’t understand.

That’s when I realized the importance of delving into the underlying logic of the code and truly understanding it. So I began studying HTML, CSS, and JavaScript. I didn’t aim to master every detail, but rather to understand their interrelations—what role each plays on a website and how they interact. Once you grasp that, you’re better prepared to address specific issues by identifying exactly which file and line need correction.

A lengthy Reddit post titled “Using ChatGPT to learn any programming language” captured a range of questions and counterpoints from both beginners and veterans—some treating ChatGPT as a universal clipboard, and others cautioning, “ask about concepts rather than being lazy by copying whole blocks of code.” In the midst of these lively discussions, the idea of “learning by doing” was broken down into countless micro-scenarios.

From this discussion, four consensus points emerge:

1. Ask about concepts rather than pasting entire code blocks.
2. Write your own code first, then ask GPT for feedback.
3. Relying entirely on AI code generation skips essential thought processes.
4. Remember to read and understand every line.

Of course, for most of us, we might not have the patience to write everything from scratch, as suggested in point two. My strategy is to let the AI generate code, then supervise and modify it. For the initial demo it produces, if it runs without issues, I accept it; after that, I refine based on specific details. For each modification, I scrutinize every line to ensure it aligns with my objectives.

I use diff tracking for this process. If you’re in an editor like v0, you can request annotations or ask it to explain what was changed. In IDEs like VS Code, I rely on Git to show me exactly what changes have been made in the original file.

In summary, my method is an iterative process of “AI-first, human-finished”—first, let AI generate the prototype, then manually run, audit, and refine it as needed.

Once a demo is working, break down the “it runs” criterion into three levels of acceptance. This process requires you to truly understand the program.

Acceptance Level	Purpose
Functionality	Ensure the demo runs without errors and produces correct output.
Readability	Make sure you can explain every line.
Extensibility	Consider how future requirements can be integrated.

In the first stage, I click through every feature and page, testing them on both mobile and desktop, simulating various scenarios. Once your demo is correct, you can usually skip the second stage—unless errors arise or changes are needed that require deeper understanding.

Moving on to the third stage: for example, whenever I add a new webpage to my site, I need to integrate it into the demo display area of my main page.

So I wrote a Python script that updates the homepage structure every time an HTML file is modified. This way, I don’t have to rewrite the page code—I just need to update the relevant text descriptions. For every HTML file created by AI, I also add a button that returns to the main page, and I batch-add these using a Python script.

Taking the First Step and Gaining Positive Feedback

Looking back at this series of experiments, I realized that the real challenge isn’t the tools themselves—it’s having the courage to take that first step. AI makes trial and error low-cost and feedback immediate, but if you keep waiting for the perfect moment, it will never come.

In the AI era, creating toy projects is easier than ever. Just take that first step, and positive feedback will follow. As tools become more powerful and feature-rich, the sense of accomplishment grows. The hardest part is always the first step, but once you start, your skills advance, and with the help of these tools, positive reinforcement comes even more readily.

The toughest part is actually taking that first step—even if the result is only a half-finished product, it’s far better than doing nothing. I now firmly believe that the starting point of learning is not “knowing” but “doing.” It’s only through doing that knowledge becomes truly yours. Tools will change, methods will evolve, but the courage to act and the habit of learning from mistakes are what truly endure.

Perhaps that is the entire essence of “learning by doing.”

《第一步·破晓》: Though fear and the unknown still lie beneath your feet, the moment your foot steps onto the glowing stair, the whole world unfolds ahead of you.