精选 · 开放 · 免费
Retool
一个用于构建内部工具的开发者优先平台。
saasdev
01
设计气质 DNA
运营导向开发者优先值得信赖高性能
企业级IDE的内部工具化等价物。
02
色彩
#518DD2Accent
#E9EBDFInk
#CBCC C4Ink soft
#151515BG
#242424BG soft
#8B867FBG quiet
rgba(233, 235, 223, 0.12)Line
采用温暖、柔和的中性色和冷蓝色强调色的高对比度实用主义配色。
03
字体
grotesque-sans · humanist-sans · monospace
- display
72px · 380 - display-2
48px · 380 - body
24px · 400 - body-2
16px · 400 - mono
14px · 400
04
间距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
以4px为基础单位，配合24px的栏间距和充足的垂直内边距，营造呼吸感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 20px
pill · 9999px
1px solid rgba(233, 235, 223, 0.12) 用于微妙的分割线；1px solid rgb(233, 235, 223) 用于激活状态。
0px 1px 2px rgba(0, 0, 0, 0.12) · 0px 68px 116px rgba(0, 0, 0, 0.35)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色背景，搭配居中的、受约束的内容区域。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.72, 0, 0.12, 1)easing
悬停状态下平滑的透明度和变换过渡。 · 文本元素交错入场动画。 · UI组件的微妙视差或悬浮效果。
按钮和交互元素有微妙的背景色变化或轻微的向上位移。 · 立即提供颜色或透明度变化的视觉反馈，通常随后进行导航过渡。
08
组件
- button 胶囊形按钮，主要操作（免费开始）采用实心白色/浅色背景，次要操作（预约演示）采用透明边框背景。
- card 简洁、略带圆角的容器，通过微妙的边框或背景差异来展示产品界面。
- chip 小巧、圆角的标签，内边距极小，常包含等宽字体文本以表示技术概念。
- input 圆角输入框，搭配简洁的边框和浅色背景，用于搜索或命令输入。
- hero 一个居中的巨大标题对，下方是悬浮的产品UI演示，背景为微妙的渐变。
09
文案语气与禁用清单
- 语气 直接、技术性和自信。
- 标题风格 简短、有力且行动导向（例如：‘按你的方式构建。在你信赖的平台上发布。’）。
- 按钮文案 清晰且以利益为导向，强调入门的便捷性或专家咨询。
- 不要使用高饱和度的霓虹色——截图显示的调色板包含温暖的灰色、深色背景和单一的冷蓝色强调色。
- 不要为标题使用装饰性衬线字体——截图显示的是用于大号展示文本的简洁、功能性的无衬线字体。
- 不要为主容器使用尖锐的90度直角——截图显示偏爱柔和、大圆角（胶囊形或20px以上的弧度）。
- 不要使用繁杂、有纹理的背景——截图显示的是平滑的渐变和干净、纯色的深色表面。
- 不要使用狭小、拥挤的布局——截图显示的是充足的间距和大字体以建立清晰的层次结构。
- 不要使用多种竞争性的强调色——截图显示仅在特定图形场景中克制地使用蓝色和温暖的橙红色。
- 避免: 华而不实
- 避免: 企业流行语
- 避免: 模糊的承诺
- 避免: 过多的感叹号
- 避免: 被动语态
- 避免: 过于复杂的句子
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 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个用于构建内部工具的、面向开发者的SaaS平台。设计采用深色模式调色板，包含温暖的柔和灰色（#151515, #E9EBDF）和冷蓝色强调色（#518DD2）。字体采用简洁的无衬线字体用于展示，以及人文主义无衬线字体用于正文，高度强调大号、细字重的标题。布局居中且宽敞，内边距充足。关键禁忌：绝不使用高饱和度霓虹色，避免为标题使用装饰性衬线字体，不要为主UI容器使用尖锐的90度直角。语调直接、技术性和自信。
en · zh-CN · zh-TW · ja · ko