精选 · 开放 · 免费
Astro
为内容驱动型网站打造的 Web 框架。
devtoolsframework
01
设计气质 DNA
开发者导向内容驱动快速现代现代框架
一辆用于构建网站的高性能跑车。
02
色彩
#54B9FFAccent
#F2F6FAInk
#BFC1C9Ink soft
#0D0F14BG
#12151CBG soft
#858B98Muted
rgba(133, 139, 152, 0.2)Line
深邃的暗色背景营造出高级、高对比度的画布，以衬托鲜亮的渐变和清晰的白色排版。
03
字体
grotesque-sans · monospace
- display
64px · 700 - h2
30px · 600 - body
16px · 400 - caption
13px · 400
标题和正文使用干净、几何感的 grotesque-sans 字体，以保持技术感和现代感。 · 代码片段和 CLI 命令严格使用等宽字体。 · 大号展示文本保持紧凑的字间距，以增强冲击力。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于 4px 网格，使用充足的 padding（16px, 24px, 32px）来定义章节边界和组件间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 9999px
1px solid rgba(133, 139, 152, 0.2)
rgba(24, 24, 27, 0.3) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏主视觉区域，内容垂直堆叠，随后过渡到用于主题展示的多栏网格。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素使用平滑的颜色和背景色过渡。 · 悬停状态使用微妙的透明度和 box-shadow 过渡。 · 交互反馈使用 transform 过渡。
平滑的颜色和背景色过渡，采用标准缓动曲线。 · 标准指针光标，无突兀的视觉跳变。
08
组件
- button 药丸形状，使用实色背景（白色或紫色），搭配高对比度文字。
- card 深色背景，带有微妙边框和圆角，用于展示主题。
- chip 药丸形的类别过滤器，带有微妙边框。
- input 深色背景的代码块，使用等宽字体，并配有复制图标。
- hero 全宽区域，采用醒目的线性渐变背景，文字居中。
09
文案语气与禁用清单
- 语气 自信、以开发者为中心、直接明了。
- 标题风格 粗体、直接、以价值为导向的陈述。
- 按钮文案 清晰、以行动为导向的短语，例如“立即开始”。
- 不要使用明亮、饱和的背景——截图显示的是深邃的暗色渐变。
- 不要使用装饰性或衬线字体——截图显示的是干净的几何无衬线字体。
- 不要使用尖锐的矩形按钮——截图显示的是全圆角药丸形按钮。
- 不要在标题中使用纤细、浅色的字重——截图显示的是粗体（700）和半粗体（600）字重。
- 不要使用拥挤或杂乱的布局——截图显示的是充足的留白和清晰的层次结构。
- 不要使用范围广泛的色彩——截图显示的是有限的调色板，包含深蓝、紫色和白色。
- 避免: 浮夸或过度营销化的语言
- 避免: 被动语态
- 避免: 缺乏上下文的技术术语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
Astro 是一个为内容驱动型网站设计的现代 Web 框架。其设计高端且面向开发者，采用深色模式调色板，以深海军蓝（#0D0F14）为基底，搭配鲜亮的紫色渐变和清晰的白色（#F2F6FA）文字。排版干净现代，依赖 humanist/grotesque sans-serif 字体类别以营造技术感。关键设计规则包括：1. 始终使用深色、高对比度的背景。2. 主要操作按钮使用药丸形状（border-radius: 9999px）。3. 标题和正文绝不使用装饰性衬线字体。
en · zh-CN · zh-TW · ja · ko