A screenshot gives you a visual direction, but turning it into a reusable website takes more than matching colors and spacing. You need shared values for typography and sizing, plus reusable styles that keep later pages consistent.
With Divi AI Agents in Divi 5, you can use a screenshot to establish those foundations, apply them to a page, and refine the result.
In this tutorial, we’ll generate a sizing scale, use a screenshot to guide our colors and fonts, and turn the finished styles into Variables and Presets.
What A Design System Does For Your Site
A design system gives your site a consistent set of design decisions. Instead of choosing a new heading size, button style, or card radius each time you build a section, you reuse values and styles that already work together.
In Divi 5, Design Variables store individual values, such as colors, font families, and spacing. Option Group Presets and Element Presets store reusable combinations of settings. An Option Group Preset can define a border style; an Element Preset can store the styling of a particular module type.
Updates flow to the elements that reference those Variables or Presets. Creating the system is only part of the work: you also need to apply it and check for local overrides that prevent shared styles from appearing.
Why A Screenshot Makes A Good Starting Point
Design briefs often rely on abstract words like clean, modern, or professional. While helpful in conversation, those words don’t automatically translate into specific hex codes or precise pixel values. That gap is where design inconsistencies begin.
A screenshot makes those relationships visible. You can see how the colors work together and how type sizes relate to the surrounding space. Borders and shadows also have a visual reference to work from.
Choose a reference that shows the relationships you want to reuse. A full section can reveal heading hierarchy, card spacing, and button treatment; a focused crop is useful when you only need one detail. Treat the screenshot as a visual guide. It does not reveal the original CSS, exact font family, or responsive behavior.
Introducing Divi AI Agents
Divi AI provides text, image, code, and layout generation inside Divi. You can use it to create content and design assets while working on your page.
Divi AI Agents adds a conversational workflow inside the Visual Builder. The agent can inspect your layout, add or edit modules, adjust design settings, create Design Variables and Presets, and use screenshots or URLs as references.
You need an active Divi AI subscription or Divi Pro to use the agent. Agent requests are metered through the AI Wallet, separately from Divi AI’s other generation tools.
When given a screenshot, the Agent analyzes the visual structure to help you build a matching layout rather than an exact pixel copy. Through follow-up prompts, you can guide it to refine the design to match your vision.
Use Ask mode to inspect your page and plan changes. Use Build mode to apply them. Many ordinary layout edits run immediately, while actions such as saving Global Variables, Presets, or the page require approval. Review each approval request, especially when a change affects styles used elsewhere on the site.
How To Create A Design System From A Screenshot
We’ll establish a sizing scale first, then use the screenshot to guide our colors and fonts. After checking those values, we’ll build a page, apply the system, and save reusable styles as Presets.
Work on a sandbox or staging site while establishing the system. Design Variables and Presets are shared across the site, so changing an existing value can also affect other pages that use it.
Start With The Variable Generator
An open-ended extraction request can produce more size variables than you need. Generate a consistent scale first, then ask the agent to map the reference onto it. If your site already has a suitable scale, keep it as your starting point.
Open a page in the Visual Builder and click the Variable Manager icon in the left sidebar. Hover over the Numbers group and click Generate Fluid Sizing Variables.
Generate the following scales one at a time. Choose the relevant Variable Type, select Fluid where available, review the preview, and click Add Variables To My Site. Reopen the generator for the next scale:
- Font Size, for headings and body text
- Spacing, for margin and padding
- Gap, for flex gaps
- Radius, for corners
The defaults provide a starting point. In Fluid mode, generated values use clamp() to scale between a minimum and maximum as the viewport changes. This handles the size value; you’ll still need to check wrapping, layout, and readability at different screen sizes. For more detail, see our Variable Generator overview.
For this workflow, use the reference to establish the color palette. We’ll use the screenshot to update the existing color roles and add only the extra colors the design needs. Inspect the current palette first so the agent can reuse suitable variables.
Source Your Snapshot
Choose a clear reference with visible headings, body text, buttons, and repeated elements. Your own mockup or a client-approved design is a useful starting point. Use a clear export that preserves the details you want the agent to interpret. Avoid a collage with overlapping panels when your goal is to understand the spacing of one page. Export the reference as a JPEG or PNG, the supported image attachment formats.
For this tutorial, we used ChatGPT to generate an image for a SaaS company’s home page.
Open The Agent And Review Its Mode
Open your page in the Divi 5 Visual Builder and click the AI Agent icon in the left sidebar. Sign in to your Elegant Themes account if prompted.
The mode control is at the bottom of the chat panel. Ask inspects your page, Variables, Presets, and documentation without making changes. Build allows the agent to edit your layout and design system. Start in Ask so you can review the proposed values first; we’ll switch to Build to apply them.
Build A Prompt
Click the Attach File icon in the chat composer, choose your JPEG or PNG, and confirm that it appears as an attachment. Explain that this first request is for a design system; the page build comes later.
Ask the agent to inspect existing color and font roles before proposing changes. Reuse roles such as Primary, Secondary, Heading Text, and Body Text where they already exist.
A screenshot does not supply a font file or reliably identify its family. If you know the intended fonts, name them and make sure they are available in Divi. Otherwise, review the agent’s suggested substitutes. Colors are estimates too, particularly around antialiased text, gradients, and compressed image edges.
Here is an example prompt you can use:
Review the proposal and resolve any uncertain colors or fonts. Then switch to Build and send a separate instruction to apply the agreed values:
Review approval requests before the agent saves Global Variable changes.
Why The Prompt Is Ordered That Way
The first request separates inspection from editing. Ask mode gives you a chance to check estimated colors and font suggestions before anything changes.
The Build request then applies the agreed values to existing roles. Keeping the Number Variable scales intact gives the later page build a consistent set of sizes to use. Font weights, shadows, and button treatments belong in the relevant Presets. Use Number Variables for individual supported size values.
Run An Audit
Check what changed before building the page. The agent’s summary is useful for locating values, but the Variable Manager is where you verify the saved names and values.
Switch to Ask and request an inventory that includes updated variables as well as newly created ones:
Use the list to check the changes, not as proof that the system is already applied to modules. At this stage, we’ve prepared reusable values; we haven’t built the page that will use them.
Open the Variable Manager and inspect Colors, Fonts, and Numbers. Check the proposed color values, confirm the chosen fonts, and make sure the generated scales are still intact. Check text contrast against the intended backgrounds as well; matching a screenshot does not guarantee readable text.
Fix Mistakes With The AI Agent
If you spot an inaccuracy, switch to Build and name the variable and correction. For example, if the body text is too light, provide a darker color value and ask the agent to update the existing Body Text variable without creating a duplicate.
If a generated size needs adjustment, review where that variable is used before changing it. One scale step can affect several elements. Use an existing step that fits, or adjust the scale deliberately.
Saving Global Variable changes and Presets requires approval. A change visible in the working layout is not proof that it has been saved.
Build A Page From The System
Once your Variables are populated, you can use the chat to construct the page using your established design system:
Use the Style Inspector to find static values after the build. Add one section as Context and ask the agent to map repeated colors, fonts, and sizes to the appropriate existing variables. Check the mapping before applying it. Keep intentional exceptions, such as a one-off illustration size, when a shared scale step would change the design unnecessarily.
Make any design tweaks that are faster to do manually, then move on to the next step.
Check the page section by section to confirm that supported fields reference the intended Number, Font, and Color Variables. Preview tablet and phone layouts, paying attention to heading wraps, card stacking, gaps, and overflow. Fluid sizes help with scaling, but layout still needs review.
For a graphic that needs refinement, attach the target module through Context and supply a focused reference. For an SVG, try:
Create Element And Option Group Presets
Once the page looks right and its Variables are applied, save the styles you expect to reuse. Work with one repeated pattern at a time so you can check what each Preset contains and where it is applied.
Start with an Option Group Preset for a treatment you’ll reuse, such as heading typography, card borders, or button styling:
- Open the settings of an element with the finished style.
- Find the relevant option group, such as Border or Spacing.
- Hover over the group heading and click its Preset icon.
- Choose New Preset From Current Styles, give it a descriptive name, and save it.
- Apply it to another compatible element and confirm that the expected styles appear.
Keep variable references inside the Preset where supported, so shared values remain connected to the design system.
Use an Element Preset when you want to reuse the styling of a particular module type. Open the preset selector at the top of the module’s settings, create a preset from its current styles, and name it for its purpose. Apply it to another module of that type to check the result. An Element Preset stores styling; it does not save a complete multi-module section.
Switch to Ask and request a list of the Presets applied to the page. Use the response to identify missing applications and local overrides, then check those elements in their settings.
You can also use Divi AI Agents to create Divi Library items for full sections you plan to reuse. Add the section as Context and instruct the Agent to create a Divi Library item with your chosen name:
Replace Existing Styles With The New System
Changes to existing Variables and Presets affect pages that already reference them. Static values on older pages remain unchanged until you replace them. Review one page or section at a time so you can preserve intentional differences.
The Manual Path
Open the Style Inspector from the left sidebar to inspect the page’s values. Select a section, row, or module to focus on that part of the layout. Identify repeated static colors, fonts, and sizes that should use the new system before replacing them.
Open the setting associated with a static value, click its Dynamic Content icon, and choose the appropriate Design Variable. Confirm that the field now references the variable. Repeat for other supported fields, checking the visual result as you go.
With The Divi AI Agent
To plan the cleanup with the agent, switch to Ask and send this request:
Review the mapping, then switch to Build and send an instruction specifying which changes to apply:
Attach the intended section as Context before sending the request. Check the result at desktop, tablet, and phone sizes, then continue with the next section. Review any approvals for shared Variable or Preset changes separately from saving the page.
Turn A Visual Reference Into A Reusable Design System
A screenshot supplies the visual direction. The reusable system comes from choosing shared values, applying them to the layout, and saving repeated styles as Presets. Divi AI Agents can help with each step, while your checks keep estimated colors, font substitutions, and spacing decisions aligned with the design.
Start with one page and a manageable set of Variables and Presets. Once those are applied and tested, use the same system on your next page. You’ll have a consistent foundation to build from, with shared values you can adjust as the site grows.
The post Creating A Design System From A Screenshot with Divi AI Agents appeared first on Elegant Themes Blog.