Add hosted theme preview tables

README.en.md

@@ -250,13 +250,15 @@ guizang-ppt-skill/
 
 Pick from `references/themes.md`. **Custom hex values are not allowed** — protecting the aesthetic matters more than freedom of choice.
 
-| Theme | Best for |
-|------|---------|
-| 🖋 Ink Classic | general default, commercial launches, when in doubt |
-| 🌊 Indigo Porcelain | tech / research / AI / technical keynotes |
-| 🌿 Forest Ink | nature / sustainability / culture / non-fiction |
-| 🍂 Kraft Paper | nostalgic / humanist / literary / indie zines |
-| 🌙 Dune | art / design / creative / gallery |
+### Style A Editorial Themes
+
+| Preview | Theme | Core colors and best for |
+|---------|-------|--------------------------|
+| <img src="https://github.com/user-attachments/assets/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4" width="260" alt="Ink Classic theme preview"> | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. General default, commercial launches, when in doubt. |
+| <img src="https://github.com/user-attachments/assets/99ce0fd2-72a6-4368-a75a-a8e21657a537" width="260" alt="Indigo Porcelain theme preview"> | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. Tech, research, AI, technical keynotes. |
+| <img src="https://github.com/user-attachments/assets/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657" width="260" alt="Forest Ink theme preview"> | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. Nature, sustainability, culture, non-fiction. |
+| <img src="https://github.com/user-attachments/assets/dfea080e-e916-417e-93cd-0a3628de84ca" width="260" alt="Kraft Paper theme preview"> | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgic, humanist, literary, indie zines. |
+| <img src="https://github.com/user-attachments/assets/f3705592-9a72-4dbc-9818-df3aea61bc75" width="260" alt="Dune theme preview"> | 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Art, design, creative, fashion, gallery-like decks. |
 
 Switching themes only requires replacing the 6 variables at the top of `template.html`'s `:root{}` block — all other CSS flows through `var(--...)`.
 
@@ -264,12 +266,12 @@ Switching themes only requires replacing the 6 variables at the top of `template
 
 Pick from `references/themes-swiss.md`. **Custom hex values are not allowed** here either.
 
-| Theme | Best for |
-|------|---------|
-| International Klein Blue | default, commercial launch, AI products, frameworks |
-| Lemon Yellow | youth, sports, retail, Y2K retro |
-| Lemon Green | ecology, sustainability, Gen Z brands |
-| Safety Orange | alerts, news, energetic topics |
+| Preview | Theme | Anchor color and best for |
+|---------|-------|---------------------------|
+| <img src="https://github.com/user-attachments/assets/c02d02f7-ce6f-4e16-b8a6-778c96851f94" width="260" alt="International Klein Blue Swiss theme preview"> | 🔵 **International Klein Blue** | `#002FA7`. Default, commercial launches, AI products, frameworks. |
+| <img src="https://github.com/user-attachments/assets/c310a8c4-5d28-450e-b49a-6ac5b6ba4785" width="260" alt="Lemon Yellow Swiss theme preview"> | 🟡 **Lemon Yellow** | `#FFD500`. Youth, sports, retail, consumer goods, Y2K retro. |
+| <img src="https://github.com/user-attachments/assets/65f7b3f9-3358-419e-b513-f7f2cc24ec76" width="260" alt="Lemon Green Swiss theme preview"> | 🟢 **Lemon Green** | `#C5E803`. Ecology, sustainability, health, Gen Z brands. |
+| <img src="https://github.com/user-attachments/assets/9c3319c9-a134-4657-9a56-211c23411f7f" width="260" alt="Safety Orange Swiss theme preview"> | 🟠 **Safety Orange** | `#FF6B35`. Alerts, news, industrial topics, sports, energetic themes. |
 
 If the user asks for a Swiss-style deck without specifying color, default to International Klein Blue.
 

README.md

@@ -251,13 +251,15 @@ guizang-ppt-skill/
 
 从 `references/themes.md` 里选一套——**不允许自定义 hex 值**,保护美学比给自由更重要。
 
-| 主题 | 适合场景 |
-|------|---------|
-| 🖋 墨水经典 | 通用默认、商业发布、不知道选啥 |
-| 🌊 靛蓝瓷 | 科技 / 研究 / AI / 技术发布会 |
-| 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |
-| 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |
-| 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |
+### Style A 电子杂志主题
+
+| 预览 | 主题 | 核心色与适合场景 |
+|------|------|------------------|
+| <img src="https://github.com/user-attachments/assets/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4" width="260" alt="墨水经典主题预览"> | 🖋 **墨水经典** | `#0a0a0b` / `#f1efea`。通用默认、商业发布、不知道选啥时最稳。 |
+| <img src="https://github.com/user-attachments/assets/99ce0fd2-72a6-4368-a75a-a8e21657a537" width="260" alt="靛蓝瓷主题预览"> | 🌊 **靛蓝瓷** | `#0a1f3d` / `#f1f3f5`。科技、研究、AI、技术发布会。 |
+| <img src="https://github.com/user-attachments/assets/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657" width="260" alt="森林墨主题预览"> | 🌿 **森林墨** | `#1a2e1f` / `#f5f1e8`。自然、可持续、文化、非虚构内容。 |
+| <img src="https://github.com/user-attachments/assets/dfea080e-e916-417e-93cd-0a3628de84ca" width="260" alt="牛皮纸主题预览"> | 🍂 **牛皮纸** | `#2a1e13` / `#eedfc7`。怀旧、人文、阅读、历史、文学分享。 |
+| <img src="https://github.com/user-attachments/assets/f3705592-9a72-4dbc-9818-df3aea61bc75" width="260" alt="沙丘主题预览"> | 🌙 **沙丘** | `#1f1a14` / `#f0e6d2`。艺术、设计、创意、时尚和画廊感内容。 |
 
 切换主题只需替换 `template.html` 开头 `:root{}` 里的 6 行变量,其他 CSS 全走 `var(--...)`。
 
@@ -265,12 +267,12 @@ guizang-ppt-skill/
 
 瑞士风从 `references/themes-swiss.md` 里选一套,同样**不允许自定义 hex 值**。
 
-| 主题 | 适合场景 |
-|------|---------|
-| 克莱因蓝 IKB | 通用默认、商业发布、AI 产品、方法论 |
-| 柠檬黄 | 年轻、运动、零售、Y2K 复古 |
-| 柠檬绿 | 生态、可持续、Z 世代品牌 |
-| 安全橙 | 警示、新闻、活力主题 |
+| 预览 | 主题 | 锚点色与适合场景 |
+|------|------|------------------|
+| <img src="https://github.com/user-attachments/assets/c02d02f7-ce6f-4e16-b8a6-778c96851f94" width="260" alt="克莱因蓝瑞士主题预览"> | 🔵 **克莱因蓝 IKB** | `#002FA7`。通用默认、商业发布、AI 产品、方法论。 |
+| <img src="https://github.com/user-attachments/assets/c310a8c4-5d28-450e-b49a-6ac5b6ba4785" width="260" alt="柠檬黄瑞士主题预览"> | 🟡 **柠檬黄** | `#FFD500`。年轻、运动、零售、消费品、Y2K 复古。 |
+| <img src="https://github.com/user-attachments/assets/65f7b3f9-3358-419e-b513-f7f2cc24ec76" width="260" alt="柠檬绿瑞士主题预览"> | 🟢 **柠檬绿** | `#C5E803`。生态、可持续、健康、Z 世代品牌。 |
+| <img src="https://github.com/user-attachments/assets/9c3319c9-a134-4657-9a56-211c23411f7f" width="260" alt="安全橙瑞士主题预览"> | 🟠 **安全橙** | `#FF6B35`。警示、新闻、工业、运动、活力主题。 |
 
 如果用户说"瑞士风 PPT"但没有指定颜色,默认推荐克莱因蓝 IKB。