How to Create Web Mockups with AI: My Real Experience Preparing for DrupalCamp Spain 2025

Last week I was preparing my talk for DrupalCamp Spain 2025 in Santiago de Compostela when I decided to run an experiment. I took the event website's design and started generating variations with artificial intelligence.

In less than an hour I had dozens of different proposals. And no, I'm not a designer.

Why I Started Using AI to Create Mockups

I work with several web development agencies and often need to communicate visual ideas. It used to be a tedious process: trying to explain with words what I had in mind or making crappy sketches that nobody understood.

Now I can generate mockups in minutes and communication with design teams flows much better.

The Tool I Use (Though It's Not What Matters)

For these examples I used Google's NanoBanana, but new models appear every month. What's relevant isn't which tool you use, but how you integrate it into your workflow.

First Experiment: Complete Designs from Scratch

I started by generating complete redesigns of the DrupalCamp Spain website. I wanted to see what variety of styles I could achieve starting from the same point.

Each design has a different visual direction, exactly what I was looking for. Generating each version took me just a few minutes. In some cases it was only seconds because I was iterating on previous designs.

Of the dozens of versions I generated, these are the ones that turned out best. They're not perfect, but they serve their purpose: showing different possible visual paths.

Second Experiment: Modifying Specific Sections

You don't always need to redesign the entire website. Sometimes you just want to explore how a specific section would look with a different style.

I tested this with the pricing section as an example:

I asked for specific changes but also gave it freedom to propose versions according to the website's visual style. The results aren't perfect, but they help anyone see the differences and say "I prefer this style" or "let's try something more like this other one."

Third Experiment: Editing Specific Areas of a Page

The last test was taking complete screenshots and requesting modifications only in certain areas. This is especially useful when you want to maintain the general structure but explore specific changes.

My Workflow with These Tools

1. Gathering References

I look for competitor websites or references that might appeal. I take screenshots and note which specific elements I want to highlight or combine.

2. Analyzing Content

I copy the texts from references and use AI to understand:

• How they structure information
• What tone they use
• How they organize sections

3. Creating the Puzzle

I ask the AI to combine all references: "take the header from this website, the button style from this other one, the content structure from that one." It's like assembling a puzzle with the best pieces from each site.

4. Rapid Iteration

From that first design, I start requesting variations. Color changes, spacing, typography... In minutes I have multiple options.

How It Improves Team Communication

The most valuable thing I've discovered is how it facilitates working with agencies. When I need to explain an idea to the design team, I generate a quick mockup. No more misunderstandings or wasted time.

The designer sees exactly what I have in mind, tells me what would work and what wouldn't from their experience, and we move forward much faster.

Why This Doesn't Replace the Design Team

It's important to understand the limitations. During my tests, most generated designs had problems:

• Basic usability errors
• Strange proportions
• Elements that wouldn't make sense when implemented
• Visual inconsistencies

A professional designer detects these flaws instantly and knows how to fix them. AI is a tool to accelerate processes, not to replace human judgment.

Real Day-to-Day Advantages

Unlimited Exploration: You can try dozens of ideas in the time it used to take to make one.

More Concrete Feedback: It's easier to give opinions about something visual than about a description.

Process Documentation: All variations are saved, useful for justifying decisions.

Time Savings: What used to take days now gets done in an hour.

What Nobody Tells You About These Tools

Not all generations turn out well. For every decent design you see here, I discarded many others. It's a trial and error process where quantity leads to quality.

Don't expect production-ready results either. These are mockups, visual approximations. The fine work still requires a professional.

Practical Application in Agencies

If you work in an agency or collaborate with them, these tools can improve several processes:

• Initial Meetings: Arrive with multiple visual proposals instead of just ideas
• Client Iterations: Show changes quickly without committing design hours
• Internal Brainstorming: Explore creative directions without time investment
• Proposal Documentation: Include mockups in commercial proposals

The Most Impressive Fact: Real Time Invested

Everything you see in this article was generated in less than an hour. That includes all the tests, discarded designs, and final selection.

Without AI, creating this amount of variations would be impossible for someone without design training. And even for a designer, it would take much more time.

How to Start Using These Tools

1. Experiment First with Internal Projects: Don't jump straight to clients
2. Create a Reference Library: Save websites and elements that work well
3. Document What Works: Note what type of instructions give better results
4. Involve the Design Team: Let them see these tools as allies, not threats

Conclusion: The Future Is Already Here

AI won't replace designers, but it is changing how we all work in the web sector. For agency teams, these tools can mean:

• More agile design processes
• Better communication between departments
• More creative options with less time investment
• More satisfied clients seeing their ideas materialized quickly

If you're coming to DrupalCamp Spain 2025 in Santiago, stop by my talk about automation and productivity in agencies using AI. I'll show more practical examples and share specific tricks for integrating these tools into daily workflow.

What matters isn't being an expert in AI or design. It's starting to experiment and finding how these tools can improve your way of working. The future isn't machines replacing us, it's them helping us be more efficient and creative.