XEN Create Blog

How we use AI as part of the design process

Written by XEN Create | September 13, 2026

Good design still starts with a designer’s idea.

AI helps us explore that idea faster, test it earlier, and catch problems before the work is delivered. This gives us more room for creative thinking, collaboration, and better-informed decisions.

At XEN Create, we use AI to support different parts of the design process. It can help us research, explore visual possibilities, build working previews, test variations, solve specific technical problems, and check finished work.

But we do not ask AI to decide what looks good.

The creative direction, judgement, and final responsibility still belong to the designer.

 

Start with the idea and the creative direction

We begin with our own ideas and creative direction. AI is most useful when it helps us develop and test those ideas, rather than deciding what the idea should be.

Once the direction is clear, we give AI the project context it needs. This might include the brief, logo files, brand colours, fonts, reference images, delivery sizes, approved copy, transcripts, or timestamps.

These details help AI work within the project requirements instead of guessing them.

If we already have the original logo file, there is no reason for AI to recreate it. If the brand colour is already defined, we do not want something that merely looks close enough.

We use AI to explore design choices. We use the original files for project facts.

 

Build something early

We prefer seeing a working version rather than spending too long describing what something might look like.

For motion work, we can use AI to build a small browser preview with a few timing options. We can replay the animation, change the duration, and compare different directions before creating the complete sequence.

The first version does not need to be polished. At this stage, we are trying to answer questions such as:

  • Does the timing feel right?
  • Does the layout work?
  • Is this direction worth developing?

Seeing the options helps us make a more informed decision about what to take forward.

AI makes this process faster, but producing more options does not automatically make the process better. We still need to review each version, understand what is working, and decide what deserves further development.

 

Change one thing at a time

When comparing different options, we try to keep each test focused by changing one thing at a time.

For example:

  • If we are testing timing, the layout should stay the same.
  • If we are testing the layout, the copy and timing should stay the same.
  • If we are checking whether an element works within a particular crop, its position should be the main difference between the examples.
OPTION A: BASE CTA OPTION B: +CTA CTA OPTION C: +HERO CHANGE ONE VARIABLE AT A TIME

 

This makes it easier to understand why one option works better than another.

If several things change at once, the comparison becomes less useful. One version might have more readable text, another might have better motion, and another might have a stronger layout. We can choose a favourite, but we may not know what made it work.

AI is good at producing variations. The designer needs to define what is being tested and control what changes.

 

Check the actual exported file

A correct browser preview does not always guarantee a correct final file.

We experienced this while working on a design with a dark navy background and a soft gradient. It looked clean in the browser, but visible bands appeared across the background once the video was exported.

At first, we kept adjusting the gradient. The gradient was not the problem.

The video was being built from individual JPEG images. Saving those images as JPEGs had already reduced their quality before they were combined into the final video.

This is why we review the actual delivered file in its final format, even when everything looks correct in the preview.

ORIGINAL, AS RENDERED AFTER JPEG ENCODE DIFFERENCE, AMPLIFIED 12X CHECK WHAT ACTUALLY SHIPS

 

Similar issues can happen across different types of design work:

  • Social platforms can crop images.
  • Presentation software can replace fonts.
  • PDF exports can change spacing.
  • Different screens can display colours differently.

The earlier these problems are found, the easier they are to fix.

 

Use AI for specific technical problems

AI can be especially useful when a design problem is clearly defined.

For example, a HubSpot page may need a visual or functional change that is not available through the theme settings. In that situation, we can define the intended result, provide the relevant existing code, and use AI like ChatGPT to help draft a targeted solution.

The designer still decides:

  1. What the page should look like
  2. How the interaction should work
  3. Where the code should be added
  4. Which screen sizes need to be supported
  5. Whether the final result is appropriate

The generated code is a starting point. We add it to the appropriate place, preview the page, and check that it works without creating problems elsewhere.

hubspot-website.com/draft 1. WIREFRAME 2. PROTOTYPE ✓ Start Prototyping ◈ Prototype Flow Motion Test Build PROTOTYPE MODE Explore Ideas In The Browser Validate real flow, interactions, and responsive scaling early. 01. Wireframe Layout & visual flow VALIDATED ✓ 02. Interaction Buttons & motion ACTIVE ⚡ 03. Responsive Device adaptive READY →

 

AI helps us move through technical work faster. It does not replace the design thinking behind the solution.

 

Turn corrections into reusable rules

When we discover a useful correction, we add it to our project instructions when it is likely to apply again.

If AI has misunderstood a brand rule, delivery requirement, or recurring detail, we do not want to explain the same correction every time we start a new session.

Adding that information to the project instructions means future sessions can take it into account from the beginning.

# brand_rules.md Logo Lockup Master Vector SVG Color Tokens Approved Hex Palette Layout Grid 16px Safe Margins RULES SAVED READS RULES Vector Integrity & SVG TESTING... PASS ✓ Brand Colors & Contrast CHECKING... PASS ✓ Visual Balance & Hierarchy HUMAN GATE CORRECTIONS UPDATE BRAND RULES FOR NEXT SESSION

 

We have found this more useful than trying to write one enormous prompt that anticipates every possible problem. Instead, the instructions improve as we encounter real issues and learn what information produces better results.

The same caution applies when AI says it has completed a task. That only means the process stopped. It does not mean the work is ready as the final product.

AI can help us find problems. The final judgement remains with the designer.

 

The AI tools we use

We use different AI tools depending on the project and the type of work involved.

For visual design, we bring the creative direction and use Midjourney to explore visual possibilities, test references, and create supporting assets where appropriate.

For video projects, we develop the concept, direction, and narrative. Tools such as Google Flow, ElevenLabs, Grok, and Gemini, can then help us test visual motion, generate audio, or explore different production approaches.

For web design, ChatGPT and Claude  ,  can help us draft custom code, styling, and technical solutions when the problem is clearly defined.

Each tool has a different role. None of them removes the need for a designer to make decisions, review the output, and take responsibility for the output.

 

What this means for how we work

AI does not replace the design process for us. It helps us move through certain parts of it faster.

That means we can:

  1. Start with a stronger creative idea.
  2. Test that idea before spending too much time developing it.
  3. Compare variations and understand what is improving.
  4. Identify technical problems earlier.
  5. Spend less time recreating assets or solving repetitive problems.
  6. Focus more attention on the parts of the design that require judgement.

 

We still decide what direction to take, what needs more work, and what is ready to show.

AI can put options in front of us quickly, but we decide which one fits the client, the brand, and the audience.

That judgement stays with the designer.

What has changed is how much time we spend getting there. AI helps us explore and test ideas faster, while we remain responsible for the quality of the final result.