精选 · 开放 · 免费
Sketch
专业级高对比度设计平台，通过深色主题界面将用户工作置于精致视觉体系中。
Design ToolsCleanProductPremiumCollaboration
01
设计气质 DNA
设计驱动专业专注亲切
如同精心打造的设计工作室环境，呈现高端且聚焦的工具集。
02
色彩
#212123Ink
#000000Ink soft
#f5f5f5BG
#ffffffBG soft
#f0f0f0BG quiet
#0000006bMuted
rgba(0,0,0,0.32)Line
采用高对比度中性色，主视觉区辅以微妙暖色渐变以营造视觉焦点与深度。
03
字体
transitional-serif · humanist-sans · monospace
- display
72px · 400 - heading
40px · 400 - subhead
22px · 400 - body
16px · 400 - caption
14px · 400
标题字体为高对比度的过渡型衬线体 · 正文采用中性人文无衬线体 · 大尺寸标题采用紧密字间距
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于4px网格体系，配合充足留白营造呼吸感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
使用rgba(0,0,0,0.32)的1px微妙边框增强层次定义。
rgba(0, 0, 0, 0.2) 0px 1px 4px 0px · rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容区域搭配充足内边距，保持清晰的视觉层级。
07
动效与交互
125msmicro
200mssmall
400msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
滚动渐入动效 · 平滑hover过渡
交互元素采用微妙的色彩或透明度变化。 · 标准指针光标配合即时反馈。
08
组件
- button 深色圆角矩形，搭配高对比度文字。
- card 带微妙阴影的圆角容器，用于功能展示。
- chip 小尺寸圆角标签，采用背景色与大写字母组合。
- input 极简圆角输入框，搭配微妙边框。
- hero 大尺寸分区布局，突出衬线标题与柔和渐变背景。
09
文案语气与禁用清单
- 语气 自信、友好且专业。
- 标题风格 直接有力，常用衬线字体增强视觉冲击与亲和力。
- 按钮文案 行动导向且清晰明确，采用高对比度按钮。
- 避免使用低对比度文字——设计依赖高可读性。
- 避免在正文使用过度装饰性字体——截图中采用简洁的人文无衬线体。
- 避免使用刺眼的亮色作为主要操作色——截图中使用深色高对比按钮。
- 避免布局元素过于拥挤——保持充足的留白营造焦点。
- 避免主要组件使用尖锐直角——遵循既定的圆角系统（20px/12px）。
- 避免大标题使用纤细浅色字体——采用高对比衬线字体增强视觉冲击。
- 避免: 技术术语
- 避免: 激进销售话术
- 避免: 过度随意的口语化表达
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是定位为设计师专业工具集的高端设计网站。核心色值包含浅灰背景（#f5f5f5）、高对比深色文字（#212123）以及辅助文本的柔和色调。字体体系采用过渡型衬线体作为标题字体（如'Designers, welcome home.'），搭配人文无衬线正文字体。关键禁忌：1. 避免使用低对比度文字；设计依赖高可读性。2. 正文避免使用过度装饰字体；保持清晰度。3. 避免布局拥挤；保持创造视觉焦点的充足留白。4. 主按钮避免使用刺眼亮色；保持深色高对比度。5. 组件避免使用尖锐直角；遵循既定圆角系统。6. 大标题避免使用纤细浅色字体；采用高对比衬线字体增强视觉冲击。
en · zh-CN · zh-TW · ja · ko