精选 · 开放 · 免费
Article
一个简洁、以摄影为主的电商平台，专注于现代家具与家居装饰。
furnitureecommerce
01
设计气质 DNA
家具现代生活方式直面消费者
为现代生活策展的精选目录
02
色彩
#FF6458Accent
#2E2E2EInk
#424242Ink soft
#FFFFFFBG
#F2F2F2BG soft
#626262Muted
rgba(46, 46, 46, 1)Line
高对比度的中性底色，搭配摄影图片色彩与醒目的珊瑚色点缀。
03
字体
geometric-sans
- display
48px · 700 - h1
32px · 700 - body
16px · 400 - small
14px · 400
按钮与导航链接使用大写形式 · 标题采用紧凑字距与粗体 · 正文使用常规字重，搭配舒适的行高
04
间距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
统一的 4px 网格，各部分之间留有充足间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 50px
pill · 9999px
1px solid #2E2E2E
rgba(0, 0, 0, 0.08) 0px 4px 8px 0px · rgba(0, 0, 0, 0.04) 0px 16px 16px 0px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽首屏图片后接结构化的产品网格布局。
07
动效与交互
100msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover 时平滑的背景色过渡 · 用于微妙 UI 状态变化的透明度淡入淡出
微妙的颜色变化或下划线出现 · 即时视觉反馈，通常通过颜色转变实现
08
组件
- button 胶囊形，实心白色背景与黑色边框，文字大写。
- card 简洁的图片卡片，下方仅有少量文本，常以水平滚动或网格形式呈现。
- chip 简洁的文字类目链接。
- input 极简搜索栏，包含占位符文本与放大镜图标。
- hero 全出血的生活方式摄影图，叠加居中的文本覆盖层。
09
文案语气与禁用清单
- 语气 乐于助人、激发向往且直接
- 标题风格 有力且侧重利益点
- 按钮文案 清晰、祈使句式且大写
- 勿使用圆角矩形——截图显示为胶囊形按钮。
- 勿使用明亮、冲突的点缀色——截图显示为克制的中性底色搭配单一珊瑚色点缀。
- 勿在卡片上使用复杂阴影——截图显示为极简、扁平的摄影图。
- 勿使用衬线字体——截图显示全部采用无衬线字体。
- 勿使用密集的文本块——截图显示留有充足空白与简短文案。
- 勿为主要布局使用深色背景——截图显示主要为白色与灰白色背景。
- 避免: 过于技术性的术语
- 避免: 咄咄逼人的销售语言
- 避免: 不必要的填充词
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个现代家具品牌的电商设计，专注于大型生活方式摄影与简洁的排版。布局采用白色背景搭配深灰文本 (#2E2E2E) 与醒目的珊瑚色点缀 (#FF6458)。字体属于几何无衬线类别，标题使用粗体，正文使用常规字重。关键限制：避免使用衬线字体，切勿使用圆角矩形作为按钮，并避免使用密集的文本块，以免破坏以摄影为主的布局。设计优先考虑留白与清晰的视觉层次，让产品图像得以突出。
en · zh-CN · zh-TW · ja · ko