01
设计气质 DNA
开发者编辑器AI 原生生产就绪组件
一个用于构建现代文本编辑器的、简洁专业的工具包。
02
色彩
#0d0d0dInkrgba(13,13,13,0.6)Ink soft#ffffffBG#f5f5f4BG softrgba(13,13,13,0.4)Mutedrgba(0,0,0,0.1)Line高对比度的单色设计，辅以用于强调的鲜艳渐变。
03
字体
- display
96px · 700 - h1
56px · 700 - body
22px · 400 - small
16px · 400 - caption
12px · 400
大尺寸、有冲击力的标题使用几何无衬线体。 · 正文和导航使用可读性高的新人文无衬线体。 · 正文使用 400 字重以获得最佳可读性。
04
间距
4px8px16px24px32px40px48px64px96px8px 基础网格，搭配 4px 子网格用于精细调整。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 12px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.1) 或 solid 1px border-color: rgb(13, 13, 13)
0 4px 10px 0 rgba(0,0,0,0.04) · 0 1px 4px 0 rgba(0,0,0,0.03) · 0 1px 2px 0 rgba(0,0,0,0.02)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
12 列网格，带有最大宽度容器、较大边距，移动端采用堆叠式区块。
07
动效与交互
250msmicro
300mssmall
400msmedium
cubic-bezier(0.65, 0, 0.35, 1)easing
颜色、变换和 border-radius 的平滑过渡。 · 交互元素的缩放动画。 · 所有交互状态使用一致的缓动曲线。
悬停时出现微妙的背景色变化或变换效果。 · 点击时进行缩放或透明度变化。
08
组件
- button 用于主要操作的高对比度实心按钮，采用药丸形圆角。
- card 用于展示模板的简洁卡片，带有微妙阴影和圆角。
- chip 用于分类（如“付费”、“免费”）的小型标签，采用药丸形圆角。
- input 简洁、带边框的输入框，采用圆角设计。
- hero 醒目、粗体的大标题，搭配鲜艳的渐变背景和内嵌的编辑器界面。
09
文案语气与禁用清单
- 语气 专业、自信、面向开发者。
- 标题风格 直接、行动导向且醒目。
- 按钮文案 清晰简洁，强调速度和生产就绪。
- 不要使用深色模式——截图显示背景以浅色为主。
- 不要使用衬线字体——截图显示所有文字均使用无衬线字体。
- 不要使用低对比度文字——截图显示在浅色背景上使用深色文字以获得高可读性。
- 不要使用复杂、拥挤的布局——截图显示简洁、居中且间距合理的区块。
- 不要使用单一纯色背景——截图显示使用鲜艳的渐变背景。
- 不要使用尖锐、方形的角落——截图显示所有表面均采用圆角（8-16px）。
- 避免: 过于随意或俏皮的语言。
- 避免: 非开发者社区标准的术语。
- 避免: 模糊的价值主张。
10
包内真实截图
11
System Prompt
Tiptap 是一个用于构建 AI 原生文本编辑器的高端开发者平台。设计简洁专业，采用高对比度单色板（墨色 #0d0d0d，背景 #ffffff），并辅以鲜艳渐变进行强调。排版结合了几何与人文无衬线字体，大标题加粗以增强冲击力。关键元素包括简洁的导航、集成了编辑器预览的主区块，以及组件模板网格。关键禁忌：绝不使用深色主题，避免衬线字体，绝不使用低对比度文字。整体感觉是现代、可靠且生产就绪。