OpenDesign·你的设计资产库

网页参考

14islands

一家极简主义设计机构，通过克制的排版和大胆的摄影来展示高端数字产品与体验。

AgencyWebGL
14islands 网站截图

01

设计气质 DNA

高端极简数字工艺设计驱动

数字产品的高端建筑设计事务所

02

色彩

#070707Ink
#A2A2A9Ink soft
#F2F2F2BG
rgba(7, 7, 7, 1)Line

近乎单色的调色板，依靠极端的排版比例和高饱和度的项目摄影来创造视觉冲击力。

03

字体

geometric-sans · humanist-sans

  • display180px · 400
  • heading100px · 400
  • subhead75px · 400
  • body16px · 400
  • caption12px · 400

04

间距

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

宽松的垂直节奏，主要元素周围留有充裕的内边距。

05

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

sm · 4px
md · 4px
lg · 5px
pill · 999px

无可见边框；依靠间距和图像边缘进行分隔。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称网格，包含全宽主视觉区域和双列项目画廊。

07

动效与交互

200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

hover时的平滑transform过渡 · 滚动时的微妙淡入

光标变为指针；交互元素上有微妙的缩放或颜色过渡 · 标准链接导航

08

组件

  • button 纯文本导航链接，大写，小字号，无背景
  • card 全出血摄影项目卡片，带有小写大写标签
  • hero 浅色背景上的巨型排版陈述，配有少量次级文本

09

文案语气与禁用清单

  • 语气 专业、自信、极简
  • 标题风格 大字号、小写或句首字母大写的几何无衬线字体，字距紧缩
  • 按钮文案 低调的文本链接，常为小号大写字母
  • 不要使用多种点缀色——截图显示的是严格的单色调色板，仅有浅灰和黑色。
  • 不要将所有文字居中对齐——截图显示了混合对齐方式，包括左对齐和非对称布局。
  • 不要使用浓重的投影——截图显示的是完全扁平的表面，没有深度效果。
  • 不要使用圆角容器——截图显示的是尖锐的边角或极小的圆角。
  • 不要使用粗边框分隔章节——截图通过留白和图像布局实现分隔。
  • 不要使用繁复的装饰性图案——截图完全依赖于简洁的排版和摄影。
  • 避免: 装饰性元素
  • 避免: 过多的色彩
  • 避免: 杂乱的布局

10

包内真实截图

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

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

11

System Prompt

14islands 是一个高端设计机构网站，其特点是极端的排版比例、近乎单色的调色板（背景：#F2F2F2，墨色：#070707，柔色：#A2A2A9）以及充足的留白。设计使用了几何无衬线和人文主义无衬线字体，字号巨大（最大达180px），字距紧缩。布局为非对称式，项目卡片采用全出血摄影。关键禁忌：避免使用多种点缀色、避免将所有文字居中、避免浓重投影、避免粗边框、避免装饰性图案，以及避免使用圆角卡片。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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