精选 · 开放 · 免费

Rog Ie

一位 Figma 产品设计师的精致个人作品集，展示其富有表现力的视觉工具。

01

设计气质 DNA

一本融合专业技艺与个人特质的数字素描本

02

色彩

中性画布，搭配刻意的高饱和度情感点缀色

03

字体

transitional-serif · humanist-sans

• display24px · 500
• body14px · 400
• caption11px · 400

对特定强调关键词（如 ‘HORROR’）使用大写字母 · 正文保持高度可读的 14px 基线 · 主要章节标题严格使用衬线字体

04

间距

充裕的垂直内边距（64px）定义了清晰的内容分区

05

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

纤细的 1px 实线边框，主要用于项目列表分隔符

0px 3px 3px -2px rgba(0,0,0,0.2) 用于浮动元素 · Inset 0px 0px 0px 1px rgba(0,0,0,0.05) 用于微妙边界

06

布局

主内容区域采用居中单栏布局

07

动效与交互

项目列表项在 hover 时平滑过渡 · 交互元素变换采用 cubic-bezier 缓动

光标变为指针，文本颜色或变换产生微妙变化 · 立即导航至项目详情页

08

组件

• button 极简的、以排版驱动的链接，无需厚重的按钮容器
• card 图像密集的堆叠元素，如电影海报
• chip 简洁的内联类别标签
• input 在提供的视图中无可见输入字段
• hero 左对齐的简介区域，包含头像、姓名和简短介绍

09

文案语气与禁用清单

• 语气 随性、个人化且高度专业
• 标题风格 直接、以衬线字体为主的标题，锚定各章节
• 按钮文案 带有特定颜色高亮的微妙内联链接

• 不要使用纯白背景——截图显示为柔和的中性色 #EDEDED。
• 不要使用厚重的渐变背景——截图显示为平面、纯色的表面。
• 不要所有标题都使用无衬线字体——截图使用过渡型衬线字体作为章节标题。
• 不要使用多种相互竞争的点缀色——截图仅使用一种高饱和度的红色进行强调。
• 不要使用粗边框或厚重的卡片容器——截图使用纤细的 1px 线条和微妙的阴影。
• 不要使用宽幅、两端对齐的文本布局——截图显示为紧凑、居中的单栏布局。
• 避免: 攻击性的营销语言
• 避免: 密集的多栏文本块
• 避免: 过于正式的企业行话

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko