精选 · 开放 · 免费
Readymag
一个用于创建富有表现力、画廊般网站的高端设计工具平台。
tooldesign
01
设计气质 DNA
创意表现力设计驱动画廊作品集
一个用于数字设计工具的瑞士风格画廊。
02
色彩
#FF5000Accent
#282828Ink
#444444Ink soft
#FFFFFFBG
#F4F4F4BG soft
#808080Muted
rgba(40,40,40,0.24)Line
高对比度基底，搭配大胆、饱和的点缀色与充足的留白。
03
字体
humanist-sans · system-sans
- display
80px · 500 - headline
30px · 400 - body
16px · 400 - caption
14px · 400
展示标题使用几何/人文无衬线字体。 · UI元素使用系统字体。 · 大型展示文字确保紧凑的字间距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px的网格，紧凑UI元素的间距紧凑且有意为之。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 10px
lg · 20px
pill · 999px
0 2px 8px rgba(0,0,0,0.05)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准12栏网格，具有灵活的栏间距和高密度画廊布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
UI状态变化时使用平滑的透明度过渡。 · 交互元素使用细微的变换动画。 · 模态框和覆盖层的出现使用淡入/淡出效果。
交互元素上的细微亮度或透明度变化。 · 立即提供视觉反馈，伴有轻微的变换或颜色偏移。
08
组件
- button 药丸形状，配以大胆的橙色背景和白色文字，或使用深色边框的描边样式。
- card 以图片为主，边框紧凑，内边距极小，聚焦于视觉内容。
- chip 未突出显示，用于标签或小型状态标签。
- input 简洁的文本输入框，采用底部边框或细微背景。
- hero 大型表现力排版，搭配高密度图片画廊或大胆的色块。
09
文案语气与禁用清单
- 语气 自信、直接、专注于创意。
- 标题风格 大胆、简约，且常常实验性或超大尺寸。
- 按钮文案 直接且面向行动，常使用大胆的主色。
- 不要使用装饰性或手写体字体——截图显示的是干净、功能性的无衬线排版。
- 不要使用低对比度的文字颜色——截图显示的是高对比度的黑白搭配，辅以大胆的点缀色。
- 不要使用复杂、拥挤的布局——截图显示的是清晰的、基于网格的画廊布局。
- 不要到处使用圆润、气泡状的UI组件——截图显示的是锐利、有意图的边框，且药丸形状仅用于按钮。
- 不要使用柔和、粉彩的调色板——截图显示的是大胆、饱和的颜色，如橙色和紫色。
- 不要将视觉内容隐藏在交互之后——截图显示高密度图片画廊是主要内容。
- 避免: 术语过多的技术语言
- 避免: 过于企业化或枯燥的语调
- 避免: 低对比度或难以阅读的排版
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个用于创建富有表现力、画廊般网站的高端设计工具平台。主要背景为白色（#FFFFFF），文字使用深墨色（#282828），并以大胆的橙色（#FF5000）用于CTA，紫色（#8800FF）用于强调。排版使用人文无衬线展示字体和系统无衬线字体用于正文。关键禁忌：不要使用装饰性字体，不要使用低对比度文字，不要使用杂乱的布局。布局基于网格，包含高密度的视觉画廊和充足的留白，聚焦于展示设计作品。
en · zh-CN · zh-TW · ja · ko