精选 · 开放 · 免费

Replit

Replit 是一款基于浏览器的协作式 IDE，让你无需本地设置即可构建、部署和分享软件。

01

设计气质 DNA

一个开阔、通透的工作室，构建者在此勾勒想法并将其编译为现实。

02

色彩

温暖、米白的中性色调，搭配单一高能量橙色强调色用于操作。

03

字体

geometric-sans · monospace

• display56px · 500
• headline40px · 500
• body16px · 400
• caption14px · 400

标题使用紧凑的负字距，带来紧凑、有力的视觉效果。 · 即使正文也采用相对紧凑的行高，以保持内容密度。 · 使用字重 500 用于展示/标题强调，而非粗体 700。

04

间距

基于 4px 基线网格，提供一致、紧凑的元素间距，并为卡片保留充裕内边距。

05

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

1px solid rgba(137,140,148,0.3)

rgba(0,0,0,0.08) 0px 2px 8px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

布局

居中单栏主视觉，突出一个输入框，随后是用于定价或功能的多栏卡片布局。

07

动效与交互

交互元素平滑的淡入淡出和背景色过渡。 · 按钮和卡片在悬停时细微的缩放或透明度变化。

描边按钮的背景色填充；卡片轻微的高度变化。 · 按钮细微的缩小效果；过渡到下一个状态或页面。

08

组件

• button 主要操作采用胶囊形描边按钮，次要或特定触发器采用实心圆角按钮。
• card 柔和米白或浅灰色卡片，拥有大圆角和细微的投影。
• chip 浅灰色圆角标签或建议芯片，用于分类或快速操作。
• input 大型、宽版的文本区域或文本输入框，圆角设计，右侧嵌入一个实心操作按钮。
• hero 全宽、垂直居中的区域，包含大标题、简洁副文本和一个主导性的交互式输入区域。

09

文案语气与禁用清单

• 语气 直接、赋能且略带俏皮，邀请用户去创造。
• 标题风格 简短、有力的问题或陈述，例如‘你将构建什么？’或‘从小处着手，快速扩展。’
• 按钮文案 清晰、行动导向的文本，例如‘创建账户’或‘注册’。

• 不要使用刺眼的纯黑色背景——设计使用温暖的米白色，如 #F7F6F4。
• 不要使用过度装饰或衬线字体——字体风格始终是干净的几何无衬线体。
• 不要到处使用尖锐的矩形直角——元素依赖于充裕的圆角（如 8px）或胶囊形状。
• 不要在界面上过度使用橙色强调色——它严格保留用于高优先级的行动号召。
• 不要使用厚重的投影或高对比度边框——层次感通过非常柔和、细微的阴影来传达。
• 不要为标题使用宽大、松散的行高——文本保持紧凑和凝练。
• 避免: 堆砌术语的技术性解释
• 避免: 激进的销售语言
• 避免: 被动或不确定的措辞

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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