一张截图能提供视觉方向，但要让它变成可复用的网站，光靠匹配颜色和间距还不够。你需要统一的字体、尺寸标准，和能让后续页面保持一致的可复用样式。
借助 Divi 5 中的 Divi AI 工具，你可以用截图来建立这些基础，并应用到页面中，最终还能优化结果。
在本教程中，我们将创建尺寸规范，以截图引导颜色和字体选择，并把最终样式转化为变量和预设。
设计系统如何让网站风格统一
设计系统为你的网站提供一套统一的设计决策。不再需要每次都为标题大小、按钮样式或卡片圆角重新选择，而是重复使用那些已经协同工作的值和样式。
在 Divi 5 中，设计变量用于存储单个值，比如颜色、字体家族和间距。选项组预设和元素预设则存储可复用的设置组合。选项组预设可以定义边框样式；元素预设则可以保存特定模块类型的样式。
当变量或预设被更新时，所有引用它们的元素都会随之变化。创建系统只是第一步，你还需要应用它并检查本地覆盖，确保共享样式能正常显示。
为什么截图是绝佳起点
设计说明往往依赖抽象词汇，比如 简洁、现代 或 专业。虽然这些词在交流中有帮助，但它们不能自动转化为具体的十六进制代码或精确像素值，这正是设计不一致性的开端。
截图让这些关系变得可视化。你可以看到颜色如何搭配，和字体大小与周围空间的关系。边框和阴影也有可视化的参考依据。
选择一个能展示你想要复用的关系的参考图。完整的部分可以揭示标题层级、卡片间距和按钮处理方式；而聚焦的截图则在只需要一个细节时很有用。将截图视为视觉指南即可，它不会显示原始 CSS、确切的字体家族或响应式行为。
认识 Divi AI 工具
Divi AI 能在 Divi 中提供文本、图像、代码和布局的生成功能。你可以在制作页面时使用它来创建内容和设计元素。
Divi AI 工具为 Visual Builder 增加了对话式工作流程。该工具可以检查你的布局，添加或修改模块，调整设计设置，创建设计变量和预设，并以截图或网址作为参考。
要使用这个工具，你需要 有效的 Divi AI 订阅或 Divi Pro。Agent 请求会通过 AI 钱包 计费，与 Divi AI 的其他生成工具分开。
当给定一张截图时，该工具会分析视觉结构，帮助你构建匹配的布局，而不仅仅是像素级复制。通过后续提示，你可以引导它进一步优化设计，使其更符合你的预期。
如何从截图构建设计系统
我们将先确定尺寸规范，然后用截图指导颜色和字体选择。确认这些值后，我们会构建页面，应用该系统，并将可复用样式保存为预设。
在建立系统时，请在沙盒或测试站点上操作。设计变量和预设会共享到整个网站，所以修改现有值可能会影响其他使用它的页面。
从变量生成器开始
开放式的提取请求可能会产生你需要的尺寸变量之外的值。最好先生成一个一致的尺寸规范，然后再请工具映射参考图到这个规范上。如果网站已有合适的规范，就保留它作为起点。
打开 Visual Builder 中的页面，点击左侧边栏的 变量管理器 图标。将鼠标悬停在 数字 组上，然后点击 生成流动尺寸变量。
按照顺序生成以下规范：字体大小（用于标题和正文）、间距（用于边距和填充）、间隔（用于弹性盒间隔）和圆角（用于角落）。每次生成一个，选择相关的 变量类型在可选的地方选择 流动预览后再点击 添加到我的网站然后重新打开生成器处理下一个。
默认值提供了起点。在流动模式下，生成的值会使用 clamp() 函数，根据视口变化在最小值和最大值之间调整。这处理了尺寸值，但你仍需检查不同屏幕尺寸下的换行、布局和可读性。更多详情请参阅我们关于变量生成器的概述。
使用你的截图
现在，你可以用截图来引导颜色、字体和间距的选择了。上传截图后，工具会分析其中的视觉元素，提取颜色、字体和尺寸信息。
先说，通过工具将截图上传到变量管理器中，然后选择「提取设计系统」。工具将根据截图自动生成颜色变量、字体候选列表，和你已生成的尺寸规范的匹配值。
请检查生成的建议值是不是符合你的预期。如果某些值需要调整，可以在生成前提供更详细的说明，比如希望按钮使用哪种色调，或者正文字体应该是什么类型。
构建预设
工具不仅能创建变量，还能生成可复用的预设。在确认了变量值后，点击「生成预设」，它会根据你的变量和截图中的样式，自动创建选项组预设和元素预设。
选项组预设可以定义按钮、卡片等组件的整体样式；元素预设则可以保存特定模块（如标题、段落、图片等）的完整样式。这些预设可直接拖拽到模块上应用，确保整个网站风格一致。
应用设计系统
创建完成后，你可以通过页面中的「设计系统」按钮来应用这套系统。点击按钮后，它会自动将预设应用到页面中所有相关的元素上，无需逐个修改。
应用后，建议你对页面做预览，特别是在不同设备上，确保样式在各种屏幕尺寸下表现一致。如果发现某些元素未被正确应用，可以手动调整或在变量中修改值。
替换现有样式
当你准备在整个网站中应用这套设计系统时，可以通过「全局应用」功能，将现有页面中不符合规范的样式替换掉。
将视觉参考转化为可复用的设计系统
从截图出发，我们不仅创建了统一的尺寸、颜色和字体规范，还定义了可复用的预设样式库。这套系统能确保你的网站在不同页面、不同设备上都保持一致的设计风格，大大提升了开发效率和用户体验。
更重要的是，一旦系统建立，任何后续的设计修改都可以通过更新变量或预设来完成，不再需要手动调整每个页面。这不仅节省了时间，还减少了出错的可能性。
