精选 · 开放 · 免费

Dribbble

一个通过视觉叙事连接设计师与客户的精选市场。

01

设计气质 DNA

一个干净的、展示风格的数字设计作品展厅。

02

色彩

高对比度、中性的基础设计，旨在让色彩丰富的用户生成内容成为焦点。

03

字体

grotesque-sans

• display52px · 600
• headline32px · 600
• body-lg16px · 400
• body14px · 400
• caption12px · 400

大型展示标题使用-1px字间距，营造紧凑、高级的感觉。 · 主要标题保持一致的600字重，正文使用400字重。

04

间距

基于严格4px网格的节奏，配合充裕的留白，保持布局干净、通透。

05

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

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

布局

响应式12列网格，在移动端折叠为4列。

07

动效与交互

按钮和卡片悬停时的微交互。 · 背景颜色变化时平滑的0.5秒缓入缓出过渡。

卡片上微妙的阴影提升效果，以及按钮上的背景颜色变化。 · 通过0.05秒的颜色过渡提供即时视觉反馈。

08

组件

• button 胶囊形主按钮，深色背景搭配白色文字；次级按钮使用浅灰色边框。
• card 以图片为主的卡片，元数据极简，采用12px圆角和细腻的悬停阴影。
• chip 小型、圆角的标签，背景为浅色，用于导航和筛选。
• input 大型、圆角的搜索栏，整合了操作按钮和占位符文本。
• hero 分屏式主视觉，左侧为醒目的左对齐标题，右侧为上下文配图。

09

文案语气与禁用清单

• 语气 自信、专业且赋能。
• 标题风格 直接且注重利益点，常使用粗体排版突出关键功能。
• 按钮文案 行动导向且清晰，使用胶囊形按钮作为醒目的行动号召。

• 不要使用衬线字体——截图显示全文一致使用grotesque-sans字体。
• 不要为卡片使用大于12px的圆角半径——截图显示12px是标准。
• 不要使用高饱和度的背景颜色——截图显示严格使用白色和浅灰色配色方案。
• 不要在主视觉区域使用左对齐文本——截图显示根据区域不同，采用居中或右对齐布局。
• 不要使用纤细、低对比度的边框——截图显示使用明显的1px边框，颜色为rgba(13, 12, 34, 0.08)。
• 不要使用深色模式主题——截图显示是纯粹的浅色模式界面。
• 避免: 过于随意或俚语过多的语言。
• 避免: 指令中使用被动语态。
• 避免: 缺乏上下文的术语。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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