精选 · 开放 · 免费
Dribbble
一个通过视觉叙事连接设计师与客户的精选市场。
communitydesign
01
设计气质 DNA
市场创意作品集社区人才
一个干净的、展示风格的数字设计作品展厅。
02
色彩
#E94B84Accent
#0D0C22Ink
#212121Ink soft
#FFFFFFBG
#FAF9FBBG soft
#ECBEA300BG quiet
#524B63Muted
rgba(13, 12, 34, 0.08)Line
高对比度、中性的基础设计,旨在让色彩丰富的用户生成内容成为焦点。
03
字体
grotesque-sans
- display
52px · 600 - headline
32px · 600 - body-lg
16px · 400 - body
14px · 400 - caption
12px · 400
大型展示标题使用-1px字间距,营造紧凑、高级的感觉。 · 主要标题保持一致的600字重,正文使用400字重。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于严格4px网格的节奏,配合充裕的留白,保持布局干净、通透。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(13, 12, 34, 0.08)
0px 3px 6px rgba(0, 0, 0, 0.14) · 0px 15px 50px rgba(27, 32, 50, 0.1) · 0px 2px 4px rgba(6, 3, 24, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
响应式12列网格,在移动端折叠为4列。
07
动效与交互
100msmicro
300mssmall
500msmedium
cubic-bezier(0.32, 0, 0.59, 0.03)easing
按钮和卡片悬停时的微交互。 · 背景颜色变化时平滑的0.5秒缓入缓出过渡。
卡片上微妙的阴影提升效果,以及按钮上的背景颜色变化。 · 通过0.05秒的颜色过渡提供即时视觉反馈。
08
组件
- button 胶囊形主按钮,深色背景搭配白色文字;次级按钮使用浅灰色边框。
- card 以图片为主的卡片,元数据极简,采用12px圆角和细腻的悬停阴影。
- chip 小型、圆角的标签,背景为浅色,用于导航和筛选。
- input 大型、圆角的搜索栏,整合了操作按钮和占位符文本。
- hero 分屏式主视觉,左侧为醒目的左对齐标题,右侧为上下文配图。
09
文案语气与禁用清单
- 语气 自信、专业且赋能。
- 标题风格 直接且注重利益点,常使用粗体排版突出关键功能。
- 按钮文案 行动导向且清晰,使用胶囊形按钮作为醒目的行动号召。
- 不要使用衬线字体——截图显示全文一致使用grotesque-sans字体。
- 不要为卡片使用大于12px的圆角半径——截图显示12px是标准。
- 不要使用高饱和度的背景颜色——截图显示严格使用白色和浅灰色配色方案。
- 不要在主视觉区域使用左对齐文本——截图显示根据区域不同,采用居中或右对齐布局。
- 不要使用纤细、低对比度的边框——截图显示使用明显的1px边框,颜色为rgba(13, 12, 34, 0.08)。
- 不要使用深色模式主题——截图显示是纯粹的浅色模式界面。
- 避免: 过于随意或俚语过多的语言。
- 避免: 指令中使用被动语态。
- 避免: 缺乏上下文的术语。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Dribbble是一个精选的数字设计作品集和人才市场。它采用干净、浅色模式的美学风格,以白色和浅灰色背景(#FFFFFF, #FAF9FB)让色彩丰富的用户作品脱颖而出。排版主要使用grotesque-sans(Mona Sans),层级清晰,从粗体的52px标题到14px正文。标志性的粉色(#E94B84)被谨慎地用于图标和强调。布局采用12列网格,留白充裕,卡片圆角为12px。关键注意事项:避免深色模式,避免衬线字体,避免过于复杂的UI组件分散对视觉作品的注意力。
en · zh-CN · zh-TW · ja · ko