Coding Agent Design Experience: HTML Over Pro Tools, Build a Design System Constitution

AI Summary · Serial Entrepreneur's Perspective

After deeply using Coding Agents for half a year: HTML is the most Agent-friendly format; establish a unified design system as your "constitution"; avoid over-designing; the core goal is solving problems, not showing off visual flair.

Original Article

I've been deeply using Coding Agents for over half a year, and it's time to summarize the experience I've accumulated in product design. If this can be helpful to others, even better. This article was written entirely by a human, with no AI participation.

If you've been following the design insights shared by various designers and developers, you'll notice their core ideas are very similar—they don't stray from the "golden rules" of product design and software engineering from the internet era. This article is no different.

Core Issue: Direction Matters More Than Effort

This might sound like nonsense, but it's the most fundamental question. Wrong direction makes all effort a waste.

Take Claude's signature warm background plus serif fonts, for example. It was still considered aesthetically pleasing last year, but now has become a hallmark of UIs that haven't been carefully crafted. The green form style popular with GPT is similar.

The only way to solve this is to expose yourself to genuinely good work, find the original sources whenever possible, and avoid secondhand information.

The Essence of Design Is Solving Problems

Design isn't artistic creation; its core is solving problems, meeting needs, and achieving goals. Looking good is neither a sufficient condition nor a necessary one—good looks are a means, not necessarily an end.

Let's say you're building a web-based IP quality detection tool. The user's need is to quickly see IP analysis results upon opening the page. But you add lots of highlights, shadows, textures, and three.js models to make it look cool… The page load speed gets severely dragged down, and the product experience is seriously disrupted. That's when the design solution becomes disconnected from the requirements.

HTML Is the Most Agent-Friendly Medium

If your design requirements are extremely high, you still need to use professional tools like Figma or Paper. But in most cases, HTML files are the better choice—whether for frontend projects or native applications.

HTML is probably only second to Markdown in terms of Agent-friendliness. It's highly efficient to modify—easy for both styling and interaction—and can be opened, annotated, and screenshotted by browsers built into various Agent clients. You can do whatever you want with it.

Introducing a suitable component library can save massive amounts of time and cost. Just choose based on personal preference and project maturity—common ones include Shadcn UI, Hero UI, Base UI, and others.

Build a Design System: The Agent's Constitution

This is the most crucial technique in this article. A design system serves as the "constitution" that governs how an Agent handles page design—clearly defining colors, typography, layout, spacing, shadows, components, interactions, copy style, and so on—all collected into a single HTML file or folder.

Setting up the design system before starting a project saves enormous time spent tweaking trivial details. After finishing each new module, I habitually ask myself whether it conforms to the current design system specifications.

Be Bold About Deleting—Don't Worship Fancy Case Studies

Current models tend to add lots of details, so be bold about removing what's unnecessary. After a round of adjustments, you can also have the Agent extract the design principles reflected in those decisions and add them to your design system.

If you're unsure about a module's design, you can have the Agent generate multiple options for comparison—but always do this in separate HTML files, not by directly modifying project code.

Pshot. Polish patiently. Don't idolize those flashy social media case studies claiming you can achieve them with a single prompt. The better your preparation and the clearer your thinking, the faster the project moves forward. Whether it takes one round, two rounds, or ten rounds doesn't matter.

— Excerpted from TG Channel: AI Exploration Guide - Telegram Channel

(Original source: AI Exploration Guide - Telegram Channel, not directly accessible in China; full original article embedded above.)