暂无文章
This article is the 18th installment in the Crazyrouter Claude Code series. It expands on 'Claude Code Integration with Crazyrouter, Part 18: In the AI Era, If You Can Talk, You Can Code' and focuses on 'In the AI Era, If You Can Talk, You Can Code', 'Hands On: Your First AI-Native App', and 'Appendix 1: Do We Need Front-End Development Knowledge?'.
Unified integration setup: Claude Code / Anthropic native clients use
ANTHROPIC_BASE_URL=https://cn.crazyrouter.com; OpenAI-compatible SDKs, HTTP requests, and front-end/back-end apps usebase_url=https://cn.crazyrouter.com/v1.
/v1/v1/... issues caused by a wrong Base URL.This is a project-based learning tutorial. You can follow the steps one by one and try to reproduce the result.
A lot of people have product ideas in their heads: a small budgeting tool, a website that records a child's growth, or even a mini game. But the moment they think about writing code or finding a programmer, they give up.
After AI arrived, it gave non-programmers a brand-new possibility for the first time: you do not need to know how to write code; you only need to learn how to tell AI exactly what you want. Data from GitHub Copilot shows that more than 15 million developers are using AI-assisted programming, and an average of 46% of code is AI-generated! In Java projects, that number can reach 61%.
Next, we'll use Snake as an example to look at what AI programming can actually do today.
First, please open the z.ai experimental site and walk through how to use its full-stack development module.
What Is the New 'Browser-Based Programming' Model?
In the past, building a web app required:
Now, with an AI coding platform, all you need is:
This 'chat is programming' model turns coding from 'writing code' into 'describing requirements'. You do not need to worry about the underlying technical details; you only need to clearly tell AI what you want, and it can turn your idea into a runnable program. This is the new programming paradigm of the AI era - Vibe Coding (vibe-based coding).
After entering our simple request and clicking the Full-Stack Development button, you can watch the entire website creation process in real time. It usually takes no more than the time it takes to make a cup of coffee, and the page will be generated automatically!
When generation is complete, you'll see a browsable web page appear on the right. You can scroll through the page content, or click the 🧭 button at the top of the page to switch to full-screen mode and view the result.
From left to right, the buttons in the top bar do the following: the arrow button expands the sidebar conversation history, the pencil button starts a new conversation, the circular arrow button refreshes the page, the compass button switches to full-screen mode, the Download button downloads the project, the <> button switches to code view, and the Publish button publishes the project.
If you want to inspect the page source, click the code icon in the upper-right corner to view the full code.
Explore More AI Coding Tools
In addition to z.ai, you can also try the following AI coding platforms for testing:
| Tool | Address | Features |
|---|---|---|
| Figma Make | figma.com/make | Deeply integrated with design tools, ideal for designers to quickly build interactive prototypes |
| v0.dev | v0.dev | An AI-generated UI tool from Vercel; enter a description and it can generate runnable React component code |
| Bolt.new | bolt.new | An AI full-stack development platform from StackBlitz that can generate and deploy complete web apps directly |
| Lovable | lovable.dev | Focused on generating high-quality React apps, with GitHub integration and one-click deployment |
| Replit Agent | replit.com | An online IDE with an integrated AI coding assistant, supporting multiple languages and real-time collaboration |
This section focuses on a specific question: if you rely only on conversational AI and do not write any code yourself, how far can it actually take you? In practice, a fairly stable conclusion is that it can help you build something small but complete, but deciding what 'enough' means still requires you to make detailed decisions at every step.
From the Snake example above, you've already seen a typical pattern: as long as you can explain the UI and interactions clearly, AI can usually stitch together a complete web page that you can open, click, and play with in just a few rounds of conversation.
These tasks usually share a few traits:
Within that boundary, you can think of conversational AI as a fairly capable 'assistant developer'. You only need to refine and adjust requirements in natural language each round, and you can quickly get a usable prototype.
Once you go beyond the small and clearly defined scope, relying on a few rounds of conversation to have AI complete a complex system end to end will quickly hit its limits. Large projects often need back-end integration, database connections, third-party service integration, plus permissions, security, concurrency, and a large number of business rules. The goal is to deliver a full system that is deeply connected to existing business operations, not just a single web page.
In that situation, the better approach is not to dump every requirement on AI all at once. Instead, first map out the overall workflow clearly: what are the key steps, what are the inputs, outputs, and state changes at each step, and which points are most sensitive from a performance and security perspective. Then, based on that workflow, split out the relatively independent parts and let conversational AI generate the APIs, modules, scripts, and tests.
Given today's capabilities, AI is better at accelerating individual small steps, while you (or your team) decide how to split the work, how to connect the pieces, and take responsibility for the final architecture, system integration, and operations.
At first glance, AI seems capable of writing anything. But can those things actually be used, and if so, to what extent? How should we draw the line?
A useful rule of thumb is:
Best-Fit Scenarios
Today, you can think of AI as an efficient partner for demos and self-use tools: as long as you're willing to test more, iterate more, and ask a few more rounds of 'this is not right, fix it and explain why', the overall quality at the prototype and internal-tool level is usually good enough and practically valuable.
Let's get back to the hands-on part. In the previous section, we quickly built a playable Snake prototype with AI, and we also got a rough sense of what AI can and cannot do. Next, we'll learn how to create a modern AI Snake game using the most basic vibe coding techniques. We'll make the snake eat text characters instead of beans. In the end, the game will generate a poem and draw a picture based on the text characters it has eaten. Through this real-world example, you'll understand the core idea behind this new way of programming: learning how to express requirements clearly in natural language.
At the beginning, we can talk to the large model in the simplest possible way, which helps us quickly get a product prototype. You can type this directly into the chat box:
During development, we may run into disappointing issues, such as clicking a button and nothing happens, errors when using a feature, a feature not working as expected, or the front-end page not matching the intended design.
In those cases, we need to ask the model further questions to help fix these unexpected problems.
Once the basic functionality is done, we can try adding some new twists to our program! If you think the process of the snake eating words or characters is a bit dull, you can make it eat words in different colors and change the snake's color accordingly.
You can also add special effects to the "eating" process, or introduce magical words that trigger effects - for example, increasing the snake's speed or size. Another idea is to have the model generate a poem and an image every time the snake eats a word, instead of waiting until it has eaten eight words.
If these feel challenging, you can go straight to the language model for help! It can suggest creative ideas to make your game more interesting. Give it a try!
In addition, we can also ask the LLM to generate project-level prompts for you directly. In the previous section, we only wrote the Snake game prompt ourselves. Now let's try having the model generate a prompt with an overall framework and implementation path (you can generate it directly with z.ai).
If you want to learn how to write better prompts, you can check the Prompt Engineering Appendix.
I want AI to generate a web-based Snake game, and I need a more complete prompt to make the result more impressive and fun. Please generate the corresponding prompt. The current goal is: build a Snake game that includes the ability to generate poetry from different words, and it should also include an image generation module.
The response from z.ai will look like this:
We can use this prompt to regenerate the project in full-stack development mode:
Besides Snake, we can let our imagination run wild.
Create anything we want to create, and even try to mess everything up! Then start over from scratch!
And more... If you like games, let's try creating games together!
One-sentence takeaway
You don't need to know how to code, but understanding the basics helps you describe requirements to AI more clearly.
Browsers use three kinds of "code" to build a page:
When you open a web page, the browser processes three kinds of code in order:
The HTML, CSS, and JavaScript introduced above are the "frontend trio" -- the foundation of every web page. But as pages become more complex, building them directly with this trio brings challenges: code becomes harder to maintain, there is a lot of repetitive work, and keeping data in sync gets messy.
Modern frontend frameworks (such as React, Vue, and Angular) build on HTML/CSS/JS to make development more efficient:
Simple interpretation
In the era of AI-assisted programming, you do not need to master every detail of the frameworks. You only need to understand the basic concepts, and you can let AI generate code from natural language descriptions.
The key point: you don't need to write code; you only need to describe what you want.
After understanding frontend concepts, you can describe your requirements to AI like this:
"Build a leaderboard page with React. Show a score list on the right, display player details below when a row is clicked, and keep the style clean and modern."
If you want to go deeper into the fundamentals of HTML, CSS, and JavaScript, check the Web Basics appendix. If you want to learn about the evolution of frontend technologies, check the Frontend Evolution appendix.
💡 What is Vibe Coding? Computer scientist Andrej Karpathy (one of the co-founders of OpenAI and former head of AI at Tesla) coined the term vibe coding in February 2025. The concept refers to an LLM-based coding approach that allows programmers to generate working code by providing natural language descriptions instead of manually writing code.
Literally speaking, Vibe Coding can be understood as a way to "develop by talking." Its core shift is this: you no longer need to write code line by line, look up syntax, or debug errors yourself. Instead, you describe what you want in natural language, for example:
"I need a login page with a mobile number input field and a verification code input field." "After a successful login, go to the home page and show the username in the top-right corner." "Give me a simple Snake game that can be controlled with the arrow keys on the keyboard." The large language model (LLM) automatically translates this kind of description into code that can actually run, and generates the corresponding page, logic, and data structures. After you see the result, you can give feedback in natural language, such as "make the button bigger," "switch the background to dark," or "save the score and show a leaderboard," and the AI will keep adjusting the implementation according to your requests.
In this model, you do not need to learn a programming language first and then write code. Instead, you focus your main energy on: making it clear what you want to build, judging what looks wrong after seeing the result, and then proposing new changes. The AI is responsible for turning these high-level ideas into concrete implementations, which significantly reduces mechanical, repetitive coding work.
You can click here to learn more about the details of vibe coding: ibe-coding
You can click here to learn more about Karpathy's talk:
In practice, during real vibe coding, we usually do not use many complicated prompts. Maybe at the beginning we need a specific and moderately complex prompt for the whole program, but after that, each step may only require prompt types like these:
This may sound a bit exaggerated, but in fact these are the kinds of prompts we might use in day-to-day work. Because large language models have context length limits, or sometimes because their instruction-following ability is not very strong, the model may forget what was discussed earlier in the conversation. In vibe coding, we tend to use models with long context windows and strong instruction-following ability, and we can judge whether a model is good by looking at rankings or metrics for these two aspects.
Alternatively, because of the style of the training data, large models may tend to answer in the style of their training data. For example, some people speak very seriously, some like to add a lot of embellishment, and some large models like to add lots of comments or unnecessary modules in the code.
Model context can be understood as AI's short-term memory. It refers to all the text content the model can "see" and "remember" within a single conversation or task, including the questions you entered earlier, instructions provided by the system, relevant materials, and so on.
It is precisely because of context that AI can understand when you are continuing from earlier content and can carry on a conversation that feels coherent and natural from one turn to the next. Without context, every sentence you write looks like a brand-new question to the model. It would not know what you said before, so it could not continue the conversation.
Each model has its own effective context length (context window). This length is usually measured in tokens (which you can think of roughly as units of "word fragments"). At present, most mainstream models are in the 32k to 128k token range. The longer the context, the more the model can "read" in one go. For example:
When the content you enter approaches or exceeds the model's context limit, several common phenomena often appear:
These phenomena do not mean the model suddenly became "dumber"; they are a natural result of the context capacity being used up or nearly used up.
In real-world use, we want context to be as long as possible, but we also need to recognize that:
Therefore, when designing AI applications, you need to balance letting the model see enough and controlling cost and improving efficiency. For example:
Instruction following means: after the model understands your instruction, can it execute your request accurately and completely? This includes not only answering questions, but also completing tasks in a specified format, style, and sequence.
For example, the following are all clear instructions for the model:
A model with strong instruction-following ability usually has the following traits:
Outputs the requested number of items. For example, if asked to summarize three key points, it will not give five.
Covers all specified elements. For example, if asked to extract the author, time, and events, it will not omit any of them.
Follows the specified format and tone. For example, if asked to use a formal tone, it will not output an overly casual reply.
Does not add unnecessary extra material. For example, if only translation and example sentences are requested, it will not add a large amount of unrelated explanation. In real-world applications, strong instruction-following is very important, for reasons including:
Better stability: with the same instruction, outputs stay more consistent in structure and behavior across different times and repeated runs, and are less likely to drift off-script
Better reproducibility: when you bake a prompt into a product or workflow, you can predict how the model will respond, which makes testing and iteration easier
Easier system integration: when model outputs match the expected format, it is much easier to connect them automatically to backend programs, workflows, or other tools
So when you choose and evaluate an LLM, beyond whether it is smart and broadly knowledgeable, you also need to pay special attention to its instruction-following ability. For production-grade applications, whether it can execute instructions steadily and accurately is often more important than occasionally producing an impressive answer.
/v1 usageIf you are ready to connect Claude Code, domestic models, or your own application to Crazyrouter in a unified way, you can move forward in this order:
https://cn.crazyrouter.com; OpenAI-compatible SDKs use: https://cn.crazyrouter.com/v1./v1.If you need to evaluate model costs or choose between different models, you can first check the Crazyrouter pricing and models page, then add the commonly used models to the Token allowlist.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。