精选 · 开放 · 免费
Rog Ie
一位 Figma 产品设计师的精致个人作品集,展示其富有表现力的视觉工具。
PortfolioCalmTypographyCleanProductivity
01
设计气质 DNA
作品集个人设计师Figma表现力
一本融合专业技艺与个人特质的数字素描本
02
色彩
#ED2720Accent
#101010Ink
#666666Ink soft
#EDEDEDBG
#999999Muted
rgba(102,102,102,0.25)Line
中性画布,搭配刻意的高饱和度情感点缀色
03
字体
transitional-serif · humanist-sans
- display
24px · 500 - body
14px · 400 - caption
11px · 400
对特定强调关键词(如 ‘HORROR’)使用大写字母 · 正文保持高度可读的 14px 基线 · 主要章节标题严格使用衬线字体
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
充裕的垂直内边距(64px)定义了清晰的内容分区
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 8px
lg · 40px
pill · 100px
纤细的 1px 实线边框,主要用于项目列表分隔符
0px 3px 3px -2px rgba(0,0,0,0.2) 用于浮动元素 · Inset 0px 0px 0px 1px rgba(0,0,0,0.05) 用于微妙边界
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
主内容区域采用居中单栏布局
07
动效与交互
200msmicro
240mssmall
800msmedium
cubic-bezier(0.22, 0.61, 0.36, 1)easing
项目列表项在 hover 时平滑过渡 · 交互元素变换采用 cubic-bezier 缓动
光标变为指针,文本颜色或变换产生微妙变化 · 立即导航至项目详情页
08
组件
- button 极简的、以排版驱动的链接,无需厚重的按钮容器
- card 图像密集的堆叠元素,如电影海报
- chip 简洁的内联类别标签
- input 在提供的视图中无可见输入字段
- hero 左对齐的简介区域,包含头像、姓名和简短介绍
09
文案语气与禁用清单
- 语气 随性、个人化且高度专业
- 标题风格 直接、以衬线字体为主的标题,锚定各章节
- 按钮文案 带有特定颜色高亮的微妙内联链接
- 不要使用纯白背景——截图显示为柔和的中性色 #EDEDED。
- 不要使用厚重的渐变背景——截图显示为平面、纯色的表面。
- 不要所有标题都使用无衬线字体——截图使用过渡型衬线字体作为章节标题。
- 不要使用多种相互竞争的点缀色——截图仅使用一种高饱和度的红色进行强调。
- 不要使用粗边框或厚重的卡片容器——截图使用纤细的 1px 线条和微妙的阴影。
- 不要使用宽幅、两端对齐的文本布局——截图显示为紧凑、居中的单栏布局。
- 避免: 攻击性的营销语言
- 避免: 密集的多栏文本块
- 避免: 过于正式的企业行话
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一位 Figma 产品设计师的个人作品集,强调富有表现力的视觉工具和插画。其美学风格精致、宁静,以柔和的 #EDEDED 中性背景和清晰的 #101010 墨色为基础。排版上,正文使用人文主义无衬线字体,章节标题使用过渡型衬线字体,并辅以单一的高饱和度 #ED2720 点缀色进行偶尔强调。关键设计规则包括:保持充裕的垂直间距以分隔内容区域,避免厚重的 UI 容器而采用微妙的 1px 边框,并且始终为一级导航锚点使用特定的衬线字体。布局严格采用居中单栏形式,以确保专注的、编辑式的阅读体验。
en · zh-CN · zh-TW · ja · ko