AI-Assisted Coding: Why Some People Build Toys While Others Build Products

As large language models continue to evolve, more and more people are jumping into Web Coding — building products with the help of AI. Whether or not you have a technical background, tools like Claude Code and Codex make it possible to create your own tools and products through AI collaboration.

But here's an intriguing pattern: when it comes to AI-assisted software development, some people end up with "toys" that run once and break the second time, while others build production-grade products that can be sustainably iterated. Where does the gap come from? Based on practical experience shared by developers, the answer usually has nothing to do with which model you're using — it all comes down to how you take that critical first step.

Two Very Different Ways to Prompt AI for Code

Many people without a coding background, when opening an AI chat window for the first time, will blurt out something like: "Help me build a task management system" or "Help me build a blog system." With today's powerful models, AI can absolutely generate a pile of code that even runs.

The problem is — these projects are essentially lottery draws. Give the same prompt to a different model, or even the same model on a different day, and sometimes the result is great, sometimes it's a complete mess. More importantly, projects generated this way typically lack a clear architecture. AI will scatter files all over the place with no coherent engineering structure. What you end up with is little more than a "college demo project."

A fundamentally different approach works like this: define the framework first, then let AI fill in the functionality within that framework. That's what produces software that's actually usable in production. In other words, the first step in Web Coding isn't "telling AI what to build" — it's choosing your language and framework first.

Why "Framework First" Is the Critical First Step in AI Coding

This mirrors how traditional software development works. Professional developers never start a project by hand-writing code line by line from Hello World. They start from a mature framework, install ready-made routing and middleware components, and then iterate on business logic from there.

Here's the recommended selection process:

Step 1: Choose Your Programming Language

First, clarify what type of application you're building — is it a web app, a desktop client, or a backend service? Different use cases call for different languages, and your language choice shapes the entire tech stack.

Step 2: Choose Your Framework

Once you've picked a language, each language has its own set of frameworks suited to different purposes: some excel at frontend websites, some are built for mobile apps, others focus on backend APIs. Choosing a framework before handing things off to AI is like giving AI a solid foundation to build on, rather than asking it to construct the scaffolding from scratch.

Four Core Benefits Frameworks Bring to AI Coding

The author systematically outlines four key benefits that frameworks provide — and these are precisely what separates toys from products:

1. Enforces project directory structure. Frameworks dictate where files should go, preventing AI from scattering code randomly throughout the project and ensuring the codebase remains maintainable.

2. Provides standardized abstraction layers. Frameworks typically come with built-in ORM, middleware, dependency injection, and more. Take ORM as an example — it lets you read and write to the database in a programmatic way without writing raw SQL queries directly in your code. It's both safer and more elegant.

3. Built-in engineering capabilities. Database migrations, testing frameworks, and application packaging — these are standard features of mature frameworks, and exactly what separates production software from toy projects.

4. AI is naturally familiar with popular frameworks. This point is especially important in the AI era. During training, AI didn't just learn programming languages — it absorbed vast amounts of code from high-quality open-source frameworks. AI essentially "grew up" knowing these well-known frameworks inside and out. Using frameworks with thriving communities and mature ecosystems means AI writes more confidently and makes fewer mistakes.

---

ORM (Object-Relational Mapping) is the key concept behind the second benefit — standardized abstraction layers. ORM is a programming technique that creates a bridge between object-oriented programming languages and relational databases. With ORM, developers can manipulate database records like regular objects — writing user.save() instead of INSERT INTO users ... in raw SQL. Built-in ORMs in popular frameworks (such as Django's ORM, Rails' ActiveRecord, and Laravel's Eloquent) not only boost development efficiency but also help prevent security vulnerabilities like SQL injection. Database Migrations are equally worth mentioning: they're a version-control mechanism for database schema changes, allowing teams to evolve table structures in a traceable, rollback-capable way rather than manually altering tables directly in the database — one of the most telling differences in engineering discipline between production projects and demo projects.

---

How to Choose a Framework for AI Coding the Right Way

Faced with endless tech comparison tables, non-technical people can easily get overwhelmed. The author's advice is refreshingly pragmatic: before you start, have an honest conversation with AI.

Share your business requirements, your personal technical background, and your familiarity with different tech stacks — all of it. AI will use that information to recommend a tech stack tailored specifically to you. That way, your first message isn't "help me build a blog system," but rather "help me implement X feature using Y technology" — specific goals, precise execution.

Beyond consulting AI, there are a few objective dimensions worth considering when choosing a framework:

• Star count: reflects community recognition;
• Commit frequency: indicates whether the project is still actively maintained;
• Issue volume and activity: shows whether the community is engaged and thriving.

Cross-referencing these data points will help you identify a truly mature and reliable framework.

The Complete Web Coding Workflow

The author distills a clear AI-assisted development workflow:

1. Spend time selecting a framework and defining the tech stack together with AI;
2. Initialize the project;
3. Define data models and application flow;
4. Let AI generate correct code based on the agreed structure, placed in the right directories;
5. Validate results, run tests, then iterate in a loop.

The core principle, in a single sentence: You own the architecture and direction; AI handles the implementation and filling in the details.

When Frameworks Aren't Necessary: Three Exceptions

Interestingly, "framework first" isn't an absolute rule. The author also identifies scenarios where you can skip straight to coding:

First, one-off simple tasks. If you're writing a data processing script that's clearly disposable, there's no need to architect anything upfront.

Second, respect your team's existing familiarity. If you're a Java engineer, there's no need to blindly chase other technologies. If you come from a frontend background, use Node.js. Whatever you know best is the best choice — don't be misled by claims that "language X has better performance."

Case Study: Building a Personal Website with AI from Start to Finish

The author uses his own recently built personal website as an example. Rather than saying "help me build a personal website," he:

• Shared his Obsidian document content with AI;
• Told AI his preferred tech stack and design style;
• Received AI's recommendation to use a static site generator;
• Sent AI a link to his preferred UI library, shadcn;
• And finally had AI initialize the site framework based on shadcn and the existing content, then iterated through ongoing conversation until completion.

This process perfectly demonstrates the "framework first, then coding" philosophy in action.

---

Static Site Generators (SSG) are the key technical choice in this case study. Unlike traditional dynamic websites — where each request requires the server to query the database and render a page in real time — SSGs pre-generate all pages as pure HTML files at build time, which are then served directly via CDN. This makes sites extremely fast, highly secure, and nearly maintenance-free, making them ideal for personal websites, blogs, and documentation sites that don't update frequently. Popular SSG frameworks include Next.js (React ecosystem), Astro, Hugo, and Jekyll. shadcn/ui is a component library built on Radix UI and Tailwind CSS. Unlike traditional component libraries installed as packages, shadcn uses a "copy code into your project" model, giving developers full ownership of the component code for easy customization. Since shadcn has massive popularity in the open-source community, AI is highly familiar with its component APIs and usage patterns, making it a top choice for AI-assisted frontend development today.

---

Closing Thoughts: AI Is an Amplifier, and Frameworks Determine What Gets Amplified

The author closes with a line that captures the entire methodology:

AI is our amplifier. The framework determines whether it amplifies your engineering capability — or your chaos.

For anyone looking to build products with AI, rather than rushing to ask AI to "help me build some kind of system," it's worth pausing to spend a little time thinking through the framework and direction together with AI first. That upfront investment is the invisible yet decisive line that separates toys from real products.