精選 · 開放 · 免費

Myafterglo

一個精緻、展廊般的私密健康產品電子商務體驗，融合編輯式攝影與簡約介面。

01

設計氣質 DNA

一個策展式的私密健康物件展廊，以高端設計雜誌的克制手法呈現。

02

色彩

溫暖、沉穩的中性色調提供了柔和的畫布，讓豐富的攝影影像成為主角。

03

字型

transitional-serif · humanist-sans

• display132px · 400
• heading50px · 400
• body15px · 400

使用過渡襯線體來呈現大型、富有表現力的標題，以傳達優雅感。 · 使用人文無襯線體於導航與 UI 元素，以確保清晰度。 · 為大寫的展示文字保持充足的字距。

04

間距

寬敞、開放的佈局，在大型攝影元素周圍使用寬裕的間距。

05

表面 (圓角 / 陰影 / 邊線)

輸入框與細微分隔線使用 1px solid rgba(19, 19, 19, 0.15)。

rgb(203, 201, 189) 0px -6.66667px 0px 0px inset

06

版面

全版面主視覺搭配置中的文字覆蓋層，後接一個用於編輯式影像的置中內容欄位。

07

動效與互動

產品輪播的流暢滑入過渡。 · 主視覺區塊文字覆蓋層的細微淡入效果。

互動元素上的細微游標變化 (pointer)；最小的視覺回饋以維持美學。 · 立即回應，搭配流暢的狀態轉換。

08

組件

• button 簡約、有外框的圓角按鈕 (border-radius: 5px)，用於「開始探索」。
• card 乾淨、無邊框的卡片，依賴高品質攝影與充足的留白。
• chip 導航列中基於文字的簡約導航連結。
• input 整合於頂部導航列的極簡搜尋與帳號圖示。
• hero 全螢幕分割影像主視覺，搭配大型、重疊的襯線字體與一個簡單的行動呼籲按鈕。

09

文案語氣與禁用清單

• 語氣 精緻、私密且賦予力量。
• 標題風格 大型、富有表現力的過渡襯線字體，與攝影影像融為一體。
• 按鈕文案 簡約、直接且低調，通常使用有外框的按鈕。

• 不要使用鮮豔的霓虹色彩——截圖顯示的是溫暖的灰色、灰白色與深黑色的沉穩色盤。
• 不要使用深色模式介面——主要背景是溫暖的灰白色 (#f3f2ec)。
• 不要使用生硬的幾何無襯線字體——展示字體是精緻的過渡襯線體。
• 不要使用厚重的投影或粗邊框——介面是平坦的，僅有極簡、細微的內嵌陰影。
• 不要使用間距狹小的雜亂網格——佈局寬敞，區塊之間有充足的留白。
• 不要使用通用的商品攝影——網站採用具有獨特光線的藝術靜物構圖。
• 避免: 大聲、激進的行銷用語
• 避免: 過於技術性或臨床感的描述
• 避免: 佈局雜亂且帶有厚重邊框或陰影

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko