CuteA UI PreviewHeroUI base · v0.60 Mobile-first PWA
Five-page mockup

先讓對話
變得更簡單。

不延續既有視覺，只保留功能 wireframe。第一版用 HeroUI 的中性色、語意化元件與清楚狀態，建立之後可快速調整的基礎。

五個主要頁面 手機優先 可操作 mockup
本週還有 3,000 點
今天

嗨，我是 CuteA。今天想一起看看貓咪的什麼狀況？

剛剛

你可以這樣問

AI 建議不取代獸醫診斷；緊急狀況請直接就醫。

01 · Foundations

最小可調整基礎

所有視覺值集中在 tokens。之後要換品牌色、圓角或字級，不必重畫整個 mockup。

Color

深色 Ink 建立資訊層級；Yellow、Lime、Sky 的 600／100 分別標示 AI、找專家與客服模式。

AI avatar AI reply Expert avatar Expert reply Support avatar Support reply App canvas Control Ink

Typography

目前使用 10 個字級 token。產品與 UI Kit 都從這組 Type Scale 取值。

--text-2xs10px · 0.625rem
微型標籤Product Badge only
--text-xs12px · 0.75rem
輔助資訊Metadata、Badge、Bottom Tabs
--text-sm14px · 0.875rem
主要介面文字訊息、按鈕、輸入框、商品卡
--text-status15px · 0.9375rem
9:41iPhone Status Bar time only
--text-md16px · 1rem
一般內文文件內文、UI Kit 卡片標題
--text-lg18px · 1.125rem
內容小標題商城區段標題、大型控制圖示
--text-xl20px · 1.25rem
Banner 標題主題 Banner、Header icon
--text-2xl24px · 1.5rem
UI Kit 章節文件主要區段標題
--text-3xl32px · 2rem
商城App 頁面大標題
--text-display36–68px · fluid
展示桌面 UI Kit Hero，不用於手機產品內容

Shape & Control sizes

圓角表達造型；四種控制高度表達操作層級。

Small Large · 16px XL · 24px Pill

Control size tokens

--control-size-xs24px · Inline clear
--control-size-sm36px · Chip / Product add
--control-size-md40px · Segment / Filter / Banner CTA
--control-size-lg44px · Button / Icon button

Color Palette

列出目前 App 定義的所有基礎色彩，以及產品元件實際使用的語意顏色。

66 color tokens

Primitives

25

Semantic colors

41
02 · Components

目前頁面用到的元件

收錄五個主要頁面目前真正使用的模式；新增頁面時，再把可重複使用的元件加入這裡。

Actions

Filled 沒有邊框；只有透明的 Outline 使用邊框。手機產品不提供 Hover 狀態。

Capsule controls & navigation

Segmented Control 保留實色底且不使用陰影；Bottom Tabs 使用 20% 玻璃表面，active pill 維持 94%，上下 Scrim 使用 35% 暖色覆蓋與 4px blur。

Conversation

使用相同訊息結構處理 AI、使用者與 loading 狀態。

我會先問幾個簡單問題。

好，請開始。

Attachment Popover

由 Message Composer 的「＋」向上展開；使用 Untitled UI 圖示，提供拍照、相簿與檔案三個入口。

Commerce discovery

搜尋與分類共用 20 個模擬商品；分類與商品加入按鈕使用中性控制表面，把 Primary 黃色保留給真正的重點動作。

新品

舒穩安體驗包

NT$680

Knowledge article & tool cards

文章卡以分類、標題、摘要與閱讀時間協助掃讀；互動工具用較明確的圖示表面與動作文字區分操作型內容。

Service provider card

單欄、無框線與無陰影；用服務標籤、地區、可預約狀態、評價與起始價格協助快速比較。

到府保母 行為諮詢 到府美容 空間設計

林晴晴

身分已驗證
本週可預約
到府保母到府美容

台北市 · 大安／信義

熟悉多貓家庭與老貓照護，每次服務都會提供照片與文字紀錄。

4.9（38）NT$650 起

Account summary & grouped list

帳號首頁先顯示身分、同步狀態與核心入口；次要設定使用分組列表，避免把每個工具展開成首頁卡片。

iPhone safe areas

系統狀態列與 Home Indicator 保留固定安全區，產品 Header、導航與輸入區不侵入系統操作範圍。

Safe content area