I’ve been experimenting with AI-generated mockups lately. Describe what I want, the AI builds HTML/CSS, and I see it in my browser. HTML and CSS are great at this; they’re well established and simple to work with, avoiding any pollution in the agent’s context window.

I’ve tried this a handful of times over the past year, with varied results. But, with each new model (like Opus 4.5) the results get better—but they still fall short of reality. They get parts right, but the composition is wrong.

For example, AI will often try to make its own icons instead of using the @wordpress/icons package. This can end up with some mix of real and made up icons, or even a really abstract interpretation of the WordPress logo.

At a glance, it’s close. But if you look for a second, the issues become apparent. This is a decent success, but took a lot of back-and-forth with the agent.

In previous attempts, I’ve combined the full WordPress and Gutenberg source code in my project. My thinking was this would give AI more context; it could see the real components and tokens as a reference. However, I think this adds more confusion; more possible paths for the agent to get lost chasing.

WordPress is massive. Thousands of components. 20+ years of evolution. Saying “make it look like WordPress” doesn’t narrow things down. The AI has seen WordPress—probably too much of it. Old admin styles. Classic editor. Block editor. Marketing sites. Plugin UIs. It’s all WordPress.

So it guesses. And guessing means wrong spacing, wrong colors, layouts that feel off in ways that are hard to articulate but obvious when you see them.

The AI needed better context.

Design Skills

AI assistants can learn new capabilities through skills — structured instructions that give them specialized knowledge. You drop a markdown file in a folder and suddenly the AI knows how to do something it couldn’t before. If you remember the movie The Matrix, there’s a famous scene where Neo (main character, played by Keanu) is jacked into the matrix, and suddenly learns kung-fu thanks to an injection in his digital brain. You can think of your AI as Neo, and you can teach it just about anything.

I built two skills for design work:

design-mockups teaches the AI a design process. Start with style exploration — multiple concepts with different aesthetics. Pick a winner. Then build out page templates in that direction. Then iterate on specific sections. It includes a local preview server with a gallery UI so you can see all your mockups in one place and preview them on your phone.

wordpress-mockups gives the AI reference material for Gutenberg UI. It includes:

  • Design tokens: all the CSS custom properties from @wordpress/components. Colors, spacing, typography, shadows.
  • 321 SVG icons: the full icon library, ready to copy inline.
  • Component HTML/CSS: buttons, inputs, panels, modals, toolbars, tabs. Twelve mock components so far.
  • Layout patterns: complete examples like the Site Editor header, with composition rules. “The block inserter is always primary blue.” “The document bar is 450px wide and absolutely centered.” “Site icon is 60×60, flush left, no border radius.”

It’s early days; these skills have existed for about a day. They’ve barely been used, let alone battle-tested.

But the first results are promising. After adding the Site Editor header pattern, the next mockup came out looking like actual WordPress. The feedback loop got shorter. Instead of correcting composition, I could focus on the actual design ideas.

That’s the hope anyway. We’ll see if it holds up.

You can find these skills on GitHub: github.com/shaunandrews/agent-skills

The design-mockups skill is framework-agnostic — useful for any web design work, not just WordPress.

Feedback welcome. I’d love to know if these help you.