OpenDesign·你的设计资产库

网页参考

Stykka

一个用于设计定制厨房和室内空间的高端平台,以大幅摄影头图区域和简洁、衬线主导的排版为特色。

PremiumCleanRefinementEditorialStudio
Stykka 网站截图

01

设计气质 DNA

建筑厨房策展工艺极简

一本高端建筑杂志

02

色彩

#000000Ink
#FFFFFFBG
#B8B8B8Muted
rgba(0,0,0,0.1)Line

依赖高质量摄影提供色彩的极简调色板,界面元素严格采用黑白。

03

字体

geometric-sans · humanist-sans · monospace

  • display46px · 500
  • body16px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Stykka 是一个用于设计定制厨房的高端平台,其特色是优先展示高质量摄影的简洁、编辑式美学。设计依赖于极简的黑白调色板(#000000 用于墨色,#FFFFFF 用于背景),让产品图像脱颖而出。排版上,标题使用几何无衬线字体,正文使用人文主义无衬线字体,并采用紧凑的字间距。关键的“不要”包括:避免使用高饱和度的界面颜色,避免使用复杂的阴影或渐变,以及避免使用居中对齐的正文。布局宽敞,使用宽大的留白和大型、从边缘到边缘的图像,营造出一种平静而精致的氛围。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。