AI Design System: How to Stop Landing Page Visual Drift

AI design system work is not mainly about producing a perfect first batch of illustrations. It is about preventing the ninth, 17th, and 30th visual asset from quietly becoming part of a different brand.

That distinction surfaced in a recent r/SaaS discussion from a founder rebuilding landing-page visuals with a small palette and a family of spot graphics. The initial group looked coherent. The harder challenge arrived afterward: a new feature page needed an illustration, an integration page needed another, a pricing page needed a smaller asset, and a collaborator suggested a different accent treatment for security. Each decision seemed minor. Together, they created visual drift.

The most useful lesson is counterintuitive for teams that have adopted AI image tools: once an acceptable asset exists, generating more alternatives is often less valuable than editing, comparing, documenting, and approving the one already closest to the system. That is the basis of a practical AI design system for solo builders and lean SaaS teams.

The real problem is not AI generation—it is visual governance

The original Reddit post describes a common workflow failure. A founder uses an AI vector generator to create a coherent set of eight illustrations. Because they were made in the same session, with related prompts and a similar style, the group feels consistent. Then the product grows.

New pages are not created all at once. They appear over months: a security explainer, a changelog announcement, an onboarding flow, an integrations directory, a pricing comparison, a social image, or a help-center banner. Each new request gives the team a chance to make a sensible local decision that is inconsistent globally.

That is why visual drift is usually not a prompt-quality problem. It is a governance problem. A generated asset can be technically polished while still violating the visual rules that visitors have begun to associate with the product.

A proper design system is commonly understood as a shared foundation of reusable elements, standards, and documentation. Figma describes design systems as covering foundations such as color, typography, and iconography, alongside the processes needed to maintain them. (help.figma.com) The key insight for AI-era marketing sites is that illustrations and decorative graphics need the same treatment as buttons, headings, and spacing tokens.

For a small company, this does not mean creating a 100-page enterprise design-system site. It means establishing enough constraints that a future asset can be evaluated against an agreed visual language instead of against someone’s memory of the homepage.

What visual drift actually looks like

Visual drift is broader than using the wrong color. It happens whenever a new asset changes the perceived personality, scale, rhythm, or complexity of a page.

A founder may see it only as a vague feeling that one graphic is “off.” That instinct is real, but it becomes actionable when broken into observable dimensions.

Color drift

This is the most obvious failure mode. An illustration may introduce a hue that is technically close to the brand palette but noticeably warmer, brighter, or more saturated than the approved set. Or it may use the accent color in a role that prior assets reserved for small highlights.

Color drift can also occur through proportion. A brand may allow a coral accent, for example, but one new security illustration could be 60% coral while every existing asset uses it only for 10% of its surface. The individual asset is on-brand in isolation; beside the others, it feels like a new campaign.

Scale and visual-weight drift

Equal canvas dimensions do not create equal visual weight. A tiny dark object with sharp edges can feel heavier than a much larger pale object. A centered icon with a large silhouette can dominate a row of more open illustrations even when every SVG exports at 512 by 512 pixels.

This is why the Reddit author’s practice of judging assets side by side is more useful than checking dimensions alone. Visitors experience the collection, not the export settings.

Shape-language drift

Every illustration system develops an implicit grammar. It may prefer blunt corners, rounded terminals, thin strokes, flat fills, shallow perspective, or deliberately awkward geometric forms. A new AI output can introduce soft gradients, realistic shadows, dense linework, or a more literal metaphor.

None of those choices is inherently bad. The issue is whether the new asset changes the rules without an explicit decision to evolve the brand.

Detail and metaphor drift

Some assets are simple enough to be understood in a second; another may contain six symbols, labels, and decorative fragments. Some may rely on abstraction; another may be almost literal clip art. As the set expands, these differences add up to a confusing hierarchy.

A practical AI design system therefore needs rules for how much an illustration says, not just what it looks like. If your existing spot graphics use one central object and two supporting shapes, a new asset with five mini-scenes is not merely more detailed. It changes the page’s attention economy.

The community’s diagnosis: you are building a design system

The top responses to the r/SaaS post converged on the same conclusion: the founder had effectively rediscovered a lightweight design system. Commenters recommended keeping a single page or board containing every approved illustration, icon, and logo variant; adding each new asset there first; and comparing it with adjacent assets before it reaches the live site.

That advice matters because it converts taste into a repeatable checkpoint. “Put everything beside each other and stare until something feels guilty” is an excellent early-stage instinct, but it is not a process another teammate can follow—or one you can reliably follow when shipping under pressure.

The discussion also raised two practical questions that teams should answer early:

1. Where does generation end and conventional design editing begin?
2. What is the source of truth for approved assets and their history?

There is no universal answer to the first question. A generated vector that needs one color adjustment and two anchor-point moves may be fastest to fix inside the generating tool. A more complex refinement may belong in Figma, Affinity Designer, Illustrator, or another dedicated editor. The important point is not the application. It is deciding that the handoff happens based on the scope of the change—not on the urge to keep prompting.

For the second question, the answer should be unambiguous: one canonical asset library. Figma’s library model is built around reusable assets, styles, and variables stored in a shared source so teams can review changes and stay consistent. (help.figma.com) A solo founder does not need a team-plan implementation to use the underlying discipline.

Why editable SVGs change the economics of AI art direction

The best part of the workflow described in the Reddit thread is not the model choice. It is the choice to work with editable vector output.

SVG is a web standard for two-dimensional vector and mixed vector/raster graphics. Its paths, shapes, text, transforms, and styles make it inherently more adaptable than a flattened PNG. (w3.org) If a star is too large, a curve is too sharp, or an accent shape is too saturated, the team can change the specific object rather than discarding the entire composition.

That substantially changes how a founder should evaluate AI-generated marketing graphics. A raster image often creates a binary choice: accept it, attempt a difficult retouch, or regenerate. An editable vector creates a fourth option: preserve the useful composition while correcting the offending detail.

Recraft’s current documentation says its Vector Editor can modify points, curves, and colors directly on a canvas for generated and imported SVG files. Its V4.1 vector generator also positions output as editable, scalable SVG artwork. (recraft.ai) That capability matches the workflow the Reddit author was testing, though the broader strategy works with any tool that produces clean, editable vectors.

Generate for direction, not perfection

The practical objective of generation should be to solve the expensive creative questions:

• What is the right metaphor for this feature?
• What overall silhouette belongs in this asset family?
• Which shapes make the idea legible without adding UI clutter?
• Where should the accent color appear?
• How abstract or literal should the illustration be?

Once those choices are mostly correct, chasing a perfect output through additional prompts often makes the process worse. Every regeneration introduces fresh variation in composition, line quality, object count, and color balance. You may fix one small issue while creating three new family-resemblance issues.

A useful operating rule is: generate until the asset has the right direction; edit until it belongs.

The “do not infinitely regenerate” rule

This rule deserves to be explicit because AI tools make repetition feel cheap. It is easy to produce 40 cousins of an illustration. It is much harder to compare them, remember why each was rejected, and avoid accidentally choosing a visually louder option simply because it is novel.

Set a threshold before you start. For example:

• If the concept is wrong, regenerate.
• If the composition is wrong, regenerate once or rebuild from approved primitives.
• If one shape, color, curve, scale relationship, or detail is wrong, edit the existing SVG.
• If two consecutive regenerations add new inconsistencies, stop and return to the asset board.

This is not anti-AI. It is a more mature use of AI: use it to accelerate divergent exploration, then use human judgment and editable files for convergent refinement.

Build a lightweight AI design system in one afternoon

Your system should be small enough that you actually maintain it. Start with a single board in the design tool your team already uses. It can be a Figma page, an Affinity document, a Recraft canvas, or a carefully structured folder plus a visual overview file.

The board needs to help someone answer one question quickly: Does this new asset belong with the approved set?

1. Create an approved-assets wall

Place all shipped illustrations in one view at the sizes and contexts in which they commonly appear. Do not include only pristine master exports. Show the homepage hero, small feature-page spot graphics, card illustrations, social crops, and dark-mode variations if those exist.

Organize them by family rather than upload date. For example:

• Product feature illustrations
• Integration graphics
• Trust and security assets
• Empty states and onboarding art
• Icons and supporting motifs
• Deprecated but historically important assets

This creates visual memory outside your head. It also makes comparisons faster when the next request arrives.

2. Add a compact rule card

Next to the assets, write the few rules that actually determine resemblance. Avoid generic statements such as “modern” or “friendly.” Use constraints a contributor can check.

A good rule card might include:

• Palette: navy, off-white, charcoal, one coral accent; accent should occupy roughly 5–15% of a spot illustration.
• Shapes: geometric, rounded corners; no photorealistic lighting or textures.
• Strokes: no outlines, except thin charcoal connectors.
• Composition: one dominant object, two to four supporting forms, generous negative space.
• Perspective: front-facing or shallow isometric only.
• Detail: no embedded text, no miniature interface screens unless the illustration is explaining a UI workflow.
• Tone: useful and calm, not playful chaos or corporate stock art.

The numbers are not sacred. Their value is that they force decisions to be visible. If an approved exception becomes common, update the rule rather than pretending it is still an exception.

3. Save a base kit, not just finished files

Approved output is useful, but editable building blocks are more useful. Save a small kit of brand-native pieces: blobs, stars, arrows, containers, connector lines, grids, pseudo-3D blocks, and texture patterns.

When a new illustration begins with those pieces, it is less likely to wander. You can still use AI for the concept or arrangement, but you have a set of anchors that preserve the family resemblance.

4. Define asset metadata

Every approved asset should have a predictable name and a small record. At minimum, include:

This may sound like bureaucracy, but it prevents the expensive moment when asset 17 reveals that asset 4 was the superior template—and nobody can locate its editable original.

A review workflow for every new illustration

The goal is not to make visual review slow. It is to make it predictable and cheap.

Here is a practical seven-step flow for a founder, marketer, or small product team.

1. Write a one-sentence job statement. Describe what the graphic must communicate and where it will appear. Example: “A small integration-directory illustration that signals secure data sync without competing with partner logos.”
2. Choose the nearest approved relative. Do not begin from a blank prompt. Identify an existing asset with similar scale, metaphor, and placement.
3. Generate a limited number of directions. Explore perhaps three to six directions, not dozens. Evaluate concepts, not microscopic polish.
4. Select one candidate against the board. Place it beside the full approved family before editing it. A candidate that looks impressive alone may be too loud in context.
5. Normalize the asset. Adjust palette share, object scale, corners, path weight, negative space, and unnecessary detail. This is where editable SVGs earn their value.
6. Test it inside the actual layout. Check desktop and mobile, light and dark backgrounds where relevant, and the surrounding headline, cards, and calls to action.
7. Approve, version, and add it to the library. Once live, record the final source file and avoid reopening the generator for casual revisions.

The last step is important. A shipped asset should become a stable reference point, not a perpetually revisited experiment. If you later evolve the system, plan a deliberate refresh rather than allowing isolated edits to erode consistency page by page.

Judge the set, not the individual graphic

A landing page is a sequence of attention decisions. The hero, headline, screenshots, illustrations, icons, logos, and call-to-action blocks all compete for visual priority. An asset that succeeds on a blank canvas can fail badly when placed between seven other assets.

This is why collection review is more revealing than individual review. Put new work next to at least four relevant approved assets and ask comparative questions.

A five-minute visual-drift check

Before approving a new illustration, assess it on these six dimensions:

• Palette share: Does it use the same colors in roughly the same roles and proportions?
• Silhouette: Is its main shape unusually dense, tall, wide, or aggressive compared with peers?
• Visual weight: Does it become the loudest object without a strategic reason?
• Detail density: Does it contain significantly more small objects, lines, or visual jokes?
• Shape language: Do its corners, curves, perspective, and rendering techniques match?
• Semantic tone: Does it feel similarly calm, technical, playful, premium, or direct?

If two or more answers are “no,” do not immediately generate a replacement. First decide whether the problem is local and editable. A 10% scale reduction, one removed decoration, a calmer accent proportion, and a softened curve can be the difference between a new idea and a new member of the family.

This is the core of the Reddit author’s revised process: boring normalization often beats creative novelty. That is not a compromise. For a marketing site, it is frequently the more effective design decision.

Keep page design separate from generated assets

Another valuable point from the original discussion is that illustrations should support the page rather than dictate it. AI outputs can be compelling enough that teams begin building the layout around them. That reverses the proper hierarchy.

A landing page should first clarify the product, audience, primary action, information order, and proof. Typography, spacing, contrast, content hierarchy, and responsive behavior should be designed independently of the illustration. The graphic should reinforce the story, not force the story to adapt to whatever the model happened to produce.

This matters especially for SaaS marketing pages. A feature illustration may be attractive, but it should not make the page harder to scan, push a primary call to action below the fold, or visually outweigh a customer quote or product screenshot. If a graphic needs an unusual layout just to look good, it may be an art asset rather than a useful conversion asset.

A simple practical test: hide the illustration. If the page’s message becomes unclear, the information architecture is weak. If the page still works but becomes less memorable or less emotionally legible, the illustration is doing its supporting job.

Tool choice: what matters more than the generator

The r/SaaS post specifically mentioned Recraft V4.1 vector generation and on-canvas editing. That is a reasonable fit for this workflow because the output can remain editable rather than being treated as a flattened final image. Recraft also offers a Figma integration for placing generated raster and editable SVG assets into design files, which can reduce handoff friction for teams using Figma as their canonical library. (recraft.ai)

But tool choice should follow the system, not replace it. Whether you use Recraft, Figma, Affinity Designer, Illustrator, a vectorizer, or a combination, evaluate the workflow using four criteria:

Editability

Can a designer change a single path, fill, scale relationship, or layer without rebuilding the asset? SVG is valuable because vector graphics are scalable and their underlying shapes can be styled and transformed. (w3.org)

Library fit

Can approved assets live in a clear source of truth with names, versions, statuses, and accessible previews? The board must outlast the tool session that created an asset.

Context testing

Can the asset be quickly placed into the real web layout at responsive sizes? A canvas-only workflow can hide problems that become apparent in a browser or design mockup.

Handoff clarity

Can someone else understand what is approved, editable, and deprecated? A team does not need one app for everything, but it does need a clear handoff point. The generator can be the exploration environment; Figma or Affinity can be the refinement environment; the repository or asset manager can be the shipping environment.

The mistake is assuming that tool consolidation alone creates consistency. It does not. Consistency comes from a system of references, constraints, comparisons, and approval decisions.

When you should regenerate instead of edit

“Edit rather than regenerate” is a powerful default, not an absolute rule. Some AI outputs should be discarded quickly.

Regenerate or redesign when:

• The visual metaphor is fundamentally wrong for the feature.
• The asset cannot be simplified without losing its intended meaning.
• The perspective or composition conflicts with the whole illustration family.
• The SVG is structurally messy enough that correction takes longer than creating a better direction.
• The new asset exposes that the existing system no longer represents the company’s positioning.
• You need a new category of visual communication, such as moving from decorative spot art to detailed product diagrams.

The final case is especially important. Drift is not always bad. Sometimes it is a signal that the company has changed: the product has become more enterprise-focused, the brand has matured, or the website now needs a different level of credibility. In that situation, do not sneak in one inconsistent security illustration. Schedule a system update, define the new rules, and decide which existing assets need migration.

That distinction separates deliberate evolution from accidental fragmentation.

The second-order benefit: faster marketing production

A lightweight AI design system does more than make a site prettier. It reduces production time because new assets begin with constraints rather than blank-canvas uncertainty.

Instead of asking, “What should this integration page look like?” a marketer can ask, “Which approved integration asset is closest, and what one new metaphor do we need?” Instead of debating whether an illustration is polished, the team can check it against a compact rule card and an approved-assets wall.

The payoff compounds. Each approved asset becomes training data for humans—not necessarily for a model, but for the team’s judgment. It gives future contributors examples of acceptable scale, color roles, complexity, and tone. That is precisely why a source of truth matters more as the asset library grows.

For founders, this also protects focus. The goal is not to become an expert illustrator or to turn every landing-page update into a design sprint. The goal is to ship marketing pages that look like they belong to the same company, without reopening an endless prompt loop every time a new feature launches.

Conclusion: treat AI output as raw material for a system

The discussion on r/SaaS points to a healthier way to use generative design tools. The first eight matching visuals are not proof that the problem is solved. They are the beginning of a system that needs rules, a reference board, editability, versions, and an approval habit.

Use AI to find a direction. Use vectors and conventional editing to fix local flaws. Compare every new asset with the family rather than admiring it alone. Normalize before inventing. Keep a canonical library. And design the page around the customer’s task—not around the most interesting thing the generator produced.

An AI design system does not eliminate taste. It operationalizes taste so your brand can survive growth.

FAQ

What is an AI design system?

An AI design system is a set of visual rules, approved assets, editable source files, and review processes that helps a team use AI-generated design work without losing brand consistency. It applies familiar design-system thinking to illustrations, icons, graphics, and marketing assets.

Why do AI-generated landing page visuals drift over time?

They drift because later assets are usually created in separate sessions for separate page needs. Even when prompts are similar, models introduce changes in composition, detail, color balance, shape language, and visual weight. Without a shared asset board and explicit rules, local choices accumulate into brand inconsistency.

Should I use AI-generated SVGs or PNGs for SaaS illustrations?

Use editable SVGs when you need to reuse, resize, recolor, or refine illustrations across pages. PNGs can be acceptable for photographic or highly textured artwork, but editable vectors give you more control over small corrections that preserve a consistent illustration family.

How many visual rules should a small SaaS team document?

Start with six to 10 rules: palette, accent-color usage, shapes, stroke treatment, composition, perspective, detail level, tone, intended placements, and export requirements. Add rules only when a recurring decision causes inconsistency.

When should a team redesign its visual system instead of fixing drift?

Redesign when the product, audience, or brand positioning has materially changed—or when new illustration needs cannot fit the current rules without repeated exceptions. Treat that as a planned system evolution, not as a series of one-off departures.