AI Agent 技術棧工具選型：Crawl4AI、shadcn/ui、Ant Design
工具評測與 DKY 應用筆記 · 資料擷取、前端元件、企業級介面
三個專案分屬不同層次：Crawl4AI 負責把網站內容轉成資料，shadcn/ui 負責打造可完全客製的前端，Ant Design 負責快速完成資料密集型企業後台。它們不是互相取代的產品。
先看結論
| 專案 | 所在層次 | 核心價值 | 最適合的用途 |
|---|
| Crawl4AI | 資料擷取層 | 把動態網頁轉成 Markdown 或結構化資料 | 公開資料蒐集、研究資料管線、人工審核前置 |
| shadcn/ui | 前端組裝層 | 把元件程式碼帶進自己的專案，自行掌握設計與修改 | AI 工具、品牌化產品、自訂互動介面 |
| Ant Design | 企業應用層 | 提供成熟的表格、表單、日期、篩選與管理元件 | GA4 後台、資料審核、內部管理系統 |
Crawl4AI：把網站內容轉成可用資料
它解決什麼問題？
Crawl4AI 是開源的非同步網頁爬蟲，使用 Playwright 處理 JavaScript 動態頁面，並可輸出乾淨 Markdown、連結、媒體與結構化資料。它也支援深度爬取、快取、截圖、代理與 CDP。
PythonPlaywright動態頁面Markdown結構化擷取
DKY 的應用判斷
- 台壽公開網站：處理需要 JavaScript 渲染的 QA、產品或服務頁面。
- Mounjaro 診所資料：擷取公開價格與服務資訊，保留來源網址、擷取時間與原始內容，再交由人工審核。
- 研究資料管線：網站 → 結構化資料 → 去重與驗證 → 靜態頁面、Google Sheets 或報告。
如果目標網站是靜態文章，Jina Reader 或一般 HTTP 抓取會更簡單；不要為了所有頁面都啟動瀏覽器。
官方專案：Crawl4AI GitHub · 目前採用版本：v0.9.2
shadcn/ui：把前端元件掌握在自己手上
它和一般 UI 套件有什麼不同？
shadcn/ui 不只是安裝一個封裝好的元件庫，而是透過元件分發機制，把元件原始碼加入自己的專案。加入之後可以直接修改結構、樣式與互動，不必等待上游套件提供客製化選項。
ReactTailwind CSS可及性設計系統元件原始碼
DKY 的應用判斷
- 新的 AI 工具或會員產品：適合做有品牌辨識度的輸入、對話、結果與設定介面。
- tools.dky.tw：如果未來從純 HTML 工具擴展成較完整的互動產品，可作為前端元件基礎。
- 暖色系站群：容易套用米白、赭紅、暖棕的設計 token，不必接受預設企業藍。
它的自由度也代表維護責任在自己。learn.dky.tw、twltrip.dky.tw 等既有靜態站，不值得只為了導入 shadcn/ui 而重寫。
官方專案：shadcn/ui GitHub · 官方文件
Ant Design：快速完成資料密集型企業介面
它的強項是什麼？
Ant Design 是成熟的企業級 React UI 元件庫，提供表格、表單、日期選擇、下拉選單、對話框、分頁、通知、國際化與主題調整。它的價值在於不用從零開始組裝一套後台。
ReactTypeScriptTableForm國際化主題調整
DKY 的應用判斷
- GA4／NOOA 內部後台：日期區間、管道篩選、三個月比較、表格與匯出操作可快速完成。
- Mounjaro 資料審核：管理診所、劑量、價格、來源、更新日期與待審狀態。
- Crawl4AI 管理介面：查看任務、錯誤、擷取結果與人工審核佇列。
Ant Design 預設企業感較強；公開品牌頁面仍應使用自訂設計。若需要暖色系，應先定義 theme token，不要在每個元件上零散覆寫。
官方專案：Ant Design GitHub · 元件總覽
三者如何組合
公開來源
網站、文件、資料頁
Crawl4AI
擷取與結構化
審核後台
Ant Design
對外產品
靜態頁或 shadcn/ui
最合理的分工是：Crawl4AI 放在後端資料管線；Ant Design 用於內部管理與審核；shadcn/ui 用於需要品牌化的對外互動產品。資料與 API 共用即可，不必讓兩套前端元件在同一個頁面互相競爭。
DKY 實際選型表
| 需求 | 選擇 | 判斷 |
|---|
| 擷取 JavaScript 網頁 | Crawl4AI | 已在環境中驗證，可補足靜態抓取工具的缺口。 |
| 既有內容站 | 維持靜態 HTML/CSS | learn、twltrip 等站不因導入框架而重寫。 |
| 新的品牌化 AI 工具 | shadcn/ui | 程式碼可控、容易符合暖色系與產品個性。 |
| 內部報表或審核後台 | Ant Design | 表格、表單、篩選、日期與分頁成熟，開發速度快。 |
| 正式報告交付 | Google Sheets／Docs | UI 只作查詢與審核，不取代既定報告交付方式。 |
不建議的做法
- 不要在同一個前端頁面混用 shadcn/ui 與 Ant Design，避免元件、間距、主題與互動行為互相衝突。
- 若未來同時需要兩者，應切成「公開產品」與「內部後台」兩個前端，僅共用 API 與設計 token。
- 不要把 Crawl4AI 的自動擷取結果直接當成醫療或正式價格資料；必須保留證據並經人工審核。
- 不要為了追逐框架而改寫穩定的靜態網站；新需求再採用合適的工具。
官方來源與版本
版本會持續更新，實際導入前仍以各專案官方 release note 與文件為準。