OpenDesign·你的设计资产库

网页参考

Teenage Engineering

为模块化音乐硬件设计的纯粹、高端美学，将工业精密与趣味多彩的点缀相融合。

IndustrialPlayfulPortfolio
Teenage Engineering 网站截图

01

设计气质 DNA

工业趣味作品集音乐硬件

一家极简工业设计工作室，专注于创造高端、如玩具般的音乐乐器。

02

色彩

#f56b2aAccent
#ffffffInk
#e5e5e5Ink soft
#000000BG
#0f0e12BG quiet
#767676Muted
rgba(229,229,229,1.0)Line

以单一高饱和度色彩形成强烈对比。

03

字体

geometric-sans

  • display26px · 300
  • body13px · 300

大部分文本元素使用小写字母 · 保持极细的字体粗细（100-300） · 为较小的文本使用充足的字间距

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

不对称且慷慨，常使用大幅水平内边距（66px）实现全幅布局。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

浅色界面元素使用 1px solid rgba(229,229,229,1.0)；深色模式下则通常无边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

以大量留白衬托居中的产品摄影；导航遵循网格对齐。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬浮时进行平滑的变换过渡（0.2s ease-in）

交互元素进行细微的变换或色彩偏移。 · 直接导航或触发模态窗口。

08

组件

  • button 纯色强调色的矩形，配大写文本。
  • card 极简产品卡片，无可见边框或阴影，完全依赖留白区分。
  • chip 不适用
  • input 不适用
  • hero 以纯黑背景为衬托的大幅、高对比度产品摄影。

09

文案语气与禁用清单

  • 语气 极简、专业、自信。
  • 标题风格 小写字母，细体无衬线字体。
  • 按钮文案 大写字母，纯色强调色。
  • 不要使用粗体排版——截图显示全文采用纤细、轻盈（100-300）的几何无衬线字体
  • 不要使用复杂渐变——截图显示纯色、强烈的黑色背景，色彩极简
  • 不要使用圆润、友好的界面形状——截图显示边缘锐利的矩形产品形态与界面元素
  • 不要使用多种强调色——截图显示单一、主导的橙色（#f56b2a）作为主要强调色
  • 不要使用拥挤、繁杂的布局——截图显示充足的留白，专注于单一产品展示
  • 不要使用传统衬线字体——截图显示纯粹的几何无衬线字体类别
  • 避免: 避免使用粗重字体
  • 避免: 避免使用明亮、多彩的背景
  • 避免: 避免装饰性或手写风格的字体
  • 避免: 避免使用复杂的投影或渐变效果
  • 避免: 避免使用拥挤的布局
  • 避免: 避免过度使用强调色

10

包内真实截图

Teenage Engineering — 桌面首屏（hero）
桌面首屏（hero）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Teenage Engineering — 移动首屏
移动首屏

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

11

System Prompt

这是一个硬件设计工作室的极简高端网站。采用深色模式，纯黑背景（#000000）搭配高对比度的白色/浅灰色文本。字体完全使用几何无衬线体，以极细粗细（100-300）呈现，并常用小写形式。单一的高饱和度橙色（#f56b2a）作为按钮和活动状态的主要强调色。布局宽敞，以大幅产品摄影为焦点。关键禁忌：切勿使用粗体或重字体，切勿使用多种强调色，切勿创建分散硬件注意力的拥挤或繁杂界面。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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