查得到，拿得走

體驗設計科 AI 工具、Skill 與知識的集中查詢站

快速入口

AI Host

Claude / Gemini / Antigravity

Skills

瀏覽與收藏團隊精選 Skill

MCP

Figma / Google / 更多

KM Post

Fintech 趨勢與學習資源

Office AI Agent

自動化流程與 Bot

最近新增 Skill
查看全部
AI Host 工具指南

模型選擇指南

Sonnet / Opus / Haiku 各自適合什麼？

基礎工具與功能

Connectors / Projects / Research Mode

進階工具介紹

Skills / Cowork / Plugins / Claude Code

多數日常任務

Sonnet — 日常主力夥伴

快速、能幹、CP 值高。寫作、分析、整理資料、發想創意、日常任務，大部分的對話都應該在這裡發生。

複雜任務

Opus — 深度思考者

Claude 最強智能模型。財務分析、長篇研究、複雜程式碼、複雜任務。可搭配 Extended Thinking 使用，觀察它的推理過程。

速度較慢、額度消耗多，簡單問題可先用其他兩者
簡單任務

Haiku — 速度型選手

快速、輕量、免費可用。適合快速查詢、簡單分類、輕量編輯。

內容參考整理自 @ZHUSTUDIO / AI Edge on X

建議優先設定

Connectors — 讓 Claude 連接你常用的工具

連上 Notion、Slack、Google Calendar 等，不需要另外打開其他視窗，在對話裡就能查行程、找文件、發訊息。

Customize → Connectors
建議優先設定

Projects — 你在 Claude 裡的專屬工作室

把相關的檔案、文件、背景資料都上傳進去，且只需設定一次，不論之後開多少對話，全部都共享同一個背景脈絡。

左側導覽列 → Projects
需 Pro 方案或以上

Claude in Chrome — 讓 Claude 住在你的瀏覽器裡

透過擴充功能協助閱讀、整理資訊、撰寫內容，並可與桌面工作流程整合。

Chrome 線上應用程式商店搜尋「Claude」

Custom Styling — 自訂你的寫作風格

選預設風格或把自己的寫作習慣餵給它，每次回覆都會更像你想要的語氣。

主介面 → 對話框左下角選 + 號 → Use Style
需 Pro 方案或以上

Research Mode — 深入研究模式

丟問題給它，它會真的去查資料，去翻幾十個來源、交叉比對、最後給你一份有憑有據的報告。

主介面 → 對話框左下角選 + 號 → Research

Claude App — Claude 的桌面應用程式

要使用 Claude Code、Cowork 這些進階工具，主要透過桌面版應用程式中操作。

安裝說明：support.claude.com

內容參考整理自 @ZHUSTUDIO / AI Edge on X

Claude Skills — 指令和工作流程一次設定

把常用知識、規則、流程整理成可重複使用的能力模組。適合固定語氣、輸出格式、任務步驟與專業背景。

品牌文案風格統一
固定簡報架構
特定產業知識整理
重複性工作流程自動化
Customize → Skills
需 Pro 方案或以上

Cowork Plugins — 角色化自動化

將 Skills、Connectors 與 Sub-agents 整合單一套件，讓 Cowork 能依任務需求展開更完整的操作流程與角色分工。

將多種能力整合成單一插件
涵蓋行銷、法律、財務等領域
開箱即用
已內建多個可直接使用
桌面版 Claude 應用程式 → Customize → Plugins
需 Pro 方案或以上

Claude Cowork — 最接近「AI 自動幫你做事」的功能

在背景執行、自主存取檔案、排程任務，你只需要設定好，剩下交給它。

背景自主執行任務
建立與管理 Plugins
排程工作流程
支援複雜多步驟任務
桌面版 Claude 應用程式 → Cowork
需 Pro 方案或以上

Claude Code — 最強 AI 程式開發工具

從補全到建構，寫程式、建網站、除錯，整個開發流程都能處理。

寫程式、建網站
理解整個專案結構
除錯與錯誤處理
支援多種語言與框架
桌面版 Claude 應用程式 → Claude Code

內容參考整理自 @ZHUSTUDIO / AI Edge on X

CLI 安裝與設定

安裝 Claude Code、CLAUDE.md 設定檔

Vibe Coding 工作流

用自然語言驅動程式碼產出的完整流程

搭配 Figma MCP

設計稿轉前端的關鍵連接與常見問題

安裝 Claude Code
# 安裝（需要 Node.js 18+） npm install -g @anthropic-ai/claude-code # 確認安裝成功 claude --version # 首次使用，登入 Anthropic 帳號 claude
CLAUDE.md — 專案設定檔

在專案根目錄放一個 CLAUDE.md，Claude Code 每次啟動時自動讀取，等於幫專案設定好背景脈絡。

# CLAUDE.md 範例 專案：玉山銀行信貸購車活動頁 技術：HTML + CSS + jQuery 設計稿：Figma 連結（透過 Figma MCP 讀取） 規範： - 使用 BEM 命名 - Mobile First 響應式 - 主色 #86A697 - 繁體中文，台灣用語
常用 Slash Commands
/init 初始化 CLAUDE.md
/clear 清除對話紀錄
/compact 壓縮對話記憶
/cost 查看目前用量
/doctor 診斷連線問題
/plugin 管理插件

所謂 Vibe Coding，就是用自然語言描述你想要的東西，讓 AI 幫你寫程式碼。以下是設計師的典型流程：

# Step 1: 進入專案資料夾 cd ~/projects/loan-landing-page # Step 2: 啟動 Claude Code claude # Step 3: 用自然語言描述需求 > 請讀取 Figma 連結裡的 page3 frame， 轉換成 HTML + CSS 頁面， 使用 jQuery 做 tab 切換， 圖片先用 placeholder。 # Step 4: Claude 會自動建立檔案、寫程式碼 # Step 5: 開啟瀏覽器預覽，提出修改 > 把標題字體改大一點，按鈕顏色改成 #86A697 # Step 6: 滿意後提交 > 幫我整理程式碼，加上註解

安裝 Figma MCP 後，Claude Code 可以直接讀取 Figma 設計檔案的結構與樣式，是設計轉前端的關鍵連接。

# 在 Claude Code 中直接貼 Figma 連結 > 請讀取這個 Figma 連結 https://www.figma.com/file/xxxxx 把 "Hero Section" frame 轉成 HTML # Claude 會透過 MCP 取得設計資料 # 並產生對應的 HTML + CSS
常見踩坑：如果出現「enterprise plan required」錯誤，通常是環境變數中有衝突的 ANTHROPIC_API_KEY。請先執行 unset ANTHROPIC_API_KEY 再重試。

Gemini

Gemini API 與 Gemini CLI 使用指南 — 即將上線

Antigravity

Antigravity 圖形化 Figma 轉前端工具指南 — 即將上線

MCP

Figma MCP / Google 系列連接器指南 — 即將上線

Office AI Agent

體驗設計金融科技週報

每週五自動產生 Fintech 新聞摘要，以 Adaptive Card 推送至 Teams 頻道
排程觸發
每週五 09:00
Power Automate
HTTP Request
Gemini API
gemini-2.5-flash
JSON 解析
組裝 Card
Teams 頻道
Adaptive Card

Trigger 與流程

Power Automate Recurrence 排程每週五 09:00 觸發。HTTP Action 呼叫 Gemini API，Prompt 限定日期範圍為「上週五到昨天週四」。回傳結果經 Parse JSON 後組裝為 Adaptive Card v1.5 格式，最終透過 Teams Connector 發送至指定頻道。

功能效益

團隊不需手動追蹤 Fintech 新聞。每週自動精選 3 則摘要，每則 20 字以內，附原始連結。直接在 Teams 內閱讀，降低資訊蒐集時間，讓設計師聚焦在洞察與策略層面。

技術難點

Gemini API 回應時間不穩定，需將 Power Automate timeout 設為 120 秒。免費額度有限，需監控 Quota。Adaptive Card 必須使用 v1.5（非最新版），且不能使用 Badge 元素，改用 styled TextBlock 呈現標籤。

問卷資料自動 QA Bot

上傳問卷 CSV 後自動執行四階段品質檢核，產出異常報告推送至 Teams
檔案上傳
Teams / SharePoint
結構檢查
欄位驗證
AI 分析
異常偵測
邏輯矛盾
一致性檢查
QA 報告
Teams 通知

Trigger 與流程

當 SharePoint 指定資料夾收到新 CSV 檔案時自動觸發。Power Automate 依序執行四個階段：結構檢查（欄位完整性、資料型態）、異常值偵測（統計離群值、填答時間）、邏輯矛盾（跳題驗證、前後一致性）、開放題分類（AI 主題編碼）。

功能效益

過去手動 QA 一份 500 筆問卷需要 2–3 小時，現在上傳後 5 分鐘內自動完成。異常資料會自動標記並產出結構化報告，研究員可直接進入分析階段，大幅縮短從資料蒐集到洞察的週期。

技術難點

大量開放題文字容易超過 API token 限制，需分批處理。中文斷詞影響主題分類精準度。SharePoint 檔案觸發有時延遲，需加入重試機制。多語系問卷（中英混合）需要額外的語言偵測邏輯。

競品數位體驗監測

定期截圖比較競品行動銀行 App 的功能更新與 UX 變化，自動產出差異報告
排程觸發
每月 1 / 15 日
網頁截圖
指定頁面
Claude 視覺分析
差異比對
差異報告
SharePoint

Trigger 與流程

每月 1 日與 15 日排程觸發。自動對指定的競品網頁（行動銀行首頁、信用卡申辦頁、貸款試算頁等）進行截圖，與上次截圖進行 AI 視覺分析比對，識別功能新增、UI 改版、資訊架構調整等變化。

功能效益

以往競品追蹤仰賴人工定期查看，容易遺漏。自動監測確保不錯過競品的重要更新，差異報告直接提供設計決策參考，幫助團隊即時調整產品策略。

技術難點

部分競品頁面需要登入或有反爬蟲機制，截圖穩定性是挑戰。AI 視覺比對需區分「有意義的改版」與「廣告輪播等正常變動」。截圖檔案較大，需考慮 SharePoint 儲存空間規劃。