Frontend · Design · AI Programming

Han: A CSS Design System That Gives AI Agents a Sense of Chinese Aesthetics

By 雨夜寻晴天 · Aug 8, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Chinese-style web design usually collapses into red-and-gold kitsch or fake-antique clutter. Han provides a disciplined, tokenized alternative that works as a plain CSS import and as an AI agent skill, so both human developers and LLM-driven tools can produce pages with genuine cultural character instead of caricature.

Summary

Han packages the aesthetics of rice paper, ink wash, vermilion, and calligraphy into a drop-in CSS design system with 22 themes spanning dynastic, cultural, and contemporary palettes. It ships with components like seal buttons, scroll cards, and ink-wash navigation that avoid the clichéd red-and-gold overload common in Chinese-style web design. A scoped CSS variant prevents style pollution in existing projects, and the system includes dark mode, ARIA labels, and reduced-motion support.

The system doubles as an AI agent skill: a set of cultural decision rules lets an agent autonomously select a theme, judge visual intensity, and generate a page from a natural-language prompt. A developer can say "make a restrained Song-style landing page" without knowing theme IDs or component class names.

Live demos show the system applied to tea brands, beauty products, AI SaaS, specialty coffee, yoga studios, and even an Apple Mac-style product page — all carrying a distinct but understated Chinese aesthetic.

Takeaways

— 22 themes are available: dynasty-inspired (Qin-Han through Qing), cultural (ink wash, blue-and-white porcelain, Dunhuang), and six contemporary palettes (pine-wheat, wisteria purple, ocean orchid, caramel, mint, berry).

— Theming requires one HTML attribute: `<html data-theme="song">`.

— Components include seal buttons with stamp animations, sticky frosted-glass navigation, scroll cards with rivet decorations, window-lattice frames, ink-wash dividers, and signature seals.

— A scoped CSS file (`han-scoped.css`) confines all tokens and resets to a `data-han-scope` container, leaving the host project's global styles untouched.

— AI agents use built-in cultural decision rules to pick a theme, set visual intensity, and generate a page from prompts like "make a restrained Song-style landing page."

— The design spec enforces hard limits: gold usage under 3%, vermilion under 5%, no emoji icons, and no indiscriminate dragon or phoenix motifs.

— No build step or dependency installation is required; the system runs as static HTML with dark mode, keyboard focus, ARIA labels, and reduced-motion support.

Conclusions

The system's real innovation is encoding cultural taste as machine-readable rules — a taboo list with percentage caps on gold and vermilion — so an AI agent doesn't just apply a theme but exercises restraint.

Scoped CSS is a pragmatic concession to real-world adoption: most teams won't adopt a design system that forces a global reset, so Han sidesteps the conflict entirely.

The live demos deliberately avoid traditional cultural subjects, showing the themes on coffee, yoga, and SaaS pages. This makes the case that Chinese aesthetics are a general-purpose design language, not a niche heritage format.

Concepts & terms

CSS design tokens

Platform-agnostic style values (colors, spacing, typography) stored as named variables that a design system exposes for consistent theming across components.

Agent skill

A packaged set of instructions, rules, and assets that an AI agent can load and follow to perform a specific task — here, selecting and applying a culturally appropriate visual theme to a web page.

Scoped CSS

A stylesheet whose rules only apply to elements inside a designated container (e.g., `data-han-scope`), preventing the design system's resets and variables from leaking into the rest of a project.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗