Asgard AI · Enterprise AI Platform

一套暗色技術簡報的設計系統

deck-kit 是 asgard-slides mono-repo 共用的 React 簡報元件庫 —— 暖炭黑底、單一 ink-blue 識別、kami whisper 極淡陰影。一套 tokens、primitives 與 layouts，驅動所有 deck。

19
Primitives
17
Layouts
1
Theme · dark-only
Space Grotesk
Variable typeface

暖炭黑，無冷色

底色 #141413 暖炭黑，介面全程無純黑、無冷灰，維持 kami 紙感的沉穩。

單一 ink-blue 識別

品牌色 #2D5A8A 一色到底；功能色（綠/琥珀/赭紅）刻意去飽和，不搶主色。

Kami whisper 陰影

只用 0 4px 24px / .28 的極淡陰影，不用硬投影、不用 glow，邊界靠 1px hairline。

Foundations / Token

Color

所有顏色都是 :root 的 CSS 變數，定義於 theme/tokens.css。點任一色票即可複製其 var() 名稱。

Base — 暖炭黑骨架
bg#141413--bg
bg2#1a1a17--bg2
ink#f5f4ed--ink
muted#b8b5ab--muted
line#f5f4ed · 10%--line
Surfaces — 卡片與面板
card#1f1f1d--card
panel#f5f4ed · 3.5%--panel
panel2#f5f4ed · 6%--panel2
Brand — 單一 ink-blue 識別
brand#2D5A8A--brand
brand-bright#7ba3cf--brand-bright
brand-on-dark#9ec1e6--brand-on-dark
cyan2 · links#9ec1e6--cyan2
brand-tint#2D5A8A · 18%--brand-tint
Functional — 去飽和的語意色
green · good#6f9c6e--green / --good
amber · warn#c9a24b--amber / --warn
rose · bad#c47a72--rose / --bad
purple#8c84a8--purple
pink#b08aa0--pink
Paper — kami parchment 反相基底
paper#f5f4ed--paper
paper-ink#141413--paper-ink
Foundations / Token

Typography

單一字族 Space Grotesk（variable，自帶 woff2），中文 fallback 至 Noto Sans TC / PingFang TC。標題很重（800–860）、字級大、字距收緊。

h1clamp 44–70px
weight 860
line 1.06
從會聊天的 AI，到能交辦工作的 Agent
h2clamp 30–45px
weight 820
line 1.06
Agent 系統的六層技術架構
h321px
weight 780
line 1.16
不是學一堆術語，而是把 AI 變成夥伴
lead22px
weight 520
muted
先建立 AI Chat / AI Agent / 六層架構的共同語言，再拆 MCP、Skill、Sandbox、Plugin。
body16px
weight 400
line 1.5
六層分離讓模型、工具、runtime、執行環境、狀態儲存與治理政策可以各自演進；這也是 agent 從 demo 走向 production 的基本拆分。
kicker14px · 760
uppercase
0.08em
AI Agent Work Method
monosystem mono
labels / code
pnpm -F asgard-ai-agent-workshop dev
Foundations / Token

Spacing · Radius · Shadow

圓角是系統的個性所在：小元件 6–10px，卡片 14–18px，slide / diagram 容器 22–24px，pill 用 999px。陰影只有一階。

Radius scale
xs6px · tags, items
sm8px · buttons, code
md10px · matrix, credential
lg14px · talkbox, termrow
xl18px · card
2xl24px · SlideShell
pill999px · kicker, state
Shadow & hairline
--shadow 0 4px 24px rgba(0,0,0,.28)
hairline1px solid --line
panel filltranslucent --panel
Components / 19

Primitives

最小可組合的 building blocks。全部從 deck-kit barrel 匯入，承接 token，不自帶顏色。

SlideShell<SlideShell>

每張投影片的外框：16:9、圓角 24、極淡陰影、右下角頁碼。詳見 §Example slide。

Six-Layer Stack

Agent 系統的六層技術架構

模型、工具、runtime、執行、狀態、治理 —— 六層分離，各自演進。

07 / 101
Kicker<Kicker>

大寫 eyebrow pill，可加 layer 後綴標示架構層。

AI Agent Work MethodTool Layer
Tag<Tag>

mono 小標籤，brand-tint 底。

TodayMCPstdioA2A
Card<Card>variant="strong"

基礎卡片，頂端有一條漸層 hairline。strong 加深底色與品牌邊框。

Today

不是學一堆術語

而是知道怎麼把 AI 從聊天工具，變成可以被委派工作的夥伴。

Outcome

你會帶走一套路線圖

知道什麼時候用 chat、什麼時候需要 agent，以及工具如何接入。

Quote<Quote>

大字引言，左側品牌色粗邊。compact 較小。

把 AI 從聊天工具，變成可以被委派工作的夥伴。
Talkbox<Talkbox>

補充講解框，可帶大寫 label。

講者補充

六層分離讓模型、工具、runtime 與治理政策各自演進，是 agent 從 demo 走向 production 的基本拆分。

Metric<Metric>

數值 + 標籤，tabular-nums。

99.2%任務成功率1.8s平均延遲
Node<Node>

流程圖節點：標題 + 說明，FlowDiagram 的單元。

HarnessPlan · Route · Retry runtime
Credential<Credential>

左側品牌色細邊的引述 / 憑證行。

前 Google Cloud 架構師 · 帶過 30+ 企業導入生成式 AI 落地專案。
DashList<DashList>

破折號項目列表。

  • 模型理解與生成
  • 工具呼叫與 MCP 介面
  • 沙箱化執行與隔離
ValueAnchors<ValueAnchors>

標題 + 描述的分隔清單。

  • 可委派把任務交辦給 agent，而非逐步操作。
  • 可治理身分、審批、軌跡三問可回答。
  • 可落地從 demo 到 production 的清晰路徑。
ModuleBlock<ModuleBlock>

編號模組標頭 + 內文。

A
Tool Use 基礎
Module · 12 min
從 function calling 到 MCP，建立工具呼叫的共同語言。
ModuleNote<ModuleNote>

小型註記塊，mono label。

Note
stdio server 適合本機工具；遠端能力改用 HTTP server。
PricingCard<PricingCard>

eyebrow + 幣別 + 金額 + 單位 + 註。

Enterprise
$0.02/ 1K tokens
含治理、審計與 SSO，年約。
CodeBlock<CodeBlock>

inline 程式碼塊，pre-wrap。

$ pnpm -F asgard-ai-agent-workshop dev # → http://localhost:5173
CodeCard<CodeCard numbered>

可帶行號的程式碼卡。

1
2
3
4
{
  "mcpServers": {
    "fs": { "command": "npx", "args": ["-y","@mcp/fs"] }
  }
}
ProductCard<ProductCard>

Asgard 產品卡，每個產品有專屬 accent（Odin/Mimir/Sindri/Heimdall/Yggdrasil/Asgard）。

Odin

Odin

Orchestration

多 agent 編排與路由。

Heimdall

Heimdall

Governance

身分、審批與軌跡治理。

Yggdrasil

Yggdrasil

Runtime

沙箱化執行底座。

DemoShot<DemoShot>

示範截圖，框線 + 圓角 + 極淡陰影，可帶說明。多種尺寸變體。

MCP live query demo
Demo 1 · MCP server 即時查詢 CRM 資料
Components / 17

Layouts

把 primitives 組成整版圖解 —— 技術簡報常見的堆疊、流程、矩陣、時間軸、狀態機與泳道。

LayerStack<LayerStack>

分層堆疊：每層一個 mono 標籤 + 一排 chips（或註解）。本 deck 的招牌六層架構。

Governance
IdentityApprovalTrace
Session
EventsCheckpointRecovery
Sandbox
FilesystemCommandsIsolation
Harness
PlanRouteRetry
Tools / MCP
CRMERPDB / API
Model
UnderstandInferGenerate
FlowDiagram<FlowDiagram>+ Diagram frame

水平流程：Node 之間以琥珀色箭頭串接，外層用 Diagram 邊框（頂端漸層 hairline）。

User下達任務
→
Harness規劃與路由
→
Tools / MCP呼叫外部系統
→
Result交付成果
Steps<Steps>

六格等寬步驟，編號用琥珀 mono。

01建立共同語言
02拆解 MCP
03設計 Skill
04沙箱執行
05打包 Plugin
06治理上線
TwoColumn · CardGrid<TwoColumn><CardGrid cols>

通用分欄。TwoColumn 支援 1:1 / 2:1 / 1:2；CardGrid 提供 2/3/4 欄網格。

Chat

單輪問答，使用者主導每一步。

Agent

可委派的多步任務：自行規劃、呼叫工具、檢查結果並重試，直到達成目標。

Matrix<Matrix>

比較矩陣，表頭品牌底色、儲存格 panel 底。

面向MCPCLI
介面結構化 tool schema文字參數
憑證邊界由 host 注入繼承 shell 環境
適用需治理的企業整合快速腳本與本機任務
Table<Table>financial · striped

資料表，支援數字右對齊、斑馬紋，以及 data-total / data-highlight 列。

方案席次月費
Starter5$0
Team25$480
Enterprise無限洽談
年度合計—$5,760
GlanceGrid<GlanceGrid>

關鍵數據速覽，左側品牌色細邊。

Task Success
99.2%
三檔 demo 平均完成率
Median Latency
1.8s
含工具呼叫往返
Cost / Task
$0.04
以企業均價估算
Adoption
30+
導入中的企業團隊
Timeline<Timeline>

水平里程碑，圓點 + 標籤 + 標題 + 註。

Q1
建立共同語言
Chat / Agent / 六層
Q2
工具與 MCP
接入第一個系統
Q3
沙箱與治理
身分 / 審批 / 軌跡
Q4
Production 上線
三檔 demo 落地
StateMachine<StateMachine>

狀態 pill + 轉移箭頭（可標事件）+ 回圈標記。

Plan
→tool call
Act
→observe
Reflect
↺ until goal met
Funnel<Funnel>

漏斗 / 比例條，品牌色填充 + 百分比。

試用
1,200
100%
接入工具
768
64%
上線治理
456
38%
擴大採用
252
21%
Swimlane<Swimlane>

角色 × 階段的泳道矩陣。

Plan
Execute
Govern
User
下達任務目標
審批高風險動作
Agent
拆解步驟
呼叫工具並重試
寫入軌跡
Tree<Tree>

遞迴階層樹。

  • Asgard Platform
    • Odin · Orchestration
    • Heimdall · Governance
    • Yggdrasil · Runtime
      • Sandbox
      • Memory
TermRow<TermRow>

術語 + 定義 + 範例，三欄。

MCP

模型與工具之間的標準介面協定。

例：把 CRM 包成 MCP server
Harness

驅動 agent 規劃與重試的 runtime。

例：Claude Code、Codex
SectionHeader · SectionTitle<SectionHeader><SectionTitle>

章節分隔：SectionHeader 是 eyebrow + 標題 + 分隔線；SectionTitle 是標題 + lead 段。

Chapter 03

Skill 與能力封裝

把能力打包成可載入的 Skill

漸進式揭露：先給路由摘要，命中後才載入完整內容，控制 context 成本。

Components / +9 新增

Extended

對照常見設計系統（Atlassian、Red Hat、shadcn）與簡報版型補上的 9 個高頻元件。全部沿用既有 token 的語意色（--good / --warn / --bad / --brand-on-dark），未新增任何顏色。

Callout<Callout variant>

語意提示框：info / good / warn / bad，左側 accent 邊 + tint 底 + 圖示。比 Talkbox 多了狀態色。

i
提示

遠端能力建議用 HTTP MCP server，本機工具用 stdio。

✓
通過

三檔 demo 任務成功率達 99.2%，可進入治理上線。

!
注意

高風險動作須經人工審批，並寫入軌跡。

✕
禁止

切勿讓 agent 繼承 shell 環境憑證跨越邊界。

Badge<Badge status>

語意狀態 pill，含狀態圓點。Tag 之外的「狀態」表達。

ProductionBetaPreviewDeprecatedDraft
Avatar · Persona<Persona><Facepile>

頭像 + 姓名 + 角色；圖片或縮寫。Facepile 疊放群組。

WJ Wang
WJ Wang
Platform Architect · Asgard AI
ODHMYG+6
BigStat<BigStat>

單一巨型 KPI 數字 + 標籤 + 漲跌。

99.2%
Task Success Rate
▲ 6.4% vs. baseline
ProgressRing<ProgressRing pct>

環形百分比（conic-gradient + mask 甜甜圈）。

72%
99%
38%
Checklist<Checklist>

✓ / ✕ 語意清單，用於 production checklist。

  • 身分鏈與審批流已接好
  • 所有工具呼叫寫入軌跡
  • 沙箱隔離檔案系統與指令
  • 尚未設定成本上限與告警
Legend<Legend>

圖表 / 圖解的色彩圖例。

Model Tools Harness Governance
Quote · attributed<Quote cite>

Quote 加上 Persona 署名 —— 引言頁的標準寫法。

把 AI 從會聊天的工具，變成能交辦工作、可被治理的數位同事。
WJ Wang
WJ Wang
Platform Architect · Asgard AI
Agenda<Agenda>

編號議程 / 目錄，可帶時間與「進行中 / 已完成」狀態。

01
建立共同語言
Chat / Agent / 六層架構
10 min
02
拆解 MCP 與工具接入
stdio · HTTP · 憑證邊界
15 min
03
Skill · Sandbox · Plugin
能力封裝與沙箱執行
20 min
04
治理與落地
身分 / 審批 / 軌跡 · 三檔 demo
15 min
Compare<Compare>

優劣 / 取捨雙欄，綠加號 vs. 紅減號。

MCP 建議
  • 結構化 tool schema，易治理
  • 憑證由 host 注入，邊界清楚
  • 適合企業系統整合
CLI 謹慎
  • 繼承 shell 環境，邊界模糊
  • 純文字參數，難結構化驗證
  • 僅適合本機快速腳本
In context

Example slide

把 token、primitive 與 layout 組成一張真實的 16:9 投影片 —— 即 deck 中的「六層架構」頁。

Six-Layer Stack

Agent 系統的六層技術架構

Governance
IdentityApprovalTrace
Session / Memory
EventsCheckpointRecovery
Sandbox
FilesystemCommandsIsolation
Harness
PlanRouteRetry
Tools / MCP
CRMERPDB / API
Model
UnderstandInferGenerate

六層分離讓模型、工具、runtime、執行環境、狀態儲存與治理政策可以各自演進；這也是 agent 從 demo 走向 production 的基本拆分。

07 / 101
In context

Shell behaviour

外殼 Deck.tsx 負責所有 deck 共用的導覽行為；投影片只管內容。

橫向 carousel

所有投影片在一條 translateX 軌道並排；垂直捲動由 .slot 容器擁有，不要在 slide 上加 overflow-y。

觸控手勢

方向狀態機 + 8px dead zone：手勢確定為水平前不動 drag state，垂直捲動不會誤觸換頁。

←→Space

鍵盤導覽

左右鍵 / 空白鍵換頁；hash 深層連結讓每頁可被直接分享。

Overview mode

刻意只渲染文字卡片（編號 + section + 標題 + 主題色），避免行動裝置渲染上百張真實投影片崩潰。

章節分組

選用的 chapters.ts 傳入 DeckProvider，在 overview 依章節分群；startSlide 為 1-indexed。

SSR-safe · 匯出

所有 window 存取都在 effect / handler 內，parseHash 與 discoverSlides 為純函式。支援 Playwright 驅動的 PDF / ZIP 匯出。