精選 · 開放 · 免費

Knickey

一款以攝影為主導、精緻的包容性內衣電商介面。

ConsumerCleanPhotographicCalmRefined

Knickey 網站截圖

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

原站: https://knickey.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

內衣包容性永續簡約舒適

一本靜謐、精選的型錄，讓產品攝影自然呼吸。

02

色彩

#233735Accent

#241f20Ink

#f5f4eeBG

#8bba78Muted

rgba(36,31,32,1.0)Line

大地中性色與柔和綠色營造出平靜、有機的色盤。

03

字型

didone-serif · humanist-sans

display64px · 400
headline32px · 400
body17px · 400
caption14px · 400

使用 Didone 衬线字体用于主要数字和大号强调文字。 · 使用人文无衬线字体用于所有交互元素和正文。 · 保持无衬线字体元素的一致宽阔字间距。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 4 和 8 的倍數作為一致內距，創造通透的佈局。

05

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

sm · 0px

md · 4px

lg · 0px

pill · 999px

除勾選框輸入外，無可見邊框；模態依賴內距與背景對比。

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

分割佈局，全出血攝影圖圍繞著置中的文字欄位。

07

動效與互動

200msmicro

300mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

模態覆蓋的淡入與縮放進入效果。 · 交互元素的細微變形過渡。

按鈕的細微背景色過渡。 · 透過右上角小型「X」圖示關閉模態。

08

組件

button 實心深色矩形按鈕，白色大寫文字，無邊框半徑。
card 以影像為主、無邊框的卡片，依賴攝影而非容器。
chip 無可見設計。
input 自訂勾選框，圓角設計，柔灰色邊框。
hero 全螢幕或大型模態覆蓋，呈現攝影與置中文字的分割構圖。

09

文案語氣與禁用清單

語氣自信、平靜且 welcoming。
標題風格 簡短、直接、強調價值（例如：「You've Got 15% Off」）。
按鈕文案 清晰、大寫、行動導向（例如：「CLAIM 15% OFF」）。

避免使用厚重投影——截圖顯示為平面、無邊框的表面。
避免使用明亮、高飽和度的強調色——截圖顯示為柔和綠色與深青色。
避免使用 playful 或圓潤的無襯線字體作為展示字體——截圖顯示為銳利的 Didone serif。
避免將長段落置中對齊——截圖僅將文字欄位置中，用於簡短文案。
避免為內容卡片添加不必要的邊框——截圖顯示為無邊框的影像。
避免使用深色模式或高對比主題——截圖顯示為明亮、奶油色的米白背景。
避免: 強迫或急促的語言
避免: 過度隨意或俚語化的表述
避免: 視覺雜亂或嘈雜的背景

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

Knickey — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

This is a refined e-commerce interface for a sustainable underwear brand, characterized by a calm, earthy palette. Key colors include a creamy off-white background (#f5f4ee), dark ink text (#241f20), muted green accents (#8bba78), and a deep teal for primary buttons (#233735). Typography pairs a sharp didone-serif for large display text with a humanist-sans for all body and UI elements. The layout is spacious, often using a split composition with full-bleed photography flanking centered text. Key donts: Do not use bright, neon colors; avoid heavy borders or drop shadows; do not use playful, rounded fonts; avoid busy backgrounds; do not center-align long blocks of text; and avoid aggressive, urgent marketing language.

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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