精选 · 开放 · 免费

Zed

一个高性能代码编辑器着陆页，融合了工业级的精准与精致的编辑清晰度。

01

设计气质 DNA

精密的德系汽车界面与现代极简主义相遇

02

色彩

高对比度的功能性调色板，以单一主导的蓝色用于主要操作，并以冷静的中性灰色作为基底

03

字体

geometric-sans · monospace

• hero64px · 700
• h148px · 700
• h224px · 700
• body16px · 400
• small14px · 400
• mono14px · 400

大尺寸展示文本使用紧凑的字间距 · 正文保持足够的行高以确保可读性 · 代码块和技术内容仅使用等宽字体

04

间距

8px 网格系统，辅以充足的空白以提供呼吸空间

05

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

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

布局

居中单栏布局，带有充足的内边距和清晰的视觉层级

07

动效与交互

hover 时的微小缩放和平移变换 · 交互元素上的平滑颜色过渡 · 内容显示时的柔和淡入

带有阴影增强和轻微色偏的微小浮起效果 · 通过缩放变换提供即时视觉反馈

08

组件

• button 主要：实心蓝色填充配白色文字；次要：带灰色边框和深色文字的描边样式；两者均带有微小的 hover 阴影
• card 浅灰色背景，带有细微边框、清晰的排版和极少的装饰元素
• chip 用于标签和元数据的小型内联元素，浅灰色背景
• input 简洁的带边框输入框，focus 时带有细微阴影
• hero 居中的大标题，配有辅助文本、双行动按钮和柔和的渐变背景

09

文案语气与禁用清单

• 语气 自信、专业且平易近人
• 标题风格 清晰、简洁的陈述，强调性能与开发者体验
• 按钮文案 直接的行动导向语言，带有明确的价值主张

• 避免过度的颜色对比——截图展示了受控的蓝色点缀与中性灰色的搭配
• 避免将深色模式作为主要设计——截图展示了带有微妙纹理的浅色主题
• 避免使用装饰性插图——截图展示了以排版为核心的简洁设计
• 避免添加不必要的边框或分隔线——截图展示了通过空白实现的清晰分隔
• 避免使用复杂的动画——截图展示了极简的动效设计
• 避免界面过于拥挤——截图展示了充足的间距与呼吸空间
• 避免: 过于随意或俏皮的语言
• 避免: 脱离上下文的技术术语
• 避免: 营销噱头或最高级表述

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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