feat: add gallery screenshot + prominent CTA for live examples

- Add assets/gallery.png: full-page screenshot of 10-hue gallery
  (all color wheels with light/dark mini-UI previews)
- Replace plain inline link with centered CTA block:
  clickable gallery image (720px) + bold action link
- Apply to both English and Chinese sections
- Upgrade top blockquote links to arrow-prefixed CTA style

Author: truman-t3

README.md

@@ -17,7 +17,7 @@ English | [中文](#chinese)
 > ⭐ **If this project helped you, a star is the easiest way to say thanks — and helps others find it.**
 > 若这个项目对你有用，点个 Star 就是最简单的鼓励，也能帮更多人发现它。
 
-> **▶ Live examples:** https://truman-t3.github.io/tinted-ui-tokens-skills/examples/ — **ten brand colors across the full hue wheel** (red → violet → pink), light + dark, WCAG AA guaranteed. Source in [`examples/`](examples/).
+> **▶ [Live Gallery →](https://truman-t3.github.io/tinted-ui-tokens-skills/examples/)** Ten brand colors across the full hue wheel (red → violet → pink), light + dark, WCAG AA guaranteed. Source in [`examples/`](examples/).
 
 **Why does your UI look cheap?** Flat `#FFF` / `#000` / `#808080` neutrals. This skill turns **one brand color** into a complete, production-ready *tinted-neutral* token system — so every surface, border, and text layer carries the brand's temperature instead of reading as "flat".
 
@@ -221,7 +221,15 @@ Every brand color below was produced by the **same single command** —
 `python scripts/generate_tokens.py --brand "#XXXXXX"`. Light + dark, and every text pair
 and on-brand button keeps WCAG AA (≥4.5:1).
 
-**[→ Open the live gallery (10 hues, light + dark)](https://truman-t3.github.io/tinted-ui-tokens-skills/examples/)**
+<p align="center">
+  <a href="https://truman-t3.github.io/tinted-ui-tokens-skills/examples/">
+    <img src="assets/gallery.png" alt="Live gallery — 10 brand colors across the full hue wheel, light + dark themes" width="720" />
+  </a>
+</p>
+<p align="center">
+  <strong><a href="https://truman-t3.github.io/tinted-ui-tokens-skills/examples/">▶ Open Live Gallery — 10 hues, light + dark, interactive</a></strong> &nbsp;|&nbsp;
+  <a href="examples/">📁 Browse local examples/</a>
+</p>
 
 | Hue | Brand | Light bg | Dark bg | On-brand | Preview |
 | --- | --- | --- | --- | --- | --- |
@@ -303,7 +311,7 @@ MIT
 [![Platforms](https://img.shields.io/badge/agents-15%20supported-9cf)](agents/)
 [![Accessibility](https://img.shields.io/badge/WCAG%20AA-%E2%89%A5%204.5%3A1-brightgreen)](references/principles.md)
 
-> **▶ 在线预览：** https://truman-t3.github.io/tinted-ui-tokens-skills/examples/ —— **十个品牌色覆盖完整色轮**（红 → 紫 → 粉），明暗双主题，WCAG AA 保证。源码见 [`examples/`](examples/)。
+> **▶ [在线画廊 →](https://truman-t3.github.io/tinted-ui-tokens-skills/examples/)** 十个品牌色覆盖完整色轮（红 → 紫 → 粉），明暗双主题，WCAG AA 保证。源码见 [`examples/`](examples/)。
 
 > **为什么你的 UI 看起来很廉价？** 因为用了扁平的纯中性色 `#FFF` / `#000` / `#808080`。这个技能把**一个品牌色**变成一套完整、可上线的「染色中性色」Token 系统——让每一个背景、表面、边框、文字层级都带上品牌的体温，而不是一片「平」。
 
@@ -496,7 +504,15 @@ WCAG AA——生成器会实测对比度并在不达标时自动微调文字，
 下面每一个品牌色，都是用**同一条命令**生成的 —— `python scripts/generate_tokens.py --brand "#XXXXXX"`。
 明暗双主题，且每一组文字对比与「品牌按钮上的文字色」都保持 WCAG AA（≥4.5:1）。
 
-**[→ 打开在线画廊（10 个色系，明 + 暗）](https://truman-t3.github.io/tinted-ui-tokens-skills/examples/)**
+<p align="center">
+  <a href="https://truman-t3.github.io/tinted-ui-tokens-skills/examples/">
+    <img src="assets/gallery.png" alt="在线画廊 —— 10 个品牌色覆盖完整色轮，明暗双主题" width="720" />
+  </a>
+</p>
+<p align="center">
+  <strong><a href="https://truman-t3.github.io/tinted-ui-tokens-skills/examples/">▶ 打开在线画廊（10 个色系，明 + 暗，可交互）</a></strong> &nbsp;|&nbsp;
+  <a href="examples/">📁 浏览本地 examples/</a>
+</p>
 
 | 色系 | 品牌色 | 浅色背景 | 深色背景 | on-brand | 预览 |
 | --- | --- | --- | --- | --- | --- |