Setting the Scene
While working on a large-scale content management project focused on a post type-driven FAQ system, I ran into a familiar problem: content without visual context. Each article existed in WordPress as an individual post, but none had featured images. When viewed, the page hosting the items felt bare and lacked character.
Creating bespoke visuals for every post simply was not scalable. It also was not a realistic task for a customer support team that might be managing the content. Using stock imagery did not feel appropriate either as this could lead to inconsistencies at scale. What I needed was a quick, consistent, and creative way to give each post a unique visual identity without having to design each image manually.
Analysing The Goal
Can I generate a library of geometric patterns using a handful of on-brand, reusable shapes created in Figma?
This led to a straightforward project goal: build a tool that could take a small set of icons, shapes, or tiles and produce unique image outputs through random combinations. The outcome would be a collection of custom thumbnails, ready to be used across WordPress posts.
AI-Powered Development
I started by sketching a wireframe of the intended user interface in Figma and then jumped into building the tool. With the help of ChatGPT, I prompted the creation of a lightweight browser-based application using HTML, CSS, and JavaScript. The tool allows me to:
- Upload image assets (SVG or PNG)
- Choose a grid size (from 2×2 to 8×8)
- Set canvas size, padding, and gaps
- Pick background colours and apply overlays
- Generate random pattern combinations and export them as JPG or PNG
ChatGPT used the wireframe as a reference and, with guidance, review and adjustments from me, delivered working code that covered all required functionality. From the initial design to a working version of the tool, the entire process took roughly an hour, including the creation of a basic asset set to test with.
Speeding Up Output
To take the tool further, I needed a way to generate images in bulk. I prompted the addition of a batch export feature, which became a turning point in terms of productivity. With a single click, I could generate a custom number of unique visuals in a matter of seconds, drastically reducing manual effort.
Encouraging Variation
Once the assets are uploaded, the tool arranges them in a randomised grid system. To offer even more creative flexibility, I added an optional colour overlay feature to enable duotone-style effects. This made it easy to produce multiple visual variants using a consistent palette. A single monotone asset set could now result in a wide variety of colour combinations.
Design and User Experience
The user interface was designed to be simple and intentional. I asked ChatGPT to reference modern UI libraries such as ShadCN and Radix, which led to a clean, minimal design. I later added subtle branding, including a signature orange highlight, and introduced accordion sections to hide or reveal generation settings. The interface now feels focused and perfectly aligned with my workflow. With sensible defaults set for WordPress post images, I simply load my assets, choose a background colour, and generate the number of images I need.
Integrating with WordPress
The final phase of the project focused on embedding the image outputs into my existing WordPress workflow. To ensure the system remained seamless for content editors and support staff, I developed a lightweight PHP-based solution that automatically assigns a randomly selected image from the generated collection each time a new help article is saved or published.
Again, AI-assisted, the script hooks into the post-saving process and pulls a visual from the pre-generated asset library of 256 images, attaching it as the featured image for the post. This means every new article is now instantly aligned with the visual identity of the site, without requiring any manual design input or additional effort from the person creating the content. This final step closed the loop between the creative tool and content management. It allowed me to scale visual consistency across the platform, ensure brand alignment, and empower non-designers to contribute high-quality content without sacrificing presentation.
Outcome
This tool proved to be the perfect solution. I can now:
- Quickly create reusable visuals for article thumbnails
- Maintain visual consistency across hundreds of posts
- Avoid repetitive or generic imagery
- Stay on-brand using existing assets created in Figma
Though simple, the project has had a big impact. It brings together design thinking, lightweight development, and practical problem-solving. It also serves as a reminder that custom tools do not need to be complex to be effective. Most importantly, it highlights the value of integrating AI into the creative process. What began as a quick sketch in Figma became a working solution within a few hours, something that would have felt out of reach or potentially un-justified in a pre-AI world.
This experience has changed how I think about reusing design assets, automating workflows, and building small, purpose-driven tools to solve specific challenges in my projects.
