精选 · 开放 · 免费
Ryanstephen
通过简洁的照片网格，展示数字、空间与流式界面设计的作品集。
PortfolioMobile UIExperimentalPhotographicStudio
01
设计气质 DNA
产品设计师原型设计空间界面流式界面Microsoft
一个关于实验性界面作品的简洁数字画廊
02
色彩
#000000Ink
#404040Ink soft
#ffffffBG
#8b8b94Muted
rgba(0,0,0,0.1)Line
严格的中性色板，让项目图像占据主导地位
03
字体
humanist-sans
- body
12px · 400 - body-large
16px · 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
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个面向产品设计师和原型设计师的极简作品集网站。设计采用简洁的白色（#ffffff）背景，配以黑色（#000000）文本和灰色（#8b8b94）链接强调色。字体为简洁的无衬线字体（humanist-sans 类别），正文 12px，链接 16px。布局特点为左侧固定栏用于个人简介文本，右侧滚动栏包含三栏圆角照片缩略图网格（10px 圆角）。关键注意事项：避免复杂布局，不要在容器上使用投影，不要使用彩色强调色，避免装饰性边框，不要使用复杂字体排印，不要使用厚重的背景色。
en · zh-CN · zh-TW · ja · ko