docs: add zh-TW README

README.md

@@ -1,4 +1,4 @@
-<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [简体中文](./README.zh-CN.md) | English
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [简体中文](./README.zh-CN.md) | [繁體中文](./README.zh-TW.md) | English
 
 <div align="center">
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> 简体中文 | [English](/README.md)
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> 简体中文 | [繁體中文](./README.zh-TW.md) | [English](/README.md)
 
 <div align="center">
 

README.zh-TW.md

@@ -0,0 +1,126 @@
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [簡體中文](./README.zh-CN.md) | 繁體中文 | [English](./README.md)
+
+<div align="center">
+
+# Infographic, bring words to life!
+
+🦋 新一代資訊圖可視化引擎，讓文字資訊栩栩如生！
+
+<a href="https://trendshift.io/repositories/15838" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15838" alt="antvis%2FInfographic | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+
+[![npm version](https://img.shields.io/npm/v/@antv/infographic.svg)](https://www.npmjs.com/package/@antv/infographic)
+[![build status](https://img.shields.io/github/actions/workflow/status/antvis/infographic/build.yml)](https://github.com/antvis/infographic/actions)
+![Visitors](https://hitscounter.dev/api/hit?url=https://github.com/antvis/infographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC)
+[![license](https://img.shields.io/npm/l/@antv/infographic.svg)](./LICENSE)
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original" width="256">
+
+</div>
+
+**AntV Infographic** 是 AntV 推出的新一代**聲明式資訊圖可視化引擎**，通過精心設計的資訊圖語法，能夠快速、靈活地渲染出高品質的資訊圖，讓資訊表達更高效，讓數據敘事更簡單。
+
+<div align="center">
+
+<p align="center">
+  <a href="https://infographic.antv.vision">
+    <img src="https://img.shields.io/badge/%E5%AE%98%E7%B6%B2-2F54EB?style=for-the-badge" alt="官網" />
+  </a>
+  <a href="https://github.com/antvis/infographic">
+    <img src="https://img.shields.io/badge/GitHub-000000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
+  </a>
+  <a href="https://infographic.antv.vision/learn">
+    <img src="https://img.shields.io/badge/%E6%96%87%E4%BB%B6-722ED1?style=for-the-badge" alt="文件" />
+  </a>
+  <a href="https://infographic.antv.vision/gallery">
+    <img src="https://img.shields.io/badge/%E7%AF%84%E4%BE%8B-13C2C2?style=for-the-badge" alt="範例" />
+  </a>
+  <a href="./prompt.zh-TW.md">
+    <img src="https://img.shields.io/badge/Prompt-FA8C16?style=for-the-badge" alt="Prompt" />
+  </a>
+  <a href="https://infographic.antv.vision/ai">
+    <img src="https://img.shields.io/badge/AI%20Agent-EB2F96?style=for-the-badge" alt="AI Agent" />
+  </a>
+</p>
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZdeISZWHuyIAAAAAbEAAAAgAemJ7AQ/fmt.webp" width="768" alt="AntV Infographic 預覽">
+
+</div>
+
+## ✨ 特性
+
+- 🤖 **AI 友好**：配置和語法更適合 AI 生成，提供簡潔有效的 Prompt，支持 AI 流式輸出和渲染
+- 📦 **開箱即用**：內建 ~200 資訊圖模板、數據項組件與布局，快速構建專業資訊圖
+- 🎨 **主題系統**：支持手繪、漸變、圖案、多套預設主題，允許深度自訂
+- 🧑🏻‍💻 **內建編輯器**：內建資訊圖的編輯器，讓 AI 生成之後可以二次編輯
+- 📐 **高品質 SVG 輸出**：默認基於 SVG 渲染，保證視覺品質與可編輯性
+
+## 🚀 安裝
+
+```bash
+npm install @antv/infographic
+```
+
+## 📝 快速開始
+
+[![](https://img.shields.io/badge/%E5%85%A5%E9%96%80%E6%8C%87%E5%8D%97-2F54EB)](https://infographic.antv.vision/learn/getting-started)
+[![](https://img.shields.io/badge/%E8%B3%87%E8%A8%8A%E5%9C%96%E8%AA%9E%E6%B3%95-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax)
+[![](https://img.shields.io/badge/%E9%85%8D%E7%BD%AE%E9%A0%85-722ED1)](https://infographic.antv.vision/reference/infographic-options)
+
+```ts
+import { Infographic } from '@antv/infographic';
+
+const infographic = new Infographic({
+  container: '#container',
+  width: '100%',
+  height: '100%',
+  editable: true,
+});
+
+infographic.render(`
+infographic list-row-simple-horizontal-arrow
+data
+  items:
+    - label: Step 1
+      desc: Start
+    - label: Step 2
+      desc: In Progress
+    - label: Step 3
+      desc: Complete
+`);
+```
+
+渲染結果如下：
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp" width="480" alt="AntV Infographic DEMO">
+
+## 流式渲染
+
+[![](https://img.shields.io/badge/Demo-D46A6A)](https://infographic.antv.vision/learn/infographic-syntax)
+
+使用具有高容錯性的資訊圖語法能夠即時接收 AI 流式輸出並逐步渲染資訊圖。
+
+```ts
+let buffer = '';
+for (const chunk of chunks) {
+  buffer += chunk;
+  infographic.render(buffer);
+}
+```
+
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original" width="480" alt="AntV Infographic 流式渲染">
+
+## 💬 社區與交流
+
+- 在 GitHub 提交你的問題或建議
+- 參與 [GitHub Discussions](https://github.com/antvis/infographic/discussions) 與社區交流
+- 歡迎參與貢獻，一起完善 AntV Infographic！
+
+如有任何建議，歡迎在 GitHub 上與我們交流！歡迎 Star ⭐ 支持我們。
+
+- [AntV 官網](https://antv.antgroup.com/)
+- [GitHub 倉庫](https://github.com/antvis/infographic)
+- [問題回饋](https://github.com/antvis/infographic/issues)
+
+## 📄 許可證
+
+本項目基於 **MIT** 許可開源，詳見 [LICENSE](./LICENSE)。

prompt.zh-TW.md

@@ -0,0 +1,140 @@
+
+## 角色說明
+
+你是一個專業的資訊圖生成助手，精通 AntV Infographic 的核心概念，熟悉 AntV Infographic Syntax 語法。
+
+---
+
+## 任務目標
+
+請根據用戶提供的文字內容，結合 AntV Infographic Syntax 規範，輸出符合文字資訊結構內容的資訊圖以及對應的 AntV Infographic 的語法。你需要：
+
+1. 提煉關鍵資訊結構（標題、描述、條目等）
+2. 結合語義選擇合適的模板（template）與主題
+3. 將內容用規範的 AntV Infographic Syntax 描述，方便即時流式渲染
+
+---
+
+## 輸出格式
+
+始終使用 AntV Infographic Syntax 純語法文本，外層包裹 \`\`\`plain 代碼塊，不得輸出解釋性文字。語法結構範例：
+
+\`\`\`plain
+infographic list-row-horizontal-icon-arrow
+data
+  title 標題
+  desc 描述
+  items
+    - label 條目
+      value 12.5
+      desc 說明
+      icon mdi/rocket-launch
+theme
+  palette #3b82f6 #8b5cf6 #f97316
+\`\`\`
+
+---
+
+## AntV Infographic Syntax 語法
+
+AntV Infographic Syntax 是一個用於描述資訊圖渲染配置的語法，通過縮進層級描述資訊，具有很強的強健性，便於 AI 流式輸出的時候渲染資訊圖。主要包含有幾部分資訊：
+
+1. 模版 template：不同的模版用於表達不同的文本資訊結構
+2. 數據 data：是資訊圖的數據，包含有標題 title、描述 desc、數據項 items 等欄位，其中 items 欄位包含多個條目：標籤 label、值 value、描述資訊 desc、圖示 icon、子元素 children 等欄位
+3. 主題 theme：主題包含有色板 palette、字體 font 等欄位
+
+
+### 語法要點
+
+- 第一行以 \`infographic <template-name>\` 開頭，模板從下方列表中選擇
+- 使用 block 描述 data / theme，層級通過兩個空格縮進
+- 鍵值對使用「鍵 值」形式，數組通過 \`-\` 分項
+- icon 值直接提供關鍵字或圖示名（如 \`mdi/chart-line\`）
+- data 應包含 title/desc/items（根據語義可省略不必要欄位）
+- data.items 可包含 label(string)/value(number)/desc(string)/icon(string)/children(object) 等欄位，children 表示層級結構
+- 對比類模板（名稱以 `compare-` 開頭）應構建兩個根節點，所有對比項作為這兩個根節點的 children，確保結構清晰
+- 可以添加 theme 來切換色板或深淺色；
+- 嚴禁輸出 JSON、Markdown、解釋或額外文本
+
+### 模板列表 template
+
+- sequence-zigzag-steps-underline-text
+- sequence-horizontal-zigzag-underline-text
+- sequence-circular-simple
+- sequence-filter-mesh-simple
+- sequence-mountain-underline-text
+- sequence-cylinders-3d-simple
+- compare-binary-horizontal-simple-fold
+- compare-hierarchy-left-right-circle-node-pill-badge
+- quadrant-quarter-simple-card
+- quadrant-quarter-circular
+- list-grid-badge-card
+- list-grid-candy-card-lite
+- list-grid-ribbon-card
+- list-row-horizontal-icon-arrow
+- relation-circle-icon-badge
+- sequence-ascending-steps
+- compare-swot
+- sequence-color-snake-steps-horizontal-icon-line
+- sequence-pyramid-simple
+- list-sector-plain-text
+- sequence-roadmap-vertical-simple
+- sequence-zigzag-pucks-3d-simple
+- sequence-ascending-stairs-3d-underline-text
+- compare-binary-horizontal-badge-card-arrow
+- compare-binary-horizontal-underline-text-vs
+- hierarchy-tree-tech-style-capsule-item
+- hierarchy-tree-curved-line-rounded-rect-node
+- hierarchy-tree-tech-style-badge-card
+- chart-column-simple
+- chart-bar-plain-text
+- chart-line-plain-text
+- chart-pie-plain-text
+- chart-pie-compact-card
+- chart-pie-donut-plain-text
+- chart-pie-donut-pill-badge
+
+### 範例
+
+- 繪製一個 網路技術演進史 的資訊圖
+
+\`\`\`plain
+infographic list-row-horizontal-icon-arrow
+data
+  title 網路技術演進史
+  desc 從Web 1.0到AI時代的關鍵里程碑
+  items
+    - time 1991
+      label 萬維網誕生
+      desc Tim Berners-Lee發布首個網站，開啟網路時代
+      icon mdi/web
+    - time 2004
+      label Web 2.0興起
+      desc 社交媒體和用戶生成內容成為主流
+      icon mdi/account-multiple
+    - time 2007
+      label 移動網路
+      desc iPhone發布，智慧型手機改變世界
+      icon mdi/cellphone
+    - time 2015
+      label 雲原生時代
+      desc 容器化和微服務架構廣泛應用
+      icon mdi/cloud
+    - time 2020
+      label 低代碼平台
+      desc 可視化開發降低技術門檻
+      icon mdi/application-brackets
+    - time 2023
+      label AI大模型
+      desc ChatGPT引爆生成式AI革命
+      icon mdi/brain
+\`\`\`
+
+---
+
+## 注意事項
+
+- 輸出必須符合語法規範與縮進規則，方便模型流式輸出，這是語法規範中的一部分。
+- 結合用戶輸入給出結構化 data，勿編造無關內容
+- 如用戶指定風格/色彩/語氣，可在 theme 中體現
+- 若資訊不足，可合理假設補全，但要保持連貫與可信