跪拜 Guibai
← Back to the summary

GLM-5.3 Paired with ZCode Agent Reskins a Live Website for the Price of a Coffee

Image

Last week's AI circle was filled with tension, as everyone likely noticed.

On August 13th, ZCode received a comprehensive upgrade; immediately following, on August 14th, Zhipu released its latest flagship model, GLM-5.3.

With just a day's gap, both the model and the Agent tool were launched simultaneously—Zhipu is clearly playing its combination punch openly.

Before this, many users ran GLM models using Agent tools like Claude Code or Codex. The model was Zhipu's, but the shell belonged to someone else, with a layer of protocol conversion in between, which felt somewhat like a mismatched pairing.

I've repeatedly mentioned a viewpoint in my previous articles: A native model must be paired with a native Agent tool to truly unleash its effectiveness.

The reasoning is simple: the model determines the upper limit of capability, but the same model placed in different Coding Agents can yield significantly different actual performance. A company's own model paired with its own Agent is tuned for each other's characteristics, from context management and tool invocation to cache optimization; someone else's tool, no matter how good, is a generic size, not tailored to fit.

What is ZCode?

Before the actual test, to accommodate newcomers, let's take two minutes to clarify: What exactly is ZCode?

In one sentence: ZCode is an Agentic Development Environment launched by Zhipu—the name sounds intimidating, but simply put, it's a development tool where "you talk, and AI does the work."

Image

Traditional coding works like this: you open IDEA or VS Code, type line by line, and completion tools help accelerate your input—the human is always the primary operator.

In ZCode, the game changes: You describe the desired outcome in natural language, and the AI Agent reads the code, modifies files, runs commands, and checks results on its own. For example, if you say "change the homepage style to a light minimalist look," it will analyze the project structure, make modifications, and run it to show you the effect.

You can also run multiple tasks simultaneously: one fixing bugs, one supplementing tests, one analyzing code, all without interfering with each other; after changes, review the Diff in the Review panel and merge once confirmed.

So, what's its relationship with Claude Code and Codex?

Same species, different families.

Claude Code is from Anthropic, Codex is from OpenAI, and ZCode is from Zhipu. All three share the same positioning: they equip large models with "hands and feet," enabling the model to truly operate your project files, terminal, and browser. This type of tool is collectively called an Agent (or Harness).

The model determines the upper limit of capability, while the Harness is responsible for context management, tool invocation, task scheduling, caching, and result verification, determining how much of the model's capability can be realized.

So, remember it this way: ZCode is to GLM what Claude Code is to Claude. Previously, you ran GLM using someone else's shell; now, Zhipu's own "native match" has arrived.

The Best Partner: ZCode + GLM

Now, both the model (GLM-5.3) and the Agent (ZCode) are in place, and the combination is finally complete.

Once assembled, how does it perform? Official data provides a set of comparison results.

On the Z.ai Code Bench, Zhipu ran the same batch of tasks using GLM-5.3 paired with ZCode and Claude Code respectively. The results showed: With the same model, switching to ZCode resulted in an overall task pass rate 2.39% higher than when paired with Claude Code.

Furthermore, ZCode has specifically optimized context cache reuse. According to official test data from multiple Coding Agents, GLM's cache hit rate in ZCode exceeds 98%, meaning more repetitive contexts can hit the cache and be deducted at a lower credit coefficient. Simply put, it saves more Tokens than before (i.e., saves more money).

Image

A difference of just over 2 percentage points might not sound like much, but in benchmarking, the gap between flagship models often lies in these few points.

Of course, benchmarks are benchmarks, and official data is ultimately official data. Whether it's good or not requires hands-on testing. When I usually use Agents, what I care about most is never "how smart is the single-step answer," but three things: Can the task run to completion without human supervision? Is the modified output directly usable? How many Tokens does this whole process burn?

So, in this tutorial, we'll conduct a real-world test with a real project—using Zhipu's strongest model to date, GLM-5.3, paired with its self-developed ZCode, running through the entire process from page restructuring to detail polishing, to see what kind of results this "original recipe" combination can actually deliver.

Download and Installation

After introducing what it is and its official performance, let's install it and move into the actual testing phase.

Getting started with ZCode is very simple, just three steps.

Step 1: Download the client.

ZCode currently offers clients for macOS, Windows, and Linux. Open the official website and download the version corresponding to your system:

Download link: https://zcode.z.ai/cn

Image

Step 2: Login and authentication.

After installation, the first launch will lead to the account connection page for login and authentication.

Image

The connection method is very flexible: domestic users can connect their BigModel account. If you have already subscribed to the GLM Coding Plan, ZCode will directly use the plan quota in your account; you can also connect a Z.ai account, or simply fill in an API Key.

Step 3: Start using.

After authentication, open the workspace, select the model, and you can directly assign tasks.

A point of praise here: the entire process is zero configuration. Think back to running GLM in Claude Code before—you had to fiddle with the Base URL, then configure environment variables, and half your patience was gone before you even started. With ZCode, it's login-and-use, practically zero threshold for newcomers.

Image

Besides local folders, it also supports SSH, WSL, and Docker workspaces—meaning projects on remote servers, Linux subsystems, and containers can all be directly managed.

Image

The environment is ready. Next, we officially enter the actual testing phase: using a real project to see the actual combat effectiveness of the GLM-5.3 + ZCode combination.

Real-World Project Test Case

Let me first explain the background: this tutorial wasn't originally in my writing plan.

Coincidentally, I was restructuring several of my own websites these past few days, so I thought—rather than creating a dedicated test project for benchmarking, why not directly tackle a real website and conveniently verify the true caliber of the new GLM-5.3 model?

So, I did this: The same model (GLM-5.3), paired with two different Agents, restructuring two different live websites

This perfectly forms the two pairings mentioned at the beginning: one is "borrowing someone else's shell," the other is the "original recipe."

This tutorial mainly unfolds around the restructuring process of the Quick Navigation project.

A note upfront: this doesn't count as a rigorous evaluation—the two projects are different, the tasks are different, and the baselines are different, failing to meet any conditions for a controlled experiment. So, don't get hung up on "which one is stronger." Treat it as a real-world usage record and experience report, focusing on ZCode's performance when doing real work.

Pre-Work Preparation

  1. Before starting, you at least need an account, preferably purchasing a Zhipu coding plan (cost-effective). I bought the Max annual plan myself, which is currently the highest tier of Zhipu's coding plans. (Bought it earlier, cost over four thousand yuan)

Image

  1. Before executing code, check the current usage (daily usage 4%, weekly usage 15%):

Image

  1. First, the before-restructuring screenshot of 'Quick Navigation':

Image

This page is honestly a bit hard to look at—classic blue-purple gradient, rounded corner cards, centered large titles, instantly recognizable as AI-generated, full of "AI flavor."

It's a bit ironic: this website was originally developed by me using AI in early 2025, and it hasn't been touched much since going live. After all, it's a non-profit convenience tool, not meant for profit, so as long as it works, who needs a bicycle?

But recently, with more and more users using it daily to find tools, this "AI-native face" is a bit embarrassing—user experience ultimately needs some tidying up when time permits.

Coincidentally, this GLM-5.3 + ZCode test will take it on.

  1. Before formally starting the restructuring, it's recommended to think clearly about one question: What exactly does your expected outcome look like?

Of course, you can also be hands-off and let AI fully improvise. But my experience is: restructuring without a clear goal often leads the AI to oscillate, making a dozen revisions without hitting the mark, purely wasting time and Tokens.

So, my usual approach is to tell the AI all my requirements at once, let it produce a few page effects for comparison, and after selecting a direction, formally start work.

For example, similar to below, send the website's purpose, current problems, and desired effects and requirements to the AI: Image Soon, the AI provided several effect images for me to choose from:

Image Image

Image

Choose one you prefer, or if none are satisfactory, continue optimizing the effect images. (For instance, I chose the third effect here, which was barely acceptable)

  1. Besides the above preparations, the most important point is to commit the current project code to git before making changes. Even if the subsequent restructuring goes wrong, you can quickly revert and restore.

Restructuring the Homepage

Open ZCode, link the project working directory, add the previously selected effect image example (html) file as context, select the model as GLM-5.3, set thinking intensity to high, and input the following prompt:

The current front-end homepage is blue-purple, the style is not very attractive, and it looks too AI-generated. Please help me restructure the style and layout of the front-end homepage. The overall effect can refer to the attachment shown, note to keep the website footer bar.

Image

After receiving the prompt, ZCode will first understand the overall structure of the project and the current implementation of the homepage, then restructure it referring to the attachment's style.

Image

ZCode's retrieval speed is quite fast. It will first identify that this is a Vue 3 + Element Plus project, where the current blue-purple color comes from the fixed positioning gradient background of the header/info bar/search area in App.vue, and the reference draft is a light minimalist style (light gray background + white cards + thin borders + a touch of indigo accent).

The whole process took about 4 to 5 minutes, and the homepage was restructured. After completion, the built-in browser automatically opens on the right side to preview and compare the effects.

Image However, after the first round of modifications, although the homepage was roughly replicated, there were still a few aspects I wasn't entirely satisfied with, such as:

Here, to test its front-end design and aesthetic capabilities, I deliberately didn't add too many supplementary details for the above issues, letting it judge and improvise on its own. Sent the above issues to ZCode for modification.

Image

First round, optimized effect:

Image

Actually, by this point, most issues and effects on the homepage had met my requirements. Although a few places could still be optimized, no rush. Let's first complete the optimization of several other main pages, then come back to tidy up the details.

Another point worth mentioning is that every time ZCode finishes a task and performs test verification, it takes screenshots and compares them against expected results.

Image

Restructuring "Latest" and "Most Popular"

When restructuring other pages, my suggestion is to start a new conversation. Here, you can refer to the homepage restructuring method to optimize the "Latest" and "Most Popular" pages.

The prompt is as follows:

Please refer to the attached webpage case effect and help me restructure the style and layout of the "Latest" and "Most Popular" pages.

Image

The code modification speed is very fast, and soon both pages were restructured.

Image

Latest page effect:

Image

Most Popular page effect:

Image

Again, although the modifications are complete and the functions work, AI isn't a mind reader. If you're unsatisfied with some details, you can continue to have it optimize. For example, here I had it optimize several details:

Image

Image

Latest, optimized effect:

Image

Most Popular, optimized effect: Image

Restructuring the Free Tutorials Menu Page

Same operation, under the project working directory, start a new conversation, and referring to the methods used for restructuring the previous pages, restructure and optimize the Free Tutorials page.

Please refer to the attached webpage case effect and help me restructure the style and layout of the Free Tutorials page.

Image

Free Tutorials page, restructured effect as follows:

Image

ZCode has a web element lookup mode feature, allowing you to point and modify specific elements.

For example, I wanted to change the background color of the brand logo block '快' on the left side of the top navigation from black to another color.

Image

After the change, it takes effect directly.

Image

Others

The restructuring methods for the other pages are pretty much the same, so I won't list them all here.

The entire website, restructuring over a dozen pages, from page restructuring to verification, and finally going live, took roughly an afternoon.

Finally, let's look at the usage consumption (daily usage increased from 4% to 30%, weekly usage from 15% to 23%). Actually, this usage consumption isn't entirely accurate, because I did some other things in between 😄, oh well, why sweat the details...

Image

Conclusion

According to the agreement at the beginning, let's wrap up this real-world project test with the three things I care about most.

First, can the task run to completion without human supervision? Basically, yes. From the homepage, Latest, Most Popular to Free Tutorials, each round followed the same set of actions: provide a reference draft, give a one-sentence prompt, and then it reads the code, changes styles, starts the service, and takes screenshots to compare against expectations. My only job was to glance at the effect after it delivered, list the unsatisfactory parts, and throw them back.

Second, is the modified output directly usable? Eighty to ninety percent is directly usable, the remaining ten to twenty percent needs manual adjustment. AI isn't a mind reader—details like color schemes, badges, and title bar styles, if you don't specify, it follows its own aesthetic. Fortunately, it has a "point and modify" element recognition mode, making adjustments effortless.

Third, how many Tokens were burned? This was the most surprising part. After restructuring over a dozen pages, the daily usage went from 4% to 30%, and the weekly from 15% to 23%—and this included other tasks I did in between. Converted, the cost of giving an entire website a facelift is roughly the price of a cup of coffee.

There's also a rather intriguing feeling: this Quick Navigation website was originally written by me using AI in early 2025; a year and a half later, I used AI again to change its "AI-native face." The one who wrote the code back then was AI, and the one modifying the code today is still AI. The only thing I did throughout the entire process was—figure out what I wanted, and then articulate it clearly.

This is probably the most authentic portrayal of development in the AI era: The ability to write code is depreciating, while the ability to articulate requirements clearly is appreciating.

If you also have a project that you've "wanted to touch for a long time but never did," or if GLM is your daily driver, don't hesitate, give ZCode a try.

Of course, the old rule cannot be omitted: commit to git before changes, and review the Diff yourself after changes. These two steps, AI cannot replace you.

Oh right, the Quick Navigation (https://www.kjdaohang.com) restructured in this article has officially gone live—a tool-finding artifact, free of charge, with free learning resources available to claim. Feel free to visit if interested.