dot agents

純黑白為底,
多邊形漸變作為唯一的色彩語言。

主色只有黑、白、灰階;六個輔色僅用於分類,不代表語意;彩色多邊形專屬於 AI。切換右上角主題查看亮暗雙模式。

玫瑰
杏橙
苔綠
湖藍
藕紫
青瓷
AI

色彩 Color

灰階是介面的全部骨架。輔色只作分類與裝飾:紅色標籤不等於錯誤,錯誤一律用主色的重量呈現。

灰階 Grayscale,亮暗主題共用同一組實體值

ffffff
f5f5f6
e8e8eb
d6d6dc
b9b9c0
9a9aa3
7c7c86
5c5c66
3f3f46
26262c
121215
0a0a0a

輔色六色 僅作分類使用,每色以確定性多邊形漸變呈現

玫瑰 Rosehsl(350 52% 66%)
杏橙 Amberhsl(32 58% 64%)
苔綠 Sagehsl(130 32% 62%)
湖藍 Skyhsl(212 52% 66%)
藕紫 Lilachsl(268 40% 68%)
青瓷 Tealhsl(176 40% 60%)

語意色 Error 與 Warning 僅用於按鈕等關鍵控件表面

Error 純紅#E5484D,只出現在破壞性操作的表面
Warning 純黃#F0C419,只出現在需要留意的操作表面
錯誤訊息用主色行內錯誤以黑/白的重量表達,不依賴紅色

多邊形漸變 Polygon Mesh

每個色塊由固定 seed 生成:同一個 seed 每次渲染的三角形分佈完全相同,介面不會「每次刷新長得不一樣」。

確定性驗證 下面三塊使用同一個 seed,像素級一致

seed = 7
seed = 7
seed = 7

調整 seed 換一個 seed 就是另一張確定的圖

seed = 42
42
AI 彩色版:
rainbow,同 seed

按鈕 Buttons

表面是純黑或純白的圓角無邊按鈕,右下方以多邊形漸變充當立體陰影。懸停會抬起,按下會壓回陰影上。

變體與狀態 hover 與 active 欄為固定展示,實際互動請操作第一欄

defaulthoveractivedisabled主要次要文字破壞性警示AI

尺寸 32 / 40 / 48

圖示與載入 輔色可依情境替換

表單控件 Form Controls

全部為自訂控件,不使用原生外觀。焦點以主色描邊 + 柔和光圈表示;錯誤訊息用主色重量與圖示表達。

文字輸入

2 到 20 個字,支援中英文。
!「acme」已被使用,換一個試試。

選擇與開關

  • Claude Fable 5
  • Claude Sonnet 5
  • GPT-5.2
  • 本地模型(Ollama)
推播通知每週摘要
50

多行輸入

膠囊與徽章 Chips & Badges

膠囊一律不換行:容器太窄時整顆換到下一行,絕不讓兩個字被拆成一字一行。

分類膠囊 六個輔色,前綴小多邊形

客服行銷企劃營運數據分析研發財務

窄容器行為驗證(寬 210px):

數據分析客服行銷企劃

狀態徽章 狀態一律用主色,不佔用輔色

執行中待命已暫停已完成
收件匣 8待審核 120

卡片與說明 Cards & Tooltip

可點擊的卡片懸停時抬起;純圖形講不清楚的地方,一律補問號提示。

產品手冊

34 個頁面,上次由「小映」更新於昨天 18:42。

開啟空間

週營運 Dashboard

每次開啟自動抓取最新訂單與客服數據。

開啟空間

權限說明

靜態卡片不抬起,僅承載資訊。需要補充說明時,在標題旁放問號提示,懸停即顯示。

表格 Table

數字用等寬字對齊;每個 Agent 的頭像就是它專屬 seed 的多邊形,天生不重複。

Agent分類狀態今日對話記憶用量
小映客服前台
客服執行中12862%
阿澄數據助理
數據分析待命3441%
Muji排程管家
營運已暫停018%
小蕎行銷企劃
研發執行中7655%

回饋與 AI 過程 Feedback & AI Activity

AI 執行任務時,工具調用與進度以白話呈現;彩色多邊形只在 AI 工作時出現。

小映 正在幫你整理按下「開始示範」觀看執行過程
  • 讀取「產品規劃」頁面的 12 個板塊
  • 把散落的想法整理成待辦清單
  • 建立「本週進度」圖表板塊
  • 寫一份摘要留言通知團隊
0%

通知 Toast 點按觸發,右下角出現

載入佔位 Skeleton

進度條 一般用主色,AI 任務用彩色多邊形

字體排印 Typography

系統字體堆疊,中英文混排原生順暢;數據一律等寬對齊。

Display · 28 / 800讓 Agent 像同事一樣工作
Heading · 21 / 750檔案空間 File Spaces
Title · 16.5 / 700記憶目錄 Memory directory
Body · 14.5 / 1.7你在 LINE 上聊到一半的事,回到網頁它還記得。Agent 的記憶就是一個看得見的檔案目錄,你隨時可以打開來看它記了什麼、改了什麼。
Caption · 13上次更新:昨天 18:42,由小映自動整理。
Data · mono1,024 tokens / 98.4% / 06:42:19