精选 · 开放 · 免费
Zed
一个高性能代码编辑器着陆页,融合了工业级的精准与精致的编辑清晰度。
devtoolseditor
01
设计气质 DNA
速度极简协作编辑器Rust开发者
精密的德系汽车界面与现代极简主义相遇
02
色彩
#1D4ED8Accent
#222B35Ink
#4E5E63Ink soft
#FAFBFCBG
#F0F2F4BG soft
#E6E9EDBG quiet
#A9AFC0Muted
rgba(169,175,188,0.3)Line
高对比度的功能性调色板,以单一主导的蓝色用于主要操作,并以冷静的中性灰色作为基底
03
字体
geometric-sans · monospace
- hero
64px · 700 - h1
48px · 700 - h2
24px · 700 - body
16px · 400 - small
14px · 400 - mono
14px · 400
大尺寸展示文本使用紧凑的字间距 · 正文保持足够的行高以确保可读性 · 代码块和技术内容仅使用等宽字体
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
8px 网格系统,辅以充足的空白以提供呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(169,175,188,0.3)
0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px -4px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 1px 3px 0 rgba(230,239,254,1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏布局,带有充足的内边距和清晰的视觉层级
07
动效与交互
100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 时的微小缩放和平移变换 · 交互元素上的平滑颜色过渡 · 内容显示时的柔和淡入
带有阴影增强和轻微色偏的微小浮起效果 · 通过缩放变换提供即时视觉反馈
08
组件
- button 主要:实心蓝色填充配白色文字;次要:带灰色边框和深色文字的描边样式;两者均带有微小的 hover 阴影
- card 浅灰色背景,带有细微边框、清晰的排版和极少的装饰元素
- chip 用于标签和元数据的小型内联元素,浅灰色背景
- input 简洁的带边框输入框,focus 时带有细微阴影
- hero 居中的大标题,配有辅助文本、双行动按钮和柔和的渐变背景
09
文案语气与禁用清单
- 语气 自信、专业且平易近人
- 标题风格 清晰、简洁的陈述,强调性能与开发者体验
- 按钮文案 直接的行动导向语言,带有明确的价值主张
- 避免过度的颜色对比——截图展示了受控的蓝色点缀与中性灰色的搭配
- 避免将深色模式作为主要设计——截图展示了带有微妙纹理的浅色主题
- 避免使用装饰性插图——截图展示了以排版为核心的简洁设计
- 避免添加不必要的边框或分隔线——截图展示了通过空白实现的清晰分隔
- 避免使用复杂的动画——截图展示了极简的动效设计
- 避免界面过于拥挤——截图展示了充足的间距与呼吸空间
- 避免: 过于随意或俏皮的语言
- 避免: 脱离上下文的技术术语
- 避免: 营销噱头或最高级表述
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
这是 Zed 的着陆页,Zed 是一款面向重视速度与极简主义的开发者的高性能代码编辑器。设计采用精致的几何无衬线字体系统,标题使用紧凑的字间距,并留有充足的空白以确保可读性。主要操作使用醒目的蓝色(#1D4ED8)点缀,与冷静的中性灰色(#FAFBFC 背景,#222B35 文本)形成对比。关键设计原则包括:无不分散核心信息注意力的装饰元素,严格遵守基于网格的布局,并始终保持视觉克制。界面强调清晰而非装饰,等宽字体仅用于与代码相关的内容。
en · zh-CN · zh-TW · ja · ko