01
设计气质 DNA
原生高速Mac代码编辑器
一辆拥有流线型炫彩涂装的高性能赛车
02
色彩
#00BFFFAccent#FFFFFFInk#C0B8D4Ink soft#0D0B1ABG#1A1530BG soft#121024BG quiet#8A82A0Mutedrgba(255, 255, 255, 0.08)Line深邃宇宙暗色主题，搭配鲜明、高饱和度的点缀色，营造高端科技感
03
字体
- display
64px · 700 - heading
48px · 700 - body
18px · 400 - caption
14px · 400
在深紫色背景上使用高对比度白色文字以确保可读性 · 大型展示文字保持紧凑的字间距 · 在编辑器预览中使用等宽字体展示代码片段
04
间距
4px8px16px24px32px48px64px96px基于8px网格保持一致性，通过充裕留白营造高端感
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 12px
lg · 16px
pill · 999px
1px solid rgba(255, 255, 255, 0.08)
0 4px 24px rgba(0, 0, 0, 0.4) · 0 8px 48px rgba(0, 0, 0, 0.6)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中单列布局，包含全宽首屏区域
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的微妙悬停动画 · 平滑滚动过渡 · 背景渐变变化
颜色提亮与细微缩放变换 · 通过颜色变化提供即时反馈
08
组件
- button 大号圆角药丸形按钮，采用高对比度颜色（蓝、绿、白）
- card 深色半透明卡片，带有细微边框与阴影
- chip 小型圆角标签，用于功能与分类标识
- input 深色输入框，带有细微边框与聚焦状态
- hero 全宽区域，运用大字号排版、宇宙背景及突出的行动号召
09
文案语气与禁用清单
- 语气 自信、专业，略带一丝趣味
- 标题风格 直接、侧重收益的陈述，运用有力形容词
- 按钮文案 行动导向的动词，配合清晰的价值主张
- 不要使用灰暗的灰色背景——截图显示的是深紫色宇宙渐变
- 不要使用纤细、浅色的字体——截图显示的是粗体、高对比度的展示文字
- 不要使用方形按钮——截图显示的是圆角药丸形按钮
- 不要使用局促、狭小的间距——截图显示的是充裕的留白与呼吸空间
- 不要使用单一纯色的平面背景——截图显示的是带有微妙渐变与星场效果的背景
- 不要使用低对比度文字——截图显示的是深色背景上的纯白色文字
- 避免: 充斥专业术语的技术语言
- 避免: 被动语态
- 避免: 不确定或试探性的措辞
- 避免: 过于随意或俚语化的表达
- 避免: 冗长复杂的句子
11
System Prompt
这是一个面向原生Mac代码编辑器的高端开发者工具着陆页。设计采用深邃宇宙紫渐变背景，搭配微妙的星场效果，营造出高端、高性能的质感。关键色彩包括#0D0B1A（背景）、#FFFFFF（高对比度文字）和#00BFFF（鲜明点缀色）。字体类别采用humanist-sans，使用粗体、大字号展示文字并建立清晰层次。关键禁忌：切勿使用浅色背景，避免纤细字体，不要使用尖锐的方形按钮，并保持充裕的间距。整体美学追求高端、迅捷与活力，面向既重视性能也看重视觉精致度的专业开发者。