How to KrafterPro for Design Consistency
Hi all! I bought KrafterPro because I thought it could analyze an existing website’s design and help identify and fix inconsistencies. However, I may have misunderstood how that process works.
I can’t seem to find any videos or documentation showing how to analyze a website based on its current design, rather than applying one of the prepackaged design systems that comes with KrafterPro.
For example, I may have an existing website that was built without a formal design system or consistent presets. What I’d like to do is:
- Analyze the existing site and identify inconsistencies in things like fonts, heading sizes, spacing, colors, buttons, etc.
- Determine what the site is already using most consistently and use that to establish a design system.
- Create or update the necessary global presets based on that existing design.
- Apply those presets throughout the site to clean up the inconsistencies without completely redesigning it.
Could someone explain the correct KrafterPro workflow for doing this, especially when the website was originally built without a formal design system or presets? Or none at all?
Also, apologies if this has already been answered. I don’t see a search bar for searching through these posts before asking a question.
No apology needed — this comes up a lot, and it's the part of the workflow I haven't documented well enough yet.
You haven't misunderstood the outcome. You've misunderstood the order of operations. KrafterPRO doesn't invent a design system by reading your site.
It measures your site AGAINST a design system and then fixes what doesn't match. So the design system has to exist first but establishing it is a 10-minute job, not a redesign, and it can be built entirely from what your site is already using.
Here's the workflow for a site with no formal system:
- Codify the current design (10 min)
Go to Brand Studio → Client kit and enter the fonts and colours the site is already using — heading font, body font, primary/secondary, neutral. Apply. You now have a real design system that describes the existing site rather than replacing it. (Alternative: import a starter system, then edit its colours and fonts to match the site.)
- Run the Design Audit across the whole site
It scans your Divi pages, posts and Theme Builder templates and reports every value that isn't resolving to a token or preset typography sizes, fonts, colours, spacing, radius, plus legacy layout patterns. That's your inconsistency map, page by page and module by module.
- Scale Gaps handles the "what is the site already using most" part
Where the same off-system value appears in three or more places, the audit aggregates it and offers "Create variable" — so you promote the value your site is genuinely standardised on into the design system, rather than forcing it to the nearest existing token. This is the closest thing to deriving the system from the site, and it's where most of the real decisions get made.
- Fix / Modernise all
Attaches the presets and tokens across the site in batch, with a snapshot taken first and a Rollback tab if you don't like the result. The health score moves as you go, and Design Guard arms once you're clean, so new drift gets flagged instead of quietly accumulating.
Three things to be straight with you about:
- The audit needs a real design system present. If there's nothing but Divi's stock five colours and two fonts, you'll see "Design Health unavailable" — that's step 1 not being done yet, not a bug.
- Colour drift currently flags neutrals only; brand-hue variations stay silent by design to avoid noise.
- Buttons and line-height aren't flagged yet.
And the honest answer to what you actually asked: fully automatic extraction — scan the site, tally what's most used, propose a candidate design system for you to approve is the missing first step, and it's the one I most want to build. Tell me what you'd want it to hand you: a proposed system you accept or reject, or a report you build from manually? Genuinely useful input.
On search — there's a search in the top bar of the community, but I'll check it's visible on this space. Thanks for flagging it.