跪拜 Guibai
← All articles
Frontend · Design · Artificial Intelligence

Han Design Gives AI Agents a Chinese-Style Web Toolkit That Knows When to Stop

By 雨夜寻晴天 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Most AI-generated "Chinese-style" web design defaults to beige backgrounds, brush-script titles, and red stamps — a visual cliché that collapses thousands of years of aesthetics into three tokens. Han Design gives both AI Agents and human developers a structured, scoped alternative that can drop into a React or Vue project without forcing a full design-system rewrite, while its cultural-context rules prevent the kind of lazy symbol-pasting that makes generated pages look like a souvenir shop.

Summary

Han Design packages 16 visual themes — seven dynasty-inspired and nine scene-based — into a set of CSS tokens, decorative components, and Agent-readable judgment rules. The project deliberately avoids becoming yet another component library; it supplies static structures like seal buttons, scroll cards, and window-lattice borders, while leaving interactive widget behavior to the host application's existing components. A scoped CSS entry point keeps its styles from leaking into the rest of a project, so a marketing page's ink-wash treatment won't crawl through an entire backend dashboard. The Skill layer encodes cultural guardrails: it distinguishes historical restoration from contemporary inspiration, flags symbols like dragons and religious imagery that shouldn't be pasted casually, and prompts the Agent to consider period, region, and medium before generating a design.

Takeaways
Sixteen themes ship as CSS custom properties, not image assets: seven dynasty-inspired (Qin-Han through Qing) and nine scene-based (Ink Wash, Celadon, Dunhuang, Tea Space, etc.).
A single data-theme attribute on the html or a scoped container switches the entire visual treatment without rewriting page CSS.
Static decorative components — seal buttons, scroll cards, window-lattice borders, screens, lanterns — are ready to use; interactive widgets like Modals and Date Pickers are deliberately left to the host project's component library.
The han-scoped.css entry point confines all tokens and theme variables behind a data-han-scope boundary, preventing style leakage into the host application.
Agent rules encode cultural judgment: they distinguish historical restoration from contemporary inspiration, flag symbols requiring caution (dragons, phoenixes, religious imagery), and differentiate real calligraphic scripts from decorative brush-style fonts.
Installation is a git clone plus copying the skill directory into ~/.agents/skills or ~/.codex/skills; the Agent then accepts plain-language prompts like "make a restrained Song-style product landing page."
Conclusions

The project's core insight is that AI design tools need encoded cultural judgment, not just more CSS. Without rules that distinguish a real seal face from a red square, or a historical motif from a modern decorative association, an Agent reliably produces the same cliché page every time.

Scoping is treated as a first-class integration concern, not an afterthought. The 7-pixel horizontal-scroll bug on mobile that came from a hidden global box-sizing dependency illustrates how easily a "drop-in" stylesheet breaks a real project — and why the scoped boundary matters more than the themes themselves.

Han Design explicitly refuses to become a component library, which is a pragmatic choice: the maintenance burden of accessible, keyboard-navigable interactive widgets would overwhelm a solo project, and most teams already have a component system they won't abandon for a decorative layer.

Concepts & terms
data-theme attribute
An HTML data attribute that Han Design uses to switch entire visual themes (e.g., data-theme="song" or data-theme="celadon") by changing which CSS custom properties are active, without requiring page-level CSS rewrites.
Scoped CSS (han-scoped.css)
A stylesheet entry point that confines all of Han Design's tokens, theme variables, and base styles behind a data-han-scope boundary, so they do not leak into the host application's global styles or override its own design system.
Agent Skill
A packaged set of instructions, rules, and assets that an AI coding agent can load and follow. Han Design's Skill includes cultural-context rules, theme-selection logic, and output boundaries that guide the Agent beyond naive visual clichés.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗