精選 · 開放 · 免費

Wandelmaier

為產品設計策略師打造的精緻、高對比度作品集

PortfolioTypographyCleanStudioRefined

Wandelmaier 網站截圖

↓ 下載設計系統包 (65 MB)在 OpenDesign 中開啟

原站: http://wandelmaier.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

專業以人為本策略性創意

極簡建築事務所的作品集

02

色彩

#FFFFFFInk

#191816BG

#A9A9A9Muted

rgba(255, 255, 255, 0.1)Line

採用低飽和中性文字色的高對比深色主題

03

字型

transitional-serif · humanist-sans

display187px · 300
heading50px · 300
body24px · 300
caption16px · 300

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 32px 為基準的寬鬆垂直節奏

05

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

sm · 4px

md · 48px

lg · 72px

pill · 9999px

大多數元素無可見邊框

06

版面

1440container

12columns

32pxgutter

768 / 1024breakpoints

大型置中內容區塊，搭配充足留白

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

互動元素上有細微的背景色轉換效果 · 即時的視覺反饋

08

組件

button 膠囊形或大型圓角矩形，採用實色填充
card 以圖片為主的專案卡片，下方配有簡潔文字描述
chip 不適用
input 不適用
hero 以巨大排版為主的首屏區域，疊加彩色形狀

09

文案語氣與禁用清單

語氣專業、簡潔、直接
標題風格 小寫、極簡且高度風格化
按鈕文案 簡潔的文字或圖標式行動呼籲

避免使用多種相互競爭的強調色——截圖顯示了三種獨特、大膽的強調形狀，它們被謹慎使用，且永不同時作為介面元素出現。
避免將所有文字內容置中——截圖顯示了清晰的左對齊內文與描述。
避免使用複雜的卡片邊框或陰影——截圖顯示了平面、無邊框的圖片卡片。
避免使用小而緊湊的字體——截圖顯示了極大、舒展的展示型字體。
避免使用淺色主題——截圖顯示了統一、深沉的深色背景。
避免標題使用大寫字母——截圖顯示主首屏文字採用小寫。
避免: 過多術語
避免: 雜亂的版面
避免: 模糊的描述

10

包內真實截圖

Wandelmaier — 桌面首屏（hero） — 桌面首屏（hero）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Wandelmaier — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個產品設計策略師的個人作品集。定位專業、精緻，專注於高端工藝。關鍵色彩為深沉溫暖的近黑色背景（#191816），搭配純淨白色文字（#FFFFFF）與柔和灰色（#A9A9A9）作為次要資訊。色調由三個大膽的實色形狀點綴：鮮綠色（#34A847）、柔粉色（#FBCBCB）與溫暖珊瑚色（#F27851）。字體使用人文無襯線體（PolySans）作為介面字體，以及過渡型襯線體（Canela）作為表現性展示字體，兩者皆採用極輕字重。重要禁忌：避免使用小而密集的文字；避免同時使用多種相互競爭的強調色；避免在卡片上使用厚重陰影或邊框；避免標題使用大寫；避免使用淺色配色方案；避免使用複雜、雜亂的版面。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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