Han: A CSS Design System That Gives AI Agents a Sense of Chinese Aesthetics
theme: channing-cyan
Honestly, it's quite difficult.
You want vermilion red, but it can't be too red; you want ink wash, but it can't be too black; you want blank space, but it can't be so empty that there's nothing there. One misstep, and it either turns into festive bright reds and greens, or a "fake antique" piling on dragons, phoenixes, and auspicious clouds.
Han · Han was created to solve exactly this — a Chinese cultural design Skill for AI Agents, turning Eastern aesthetic elements like rice paper, ink tones, vermilion, calligraphy, and scrolls into directly usable CSS tokens, themes, and components.
No need to build a color palette from scratch, no need to hand-code patterns, no need to agonize over "what color should this dynasty use." Import one CSS file, pick a theme, and the page has its character.
In a Nutshell: What Is It?
Han is a design Skill + visual asset pack. You can understand it as:
An out-of-the-box Chinese-style design system that handles colors, fonts, spacing, components, and animations at the CSS level, while also including cultural decision-making rules so an AI Agent can autonomously judge "what style fits what scenario."
Currently, there are 22 themes, covering dynasty-inspired themes from Qin-Han to Qing, cultural themes like ink wash, blue-and-white porcelain, and Dunhuang, plus 6 contemporary color themes for modern web pages.
No build step, no dependency installation — just import the CSS and it works.
What Can It Do? See for Yourself
Words alone aren't enough. Let's see what real pages built with Han look like.
1. Tea Brand — Pine-Wheat Theme
Pine-wheat green color scheme, natural and fresh. Navigation, Hero section, product display, brand story, CTA — everything a tea brand landing page needs is there. The colors don't steal the show, but the vibe is spot on.
2. Beauty & Skincare — Wisteria Purple Theme
Wisteria purple tones, soft and romantic. Suitable for beauty, skincare, and affordable luxury brands. Who says Chinese style is only for tea and museums?
3. AI Tech Product — Ocean Orchid Theme
Ocean orchid color scheme, cool and clear. Tech products can use Chinese style too, and it doesn't feel out of place at all. Who says AI has to be blue-purple gradients?
4. Specialty Coffee — Caramel Theme
Caramel warm tones, vintage and premium. Coffee brand + Chinese style — a combination many might not think of, but the effect really works.
5. Yoga & Wellness — Mint Theme
Mint lavender color scheme, clear and natural. Yoga, wellness, lifestyle products using this — just looking at it makes you want to take a deep breath.
6. Dessert Festival Event — Berry Theme
Berry cream color scheme, bright and energetic. Event pages and marketing pages using these tones feel youthful without being frivolous.
7. Mac Product Concept Page — Song Dynasty Theme
This might be the most surprising — using the Song Dynasty theme to create an Apple Mac-style product page. The elegant, restrained design language, paired with large product images and refined typography, shows that the combination of Eastern aesthetics and modern tech products can be this natural.
8. Software Product Official Website
This page was built with the Han design skill (Song · song theme) · Responsive · Accessible
9. Contemporary Color Theme Overview
A one-stop showcase of 6 contemporary color themes, with theme switching, color system display, and component demos. Want to pick a theme? Open this page and compare directly.
Core Capabilities: More Than Just Good Looks
22 Themes, One Will Fit
| Type | Theme | Suitable Scenarios |
|---|---|---|
| Dynasty Inspired | Qin-Han, Wei-Jin, Tang, Song, Yuan, Ming, Qing | Museums, cultural exhibitions, history education |
| Cultural Themes | Ink Wash, Blue-Green Landscape, Blue-and-White Porcelain, Dunhuang, Imperial Gold, Martial Arts, Tea Ceremony, Cinnabar, Celadon | Brand official sites, cultural creative products, traditional culture |
| Contemporary Colors | Pine-Wheat, Wisteria Purple, Ocean Orchid, Caramel, Mint, Berry | Modern brands, SaaS products, lifestyle |
Switching themes is one line of code:
<html lang="zh-CN" data-theme="song">
Components Are All There, and They're Not Tacky
- Seal Button
.han-btn-seal— For key CTAs, with a tilt and stamp animation effect - Ink Wash Navigation
.han-navbar— sticky + frosted glass, brand name in a single vermilion character - Scroll Card
.han-card-scroll— Product displays, article lists, with rivet decorations at the four corners - Window Lattice Frame
.han-frame-window— For famous quotes, poetry displays - Ink Wash Divider
.han-divider-ink— Section transitions, with a small seal - Seal
.han-stamp— For signatures, inscriptions, certifications
AI Agents Can Do the Work Themselves
This is the most interesting part of Han — it's not just CSS, it also includes a set of cultural decision-making rules.
You tell the AI:
"Use han-design to make a restrained Song-style product landing page for me."
Or more casually:
"Use han-design to make the current page look better, you decide the theme and style."
The AI will read the design specs, judge the page type, select a theme, determine the visual intensity, fill in the content, and then generate the page. You don't need to know what the theme ID is called, nor do you need to memorize component class names.
All the Necessary Engineering Qualities Are There
- Responsive, viewable on mobile
- Keyboard focus, ARIA labels, reduced-motion support
han-scoped.cssfor local import, doesn't pollute the host project's global styles- No build step, runs directly as static HTML
- Dark mode support
How to Use?
Method 1: Install as an Agent Skill
git clone https://github.com/you-want/han-design.git han
mkdir -p "$HOME/.agents/skills"
cp -R skills/han-design "$HOME/.agents/skills/han-design"
After installation, just tell the AI "make a page with han-design" and it works.
Method 2: Use the CSS Directly
Copy skills/han-design/assets/ to your project:
<!-- Optional: Remote fonts -->
<link rel="stylesheet" href="/han/fonts.css">
<!-- Complete design system -->
<link rel="stylesheet" href="/han/han.css">
Existing projects that don't want to be affected by a global reset? Use the scoped version:
<link rel="stylesheet" href="/han/han-scoped.css">
<section data-han-scope data-theme="song">
<button type="button" class="han-btn-seal">Confirm</button>
</section>
Tokens, dark mode, and theme variables only take effect within data-han-scope, leaving every other style in your project untouched.
Who Is It For?
- Frontend Developers — Want to quickly build a tasteful Chinese-style page without starting a color palette from scratch
- Designers — Need a reliable set of Chinese-style design tokens for reference
- AI Application Developers — Want to equip an Agent with "Chinese-style aesthetic" capabilities
- Indie Developers / Entrepreneurs — Building a brand official site or product landing page, wanting a distinctive character
- Anyone tired of the "blue-purple gradient + Inter font" look
Final Words
The biggest pitfall in Chinese-style design isn't the technology, it's the sense of proportion.
Too much vermilion looks like New Year's, too much gold looks like a temple, and randomly using dragon and phoenix patterns looks cheap. Han's design specs specifically include a taboo list — gold no more than 3%, vermilion no more than 5%, no emojis as icons, no random use of dragon and phoenix patterns. These rules aren't arbitrary; they are summarized from extensive practice.
Let Eastern aesthetics bloom elegantly on the web, rather than being overdone.
This is what Han wants to do. Why is it called Han??? Because our ID cards say Han ethnicity, we speak the Han language, we write Han characters... so of course, our Chinese style should also be called han-design.
Project Repo: github.com/you-want/han-design
License: MIT, use freely.
That's all the content. If you find it interesting, go to GitHub and give it a Star, or just install it and try it out. If you have questions, feel free to open an Issue, and you're also welcome to share what cool things you've made with Han.