精选 · 开放 · 免费

StackBlitz

StackBlitz 是一款基于浏览器的云端 IDE，为现代网络团队带来闪电般快速、安全的开发环境。

01

设计气质 DNA

专为浏览器端开发打造的高性能引擎。

02

色彩

高对比度的深色 UI，强调速度与专注，点缀以单一的活力蓝色。

03

字体

humanist-sans · monospace

• display94px · 700
• heading40px · 700
• body16px · 400
• small13px · 500

大型展示型字体使用 Manrope，正文/UI 文本使用 Inter。 · 标题保持紧凑的字间距，以营造密集、高冲击力的感觉。 · 任何技术性或与代码相关的片段使用 Roboto Mono。

04

间距

主要版块之间保持充裕的间距，UI 组件内部则使用紧凑的内边距。

05

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

1px solid rgba(255, 255, 255, 0.12)

rgba(0, 0, 0, 0.32) 0px 4px 8px 0px · rgba(255, 255, 255, 0.1) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset

06

布局

标准的高端营销网站布局，包含全宽深色主视觉区、居中内容列和并排比较网格。

07

动效与交互

用于内容展示的平滑淡入与滑动过渡。 · 用于 UI 状态变化的弹性/伸缩过渡。

交互元素上的细微颜色或透明度变化。 · 通过状态变化提供即时反馈。

08

组件

• button 实心蓝色主按钮，搭配白色文字，采用药丸形或大圆角形状；具备细微的悬停状态。
• card 带有细微边框的深色表面，常用于数据或功能比较。
• chip 用于数据表格中的状态指示器或小标签。
• input 极简的深色输入框，带有细微的内嵌阴影和细边框。
• hero 以大规模字体为主的主视觉区域，拥有醒目的背景渐变和淡淡的、线框风格的 UI 插图。

09

文案语气与禁用清单

• 语气 自信、技术性、直接。
• 标题风格 加粗、以用户收益为导向，并经常使用大号字体来强调关键词。
• 按钮文案 简洁、行动导向的标签，例如“Try Bolt.new”。

• 不要使用白色背景——截图显示的是深色、近乎黑色的主背景。
• 不要使用衬线字体——截图显示的是简洁、现代的无衬线字体。
• 不要使用多个相互竞争的强调色——截图显示的是单一的主导蓝色点缀。
• 不要为圆角主按钮使用过大的 border-radius——截图显示的是矩形或略带圆角的按钮。
• 不要为焦点状态使用细的、浅色的轮廓——截图使用的是高对比度的白色或蓝色边框。
• 不要使用过于复杂的渐变——截图使用的是微妙的、由深到更深的渐变或纯色深色表面。
• 避免: 模糊的营销术语
• 避免: 过于复杂且未明确收益的技术解释
• 避免: 被动语态

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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