精选 · 开放 · 免费
Xihestudio
一个极简、深色主题的个人设计作品集,展示高端的机构工作成果。
PortfolioStudioBold TypographyPremiumClean
01
设计气质 DNA
作品集设计工作室艺术指导极简简洁
一个高端设计作品集的数字档案馆,呈现为一个简洁、极简的界面。
02
色彩
#FE2A2AAccent
#ffffffInk
rgba(255,255,255,0.75)Ink soft
#131312BG
rgba(255,255,255,0.1)Line
高对比度的深色模式,搭配一个简约的红色点缀,以保持对作品的专注。
03
字体
geometric-sans · mono
- display
46px · 400 - body
14px · 400 - caption
12px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
严格的网格,配有充裕的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255,255,255,0.1)
06
布局
1400container
12columns
24pxgutter
768 / 1024breakpoints
多列网格用于文本,大型类瀑布流布局用于作品集图片。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态和页面加载的透明度过渡。
链接和作品集项目上的微妙透明度变化。 · 直接导航到项目详情页面。
08
组件
- button 带方向箭头的文本链接,边框极简或无边框。
- card 大型图片块,内边距极小,作为主要导航。
- hero 大型排版标题,下方是作品集缩略图网格。
09
文案语气与禁用清单
- 语气 专业、简洁且低调。
- 标题风格 大字号、紧凑字距、全大写或加粗的句首大写,以产生冲击力。
- 按钮文案 微妙的方向箭头,指示移动到下一区域。
- 不要使用明亮或霓虹色 —— 截图显示的是深色、近乎黑色的背景和白色文字。
- 不要使用装饰性或花体字体 —— 排版严格使用几何无衬线和等宽无衬线字体。
- 不要使用圆润、友好的界面元素 —— 布局使用的是锐利、简洁、建筑感的网格。
- 不要添加投影或毛玻璃效果 —— 界面表面完全是扁平和纯色的。
- 不要使用多种点缀色 —— 截图显示只使用了一个克制的红色点缀 (#FE2A2A)。
- 不要将所有内容居中 —— 布局依赖于一个强大的左对齐文本网格。
- 避免: 花哨的动画
- 避免: 刺眼的颜色
- 避免: 密集的段落文字
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为艺术总监设计的高端个人设计作品集。设计是一个简洁、深色主题的极简界面 (#131312),专注于大型几何无衬线字体 (Monument Grotesk) 和严格的网格化作品集图片。文本主要为白色 (#ffffff),辅以柔和的白色 (rgba(255,255,255,0.75))。一个高饱和度的红色点缀 (#FE2A2A) 被极为克制地使用。布局基于列,留有充裕的空白。关键禁忌:不要使用明亮的背景,不要使用装饰性字体,不要使用厚重的投影或复杂的动画,不要使用多种点缀色,不要使用密集或杂乱的布局,主要文本不要使用居中对齐。
en · zh-CN · zh-TW · ja · ko