OpenDesign·你的设计资产库

网页参考

Ryanstephen

通过简洁的照片网格,展示数字、空间与流式界面设计的作品集。

PortfolioMobile UIExperimentalPhotographicStudio
Ryanstephen 网站截图

01

设计气质 DNA

产品设计师原型设计空间界面流式界面Microsoft

一个关于实验性界面作品的简洁数字画廊

02

色彩

#000000Ink
#404040Ink soft
#ffffffBG
#8b8b94Muted
rgba(0,0,0,0.1)Line

严格的中性色板,让项目图像占据主导地位

03

字体

humanist-sans

  • body12px · 400
  • body-large16px · 400

04

间距

4px
8px
16px
20px
24px
32px
40px
100px

充足的留白将简介区与图片网格分隔开来

05

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

sm · 10px
md · 10px
lg · 10px
pill · 999px

none

06

布局

1400container
3columns
24pxgutter
768 / 1024breakpoints

左侧固定栏用于简介,右侧滚动栏用于图片网格

07

动效与交互

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

transition: all 0.2s ease

图片和链接上显示指针光标 · 标准链接行为

08

组件

  • button 纯文本链接(Email, Twitter, LinkedIn)
  • card 密集网格中的圆角照片缩略图
  • hero 个人简介文本块

09

文案语气与禁用清单

  • 语气 专业、直接、低调
  • 标题风格 简洁的个人陈述
  • 按钮文案 纯文本链接
  • 不要使用复杂布局 — 截图显示为简单的固定侧边栏 + 滚动网格
  • 不要添加装饰性阴影 — 截图显示图片无投影效果
  • 不要在容器上使用投影 — 截图显示扁平化的图片卡片
  • 不要使用彩色强调色 — 截图显示纯中性的黑白灰色板
  • 不要使用装饰性边框 — 截图显示无边框元素
  • 不要使用复杂字体排印 — 截图显示为两种尺寸的简洁无衬线字体
  • 不要使用厚重的背景色 — 截图显示为纯白色(#ffffff)
  • 避免: 营销术语
  • 避免: 流行词
  • 避免: 表情符号

10

包内真实截图

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

11

System Prompt

一个面向产品设计师和原型设计师的极简作品集网站。设计采用简洁的白色(#ffffff)背景,配以黑色(#000000)文本和灰色(#8b8b94)链接强调色。字体为简洁的无衬线字体(humanist-sans 类别),正文 12px,链接 16px。布局特点为左侧固定栏用于个人简介文本,右侧滚动栏包含三栏圆角照片缩略图网格(10px 圆角)。关键注意事项:避免复杂布局,不要在容器上使用投影,不要使用彩色强调色,避免装饰性边框,不要使用复杂字体排印,不要使用厚重的背景色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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