精选 · 开放 · 免费
Buzzusborne
一份个人创造者作品集，致力于将复杂问题转化为简单、讨人喜欢的产品。
PortfolioFriendlyCleanApp UIConsumer
01
设计气质 DNA
创造者简约讨人喜欢作品集
一位友好的社区创造者，正在展示其数字创作成果。
02
色彩
#2A394EInk
#FFFFFFBG
rgba(42, 57, 78, 1)Line
采用纯净白色画布搭配深海军蓝字体，确保高对比度与可读性。
03
字体
humanist-sans · geometric-sans
- display
46px · 500 - body
15px · 400
正文使用 Roboto 字体，醒目的展示标题使用 Poetsen One 字体。 · 保持充足的行高（正文 1.6）以提升可读性。 · 避免在大标题上使用紧凑的字间距，以维持友好的感觉。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
在桌面上采用充足的留白，两侧内边距为 150px，以将注意力集中在核心内容上。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 20px
pill · 999px
0 4px 20px rgba(42, 57, 78, 0.05)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏布局，各部分之间留有充足的垂直间距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
为进入视口的元素应用平滑的淡入和变换过渡效果。
交互元素在悬停时呈现细微的透明度或颜色变化。 · 点击时提供即时视觉反馈，伴随轻微的缩放或颜色变化。
08
组件
- button 圆角药丸形按钮，采用深色纯色背景搭配白色文字。
- card 圆角容器，采用柔和的米色背景，用于展示项目截图。
- hero 居中的大标题，搭配趣味表情符号，下方是一个项目展示卡片。
09
文案语气与禁用清单
- 语气 友好、亲切且自信。
- 标题风格 第一人称对话式陈述，搭配趣味表情符号。
- 按钮文案 在深色实底按钮上使用清晰、面向行动的文字。
- 避免使用冷峻、冰冷的配色方案 —— 截图显示采用温暖的白色搭配友好的深海军蓝文字。
- 避免在卡片上使用尖锐的直角 —— 截图显示采用 20px 的大圆角。
- 避免使用小而拥挤的排版 —— 截图显示采用 46px 的大号可读展示字体。
- 避免使用复杂的多栏布局 —— 截图显示采用简洁、居中的单栏设计。
- 避免使用密集、文字繁多的段落 —— 截图显示采用充足的留白和呼吸空间。
- 避免使用激进、企业化的语言 —— 截图显示采用友好的第一人称对话式语气。
- 避免: 过度专业的术语
- 避免: 激进的销售语言
- 避免: 复杂的多词号召性用语
- 避免: 冰冷、企业化的语调
- 避免: 全大写的呐喊式表达
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一份名为 Buzz 的创造者的个人作品集网站。它将自身定位为一位友好、亲切的创作者，致力于将复杂问题转化为简单、讨人喜欢的产品。关键十六进制颜色包括纯净白色背景 (#FFFFFF) 和深海军蓝文字 (#2A394E)。字体类别包括用于展示的人文主义无衬线体和用于正文的几何无衬线体，主字体家族为 Roboto。布局居中且宽敞，内边距充足。关键禁忌：避免使用尖锐圆角（使用 20px 圆角），避免使用小而拥挤的字体（使用 46px 大标题），避免使用冰冷的企业化语言（使用友好的对话式语气）。设计强调留白、圆角元素和趣味表情符号，以营造温暖、 inviting 的氛围。
en · zh-CN · zh-TW · ja · ko