精选 · 开放 · 免费
Hugging Face
一个友好、高实用性的平台，供AI社区协作开发模型、数据集和应用程序。
aicommunityplayful
01
设计气质 DNA
协作技术友好开源AI
一个为机器学习工程师和研究人员打造的繁忙数字广场。
02
色彩
#000000Ink
#3D4654Ink soft
#FFFFFFBG
#F3F4F6BG soft
#F8F9FABG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line
以干净的白色背景搭配细微的灰色边框，并以深海军蓝渐变作为视觉锚点。
03
字体
humanist-sans · monospace
- display
56px · 700 - h1
32px · 700 - h2
20px · 600 - body
16px · 400 - caption
12px · 400
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于8px的统一网格，辅以4px的紧凑微间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #E5E7EB
rgba(0, 0, 0, 0.1) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的响应式12列网格，在移动设备上折叠为单列。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 时的细微颜色过渡 · 交互元素的缩放和平移变换
提亮背景或更改边框颜色，持续 0.15s ease。 · 细微的缩放变换。
08
组件
- button 深海军蓝填充按钮，配白色文字和药丸形圆角，或带边框的透明按钮。
- card 白色卡片，配浅灰色边框和12px圆角，用于功能和组织列表。
- chip 小巧的圆角标签，配浅灰色背景，用于分类，如任务和库。
- input 圆角搜索框，配细微的灰色边框和内边距。
- hero 深海军蓝至黑色的渐变背景，配大号白色文字和醒目的吉祥物。
09
文案语气与禁用清单
- 语气 友好、协作且技术精准。
- 标题风格 大胆、陈述性的语句，强调社区和构建。
- 按钮文案 直接且面向行动（例如，“探索”、“浏览”）。
- 不要使用强烈的霓虹色强调 — 调色板依赖于海军蓝、灰色和白色。
- 不要使用厚重的投影 — 仅卡片上存在细微的层次感。
- 不要对长段落使用居中文本 — 对齐方式为左对齐。
- 不要对所有元素使用完全圆角 — 混合使用8px和药丸形状。
- 不要使用复杂的插画 — 界面依赖干净的图标和单个吉祥物。
- 不要默认使用深色模式 — 主要体验是浅色主题，搭配深色视觉区域。
- 避免: 过度企业化的术语
- 避免: 激进的销售语言
- 避免: 在主要界面中使用复杂的学术术语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Hugging Face 是一个友好、开源的AI社区平台，拥有干净、面向开发者的UI。它采用高对比度调色板：白色背景 (#FFFFFF)、浅灰色 (#F3F4F6) 和深海军蓝主视觉渐变 (#1A202C)，文字使用黑色 (#000000) 以获得最佳可读性。排版方面，正文使用 humanist-sans 字体，标题使用粗体展示字重。关键设计元素包括活泼的拥抱吉祥物、圆角搜索栏以及用于筛选任务的分类“标签”。关键禁忌：避免使用强烈的霓虹色，仅使用细微阴影，并保持左对齐文本以确保可读性。布局是干净的12列网格，拥有充裕的留白，强调社区信任和技术实用性。
en · zh-CN · zh-TW · ja · ko