OpenDesign·你的设计资产库

网页参考

Builder.io

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

Developer ToolsDesignTooling
Builder.io 网站截图

01

设计气质 DNA

协作生产就绪AI工作区代码

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

02

色彩

#18B6F6Accent
#FFFFFFInk
#757575Ink soft
#000000BG
#17191CMuted
rgba(255,255,255,0.1)Line

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

03

字体

geometric-sans · humanist-sans · monospace

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

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

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 4px
md · 8px
lg · 20px
pill · 999px

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

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0.01, 0, 0.98)easing

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

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

08

组件

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

09

文案语气与禁用清单

  • 语气 自信、专业、技术精湛。
  • 标题风格 直接且以行动为导向，常强调‘协作’或‘生产就绪’。
  • 按钮文案 简洁明了，例如‘开始构建’或‘注册’。
  • 不要使用浅色背景——截图显示的是深黑色 (#000000) 背景。
  • 不要使用次要强调色——截图显示的是单一的主青色 (#18B6F6)。
  • 不要为每张卡片都使用高对比度边框——截图显示许多元素边框微妙或无边框。
  • 不要为展示文本使用衬线字体——截图显示的是几何无衬线字体。
  • 不要为正文使用居中对齐——截图显示的是左对齐段落。
  • 不要使用过多的装饰性图标——截图使用的是简洁的极简线条图标。
  • 不要使用狭小、拥挤的布局——截图显示的是充裕的空白和内边距。
  • 避免: 过于随意或口语化的语气
  • 避免: 模糊的营销术语
  • 避免: 被动语态
  • 避免: 掩盖价值主张的复杂句子

10

包内真实截图

Builder.io — 桌面首屏（hero）
桌面首屏（hero）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是 Builder.io，一个高端 SaaS 开发者工具。其设计特点是高对比度的暗色模式（#000000 背景，#FFFFFF 文字），搭配单一、鲜明的青色强调色 (#18B6F6)。字体方面，展示文本采用几何无衬线字体，正文采用人文主义无衬线字体。布局简洁宽敞，强调清晰度和专业性。关键禁忌：绝不使用浅色主题，绝不引入次要强调色，绝不使用装饰性或杂乱的 UI 元素。该系统专为注重效率和生产就绪性的技术用户而构建。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。