文档设计设计系统

设计系统

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

设计如何生成

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

•色彩情绪 — 从您的描述中推断（“温暖质朴”→琥珀色/棕色；“暗黑电影”→深海军蓝配青色点缀）

•字体情绪 — 与品牌声音匹配（“编辑”→衬线体；“科技初创”→几何无衬线体）

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

主题情绪

情绪	颜色	排版	适用场景
暗黑电影	深海军蓝、黑色、青色	宽字距无衬线体	科技、SaaS、娱乐
温暖质朴	琥珀色、棕色、米白色	宽松衬线体	美食、酒店、手工艺
简洁极简	白色、浅灰色、黑色	几何无衬线体	作品集、专业服务
活力大胆	高饱和度原色	厚重展示体	时尚、消费品牌
奢华暗色	黑色、金色、米色	细衬线体	高端商品和服务
自然有机	森林绿、大地色系	人文主义无衬线体	健康、可持续发展

CSS 自定义属性

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

css

:root {
  --bg: #0a0a0f;            /* Page background */
  --surface: #111118;       /* Card / surface background */
  --accent: #3B82F6;        /* Primary accent / CTA color */
  --accent-2: #6366F1;      /* Secondary accent */
  --text: #E5E7EB;          /* Body text */
  --text-muted: #6B7280;    /* Secondary / muted text */
  --heading: #FFFFFF;       /* Headings */
  --border: rgba(255,255,255,0.08); /* Borders */
  --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 — 精致、高端服务