精选 · 开放 · 免费
Stykka
一个用于设计定制厨房和室内空间的高端平台,以大幅摄影头图区域和简洁、衬线主导的排版为特色。
PremiumCleanRefinementEditorialStudio
01
设计气质 DNA
建筑厨房策展工艺极简
一本高端建筑杂志
02
色彩
#000000Ink
#FFFFFFBG
#B8B8B8Muted
rgba(0,0,0,0.1)Line
依赖高质量摄影提供色彩的极简调色板,界面元素严格采用黑白。
03
字体
geometric-sans · humanist-sans · monospace
- display
46px · 500 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
图像周围一致应用 padding 和 gap。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
某些交互元素上使用最小的 1px solid 边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
从边缘到边缘的摄影,带有宽大的留白边距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
滚动时淡入
链接和按钮上的微妙透明度变化。 · 即时状态变化或导航。
08
组件
- button 透明背景,带有微妙边框和纯文本标签。
- card 大型摄影卡片,包含文本的纯色背景。
- chip 带有小型加号或项目符号图标的文本标签。
- input 仅有底部边框的文本输入字段。
- hero 全屏摄影背景,配以大型、左对齐的排版。
09
文案语气与禁用清单
- 语气 专业、令人向往且平静。
- 标题风格 直接且描述性强,使用大型几何无衬线字体。
- 按钮文案 简单、行动导向的文本,例如“开始构建”。
- 不要使用高饱和度的强调色——截图显示的是让位于摄影的单色界面。
- 不要在界面元素上使用投影——截图显示的是完全扁平化设计。
- 不要使用居中对齐的正文——截图显示严格的左对齐。
- 不要使用装饰性花体字作为标题——截图显示的是简洁的几何无衬线字体。
- 不要使用小而密集的文本块——截图显示的是宽大的留白和大字体。
- 不要使用复杂的图标——截图显示的是简单的、基于文本的导航。
- 避免: 花哨的动画
- 避免: 杂乱的布局
- 避免: 高饱和度的界面颜色
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Stykka 是一个用于设计定制厨房的高端平台,其特色是优先展示高质量摄影的简洁、编辑式美学。设计依赖于极简的黑白调色板(#000000 用于墨色,#FFFFFF 用于背景),让产品图像脱颖而出。排版上,标题使用几何无衬线字体,正文使用人文主义无衬线字体,并采用紧凑的字间距。关键的“不要”包括:避免使用高饱和度的界面颜色,避免使用复杂的阴影或渐变,以及避免使用居中对齐的正文。布局宽敞,使用宽大的留白和大型、从边缘到边缘的图像,营造出一种平静而精致的氛围。
en · zh-CN · zh-TW · ja · ko