01
设计气质 DNA
精准高端极简温度清晰
一个高端硬件工作室,以 Apple 般的清晰与温度,展示尖端科技。
02
色彩
#FFDB01Accent#000000Ink#FAFAFABG#959595Mutedrgba(0,0,0,0.1)Line以纯净的白色和黑色为基底,搭配单一的亮黄色强调色,形成高对比度。
03
字体
- display
56px · 500 - h1
40px · 500 - body
16px · 400
标题使用紧凑的负字距。 · 导航项尺寸较小,采用大写或混合大小写形式。 · 品牌标识在某些区域会放大呈现。
04
间距
4px8px16px24px32px48px64px96px充足的 padding 和垂直间距,营造出通透、高端的布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 20px
pill · 9999px
1px solid rgba(0,0,0,0.1)
rgba(0, 0, 0, 0.05) 0px 10px 30px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
非对称布局,以大幅生活方式摄影平衡简洁的产品网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
UI 状态变化采用平滑过渡(0.2s)。 · 布局切换采用更缓慢、更具戏剧性的显现动画(0.8s)。 · 可展开区域使用变换和高度动画。
细微的颜色和背景变化,配合平滑的缓动效果。 · 状态立即改变,使用标准指针光标。
08
组件
- button 高对比度的药丸形按钮(黄色配黑色文字),或透明底色配细微边框。
- card 简洁的产品卡片,边框极少,留白充足。
- chip 不适用
- input 简单的通讯订阅输入框,配以箭头图标。
- hero 全出血的生活方式摄影,配以醒目、左对齐的排版。
09
文案语气与禁用清单
- 语气 自信、极简且高端。
- 标题风格 简短、有力且聚焦产品(例如,'首款为笔记本电脑设计的网络摄像头。')。
- 按钮文案 直接且带有交易性质(例如,'现已开售,售价 $99。')。
- 避免使用多种强调色——截图显示只有一种主导的黄色。
- 避免使用复杂的渐变——截图显示为纯色和摄影图像。
- 避免使用带重度阴影的圆角卡片——截图使用的是细微边框。
- 避免使用装饰性手写体或衬线字体——截图使用的是简洁的几何无衬线字体。
- 避免在布局中堆积过多元素——截图显示有充足的留白。
- 避免使用鲜艳的霓虹色——截图使用的是克制的黑、白、黄配色。
- 避免: 过度的技术术语
- 避免: 杂乱的布局
- 避免: 过多的装饰元素
10
包内真实截图
11
System Prompt
设计一个高端硬件产品网站,专注于清晰的排版、充足的留白和高质量的摄影。使用极简的黑色 (#000000)、白色 (#FAFAFA) 和单一的亮黄色强调色 (#FFDB01) 配色方案。字体使用几何无衬线字体 (Roobert),标题采用紧凑的字距。布局应通透,包含大幅生活方式图片和清晰的产品照片。关键禁忌:不要使用多种强调色,避免复杂的渐变,并通过避免装饰元素或杂乱的布局来保持严格的极简主义。






