精选 · 开放 · 免费

Builder.io

面向您真实代码库和设计系统的 AI 产品开发平台。

01

设计气质 DNA

一个数字指挥中心，设计师、产品经理和开发人员在统一的代码驱动环境中协同工作。

02

色彩

高对比度的暗色模式，搭配单一高饱和度青色作为主要操作和强调的强调色。

03

字体

geometric-sans · humanist-sans · monospace

• display56px · 600
• heading48px · 600
• subheading24px · 500
• body18px · 400
• small14px · 400

为展示文本使用几何无衬线字体，以匹配 Poppins 灵感的美学风格。 · 为正文使用人文主义无衬线字体，以确保可读性。 · 为代码片段和终端命令使用等宽字体。 · 在大型展示文本上保持紧凑的字间距。

04

间距

以 4px 为基础单位，采用标准比例尺。

05

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

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

0px 1px 4px 0px rgba(0,0,0,0.08) · 0px 0px 30px 0px rgba(0,0,0,0.2)

06

布局

标准的 12 列栅格，带有固定最大宽度的容器。

07

动效与交互

区域进入时采用淡入和向上滑动效果。 · hover 状态采用平滑的透明度过渡。

微妙的亮度提升或边框颜色变化。 · 即时的视觉反馈。

08

组件

• button 高对比度青色主按钮，采用圆角设计；搭配幽灵/线框次要按钮。
• card 深色表面卡片，带有微妙边框和充裕内边距。
• chip 用于分类的小型圆角标签。
• input 标准的深色背景表单输入框。
• hero 全宽区域，采用大号字体和概念性插图。

09

文案语气与禁用清单

• 语气 自信、专业、技术精湛。
• 标题风格 直接且以行动为导向，常强调‘协作’或‘生产就绪’。
• 按钮文案 简洁明了，例如‘开始构建’或‘注册’。

• 不要使用浅色背景——截图显示的是深黑色 (#000000) 背景。
• 不要使用次要强调色——截图显示的是单一的主青色 (#18B6F6)。
• 不要为每张卡片都使用高对比度边框——截图显示许多元素边框微妙或无边框。
• 不要为展示文本使用衬线字体——截图显示的是几何无衬线字体。
• 不要为正文使用居中对齐——截图显示的是左对齐段落。
• 不要使用过多的装饰性图标——截图使用的是简洁的极简线条图标。
• 不要使用狭小、拥挤的布局——截图显示的是充裕的空白和内边距。
• 避免: 过于随意或口语化的语气
• 避免: 模糊的营销术语
• 避免: 被动语态
• 避免: 掩盖价值主张的复杂句子

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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