Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sanhuang520-ship-it/awesome-chinese-ai-tools --skill chinese-web-themesgit clone --depth 1 https://github.com/sanhuang520-ship-it/awesome-chinese-ai-toolsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sanhuang520-ship-it/awesome-chinese-ai-tools/chinese-web-themes)<a href="https://agentmods.dev/skills/sanhuang520-ship-it/awesome-chinese-ai-tools/chinese-web-themes"><img src="https://agentmods.dev/badge/skills/sanhuang520-ship-it/awesome-chinese-ai-tools/chinese-web-themes/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sanhuang520-ship-it/awesome-chinese-ai-tools/chinese-web-themes"><img src="https://agentmods.dev/badge/skills/sanhuang520-ship-it/awesome-chinese-ai-tools/chinese-web-themes.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00079 | $0.01600 |
| Opus 5 | $0.00039 | $0.00800 |
| Sonnet 5 | $0.00016 | $0.00320 |
| Haiku 4.5 | $0.00008 | $0.00160 |
Grade A, and why
chinese-web-themes scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.
中式网页主题库
一个事实：主流网页主题库里有日式极简，却几乎没有中式的。
我们查过某个 32 套主题的知名库——有 japanese-minimal、tokyo-night、nord、gruvbox，
一套中式的都没有。中文用户想做国风网页，只能自己从零调色。
什么时候用
做中国风网页/博客/文档站、给现有站换中式皮肤、要一套中式配色方案、中文长文阅读页排版。
8 套主题
| 主题 | data-theme |
色系 | 适合 |
|---|---|---|---|
| 水墨 | ink |
素白宣纸 · 墨黑 | 随笔、诗词、极简博客 |
| 青绿 | azurite |
石青 · 石绿 | 文旅、山水、《千里江山图》感 |
| 宋韵 | song |
天青 · 素雅 | 茶文化、克制的品牌站 |
| 敦煌 | dunhuang |
土红 · 石青 | 文化 IP、历史题材 |
| 朱砂 | vermilion |
中国红 · 墨 | 节庆、有力度的主张 |
| 新中式 | neo |
木色 · 素白 | 家居、当代品牌 |
| 竹韵 | bamboo |
竹青 · 米白 | 清雅、自然、健康 |
| 夜宴 | night |
墨底 · 暗金 | 深色模式 |
另有 auto —— 跟随系统深色偏好。
怎么用
1. 引入样式
<html lang="zh-CN" data-theme="ink">
<link rel="stylesheet" href="themes.css">
2. 切换主题（改属性即可，无需重载）
document.documentElement.dataset.theme = 'azurite';
3. 可选装饰
<html data-theme="ink" data-paper="on"> <!-- 宣纸纹理 -->
<html data-theme="song" data-indent="print"> <!-- 首行缩进（印刷风）-->
接入现有网站时
用户要求保留原有正文、代码块或组件样式时，不要把主题 CSS 当作整站重置。优先给最短接入方案，并在上线清单里逐项写出这 6 类检查；不能因为其中一项看似与配色无关而省略：
- 正文：行宽、字号、行高、段落间距没有被主题意外覆盖。
- 移动端：窄屏无横向溢出，长标题、图片和表格仍可用。
- 代码块：字体、背景、语法高亮、换行或横向滚动保持原行为。
- 样式覆盖：确认样式加载顺序、选择器优先级和生产缓存；优先只覆盖变量。
- 授权：主题本身只用系统字体；若项目另加字体、图片或纹理，必须核对商用许可与署名要求。
- 无障碍：正文/链接/焦点对比度、键盘焦点和减少动态效果偏好可辨识。
如果用户只要审查或方案，不要生成整份 CSS，也不要为了“演示”修改文件。
关键：中文排版已内置
这是和普通主题库最大的区别——不只是换颜色，排版规范也写进去了：
| 项目 | 值 | 为什么 |
|---|---|---|
| 行高 | 1.75 |
中文字符方正，西文常用的 1.5 会挤 |
| 行宽 | 38em |
中文一行 30-40 字最舒服 |
| 字体栈 | 西文在前、中文在后 | 混排时英文才好看 |
| 断行 | line-break: strict |
标点不出现在行首（避头尾） |
| 强调 | 着重号，不用斜体 | 中文没有真斜体，会被拉斜变形 |
| 标题 | 衬线字体 | 宋体标题更有中文书卷气 |
CSS 变量（可覆盖）
每套主题定义这 8 个：
--bg 页面底色
--surface 卡片/代码块底色
--line 分隔线
--ink 正文文字
--ink-strong 标题/强调
--ink-soft 次要文字
--accent 强调色（链接、引用条）
--accent-weak 强调色的浅版
想微调，直接在自己的 CSS 里覆盖：
[data-theme="ink"] { --accent: #8C3A2E; }
无障碍
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 131 lines · 79 tokens per session scan A 1cbb4e17e888
chinese-web-themes is a skill published in the GitHub repository sanhuang520-ship-it/awesome-chinese-ai-tools (10 stars, last pushed 8d ago), licensed MIT. It adds 79 tokens to every session and 1,600 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.
design-preview
A method for turning an existing or proposed interface into a self-contained HTML preview that can be opened and checked in Chrome.
uiuxdesign
UI/UX design quality across interfaces - visual design, UX review, accessibility audits, design systems, and design critique - plus modern web frontend implementation. Use for design-quality scoring and refactor loops, design reviews, style selection (40+ named styles), color palettes and font pairing by product type…
opendesign
Generate polished single-file HTML design artifacts using the nexu-io/open-design catalog of production skills and brand-grade design systems. Use when the user asks to design, mock up, prototype, draft, build, or render a visual web artifact, chooses a brand/style direction, requests a deck/PPT, hero, section…
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns…