文档设计设计系统

设计系统

Draftly 如何生成独特的设计系统 —— 主题、CSS 变量和字体排印。

设计如何生成

Draftly 不应用固定模板 —— 它从您的提示词生成独特的设计系统。规划阶段提取两个关键信号：

•色调 —— 从您的描述推断（"温馨质朴" → 琥珀色/棕色；"深色电影感" → 深海军蓝配青色强调色）

•字体风格 —— 与品牌声音匹配（"编辑" → 衬线体；"科技初创" → 几何无衬线体）

这些成为应用于整个网站的 CSS 自定义属性。结果是连贯的视觉识别，而不是通用主题。

主题风格

风格	颜色	字体	适合
深色电影	深海军蓝、黑色、青色	宽字距无衬线体	科技、SaaS、娱乐
温馨质朴	琥珀色、棕色、米白色	疏朗衬线体	餐饮、酒店、手工艺
简洁极简	白色、浅灰色、黑色	几何无衬线体	作品集、专业服务
活力大胆	高饱和原色	粗重展示体	时尚、消费品牌
豪华深色	黑色、金色、米色	细衬线体	高端商品和服务
自然有机	森林绿、大地色调	人文无衬线体	健康、可持续发展

CSS 自定义属性

所有生成的网站都使用一套标准的 CSS 变量：

css

:root {
  --bg: #0a0a0f;            /* 页面背景 */
  --surface: #111118;       /* 卡片 / 表面背景 */
  --accent: #3B82F6;        /* 主要强调色 / CTA 颜色 */
  --accent-2: #6366F1;      /* 次要强调色 */
  --text: #E5E7EB;          /* 正文文本 */
  --text-muted: #6B7280;    /* 次要 / 静音文本 */
  --heading: #FFFFFF;       /* 标题 */
  --border: rgba(255,255,255,0.08); /* 边框 */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

要更改颜色，在代码标签页中编辑这些变量或使用对话："将 --accent 改为 #FF6B35"。

字体排印

Draftly 使用 CSS clamp() 生成流体响应式字体排印，实现无缝缩放：

•主图标题 —— clamp(2.5rem, 6vw, 5rem) —— 从移动端到大桌面端缩放

•板块标题 —— clamp(1.75rem, 3.5vw, 2.5rem)

•正文 —— 1rem（16px），行高 1.6

•说明文字 —— 0.875rem（14px）

字体通过 Google Fonts 加载。按风格生成的常见配对： - Inter + Inter —— 简洁、通用、最适合 SaaS - Playfair Display + Lato —— 编辑、豪华、餐厅 - Space Grotesk + DM Sans —— 科技、几何、初创公司 - Cormorant Garamond + Karla —— 精致、高端服务