精选 · 开放 · 免费

CodeSandbox

一个面向开发者的平台，可通过编程方式快速启动隔离的沙箱环境。

01

设计气质 DNA

云端的深色模式终端

02

色彩

在深色中性背景上使用高对比度霓虹强调色

03

字体

grotesque-sans · monospace

• display56px · 500
• title32px · 500
• subtitle22px · 400
• body16px · 400

为大型展示标题使用紧凑的负字距 · 保持文字与背景之间的高对比度

04

间距

4px 基础网格

05

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

使用 #252525 的 1px 实线边框

06

布局

居中单列布局，交替使用深色和霓虹色背景区域

07

动效与交互

悬停状态的平滑透明度过渡 · 交互元素的微妙颜色过渡

微妙的颜色变化或透明度调整 · 即时的视觉反馈

08

组件

• button 主按钮使用强调色背景（#d6fb41）搭配深色文字（#0e0e0e）和药丸形状；次按钮采用描边样式
• card 霓虹色背景上的功能卡片，黑色文字，无可见边框或阴影
• chip 用于标签（如 'New'）的小型强调色徽章
• input 深色背景和细微边框的标准文本输入框
• hero 深色背景上的大尺寸排版标题，辅以说明文字和主要行动号召按钮

09

文案语气与禁用清单

• 语气 技术性、专业、直接
• 标题风格 粗体、简洁的陈述，聚焦于扩展性和安全性
• 按钮文案 行动导向的短语，如 '免费开始' 和 '试用 CodeSandbox SDK'

• 不要使用柔和、低对比度的强调色——截图显示主强调色是高饱和度的霓虹黄绿色（#d6fb41）
• 不要为标题使用衬线字体——截图显示是简洁、现代的无衬线字体系列
• 不要使用过多的阴影或渐变——截图显示是扁平化设计，层次极简
• 不要为主界面使用亮白色背景——截图显示主要是深色背景（#0e0e0e）
• 不要为标题使用宽字距——截图显示展示文本使用了紧凑的负字距（-2.8px）
• 不要使用多种强调色——截图显示是严格的双色调配色：深色中性色加单一霓虹强调色
• 不要为所有元素使用圆角——截图显示是直角边缘与细微圆角（最大 10px）的混合使用
• 避免: 营销术语
• 避免: 模糊的承诺
• 避免: 过于复杂的句子
• 避免: 不必要的感叹号
• 避免: 软弱或被动的措辞

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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