Microtool for the Helix Combat Series: a design tool built into the website backend

The challenge: announcements during live operations

For a fight series like the Helix Combat Series, the roster changes constantly. New fighters confirm at short notice, matchups change, sponsors join. And all of it needs to go out immediately: on the website, in the Instagram story, on the fight card.

Traditional design templates quickly become a bottleneck. Our guide to commissioning a corporate design explains how to establish a consistent set of rules for layouts like these. Every change means opening a file, replacing an image, adjusting text, exporting and uploading. With 12 fights at an event and three layout variants per fight (portrait, versus, fight card row), that adds up to dozens of manual steps for every small change. That was exactly what we wanted to move away from.

What we built: a design tool in the website backend

We developed a custom website backend for Helix that brings all the fight-related logic together in one place. Web design tech stack: Webflow, WordPress, Lovable explains why we chose Lovable over WordPress for this. The core elements:

• Fighter database with image, name, nationality, club and fight record. New fighters come straight in from the application forms and are approved by the editors.
• Image pipeline built into the backend: upload a fighter portrait, then click to crop it, remove the background and convert it to the brand's black-and-white style. No Photoshop, no extra steps, no waiting for the design team.
• Central data sources for fighters, fights, events and sponsor logos. Everything is stored in one place and referenced throughout the system.
• Design tool on top: editors select a fight and the tool builds the graphic in real time. An individual portrait, Fight A vs B or a complete fight card with every bout at the event, all available as a print-ready Instagram graphic in one click.
• Dark and light layouts for different event series, giving tournaments a clear visual distinction.

The design tool in action: select a fighter, choose a layout, and the Instagram graphic is ready. No Photoshop, no design back-and-forth.

Why this changes things for the organisers

The real benefit is not the attractive UI, but the time saved and consistency gained. Here is what that looks like day to day:

Real-time data: every graphic is always up to date

The most important effect: the graphics are not static exports, but a live view of the backend data. If a fighter's name, a sponsor or a fight changes, the next version of the graphic automatically reflects it.

One click, a complete fight card: select the event, export, done. No graphic designer, no errors, always generated live from current website data.

In practice, that means:

1. A new sponsor joins. Upload the logo in the backend, assign it to the event, done. All future fight cards display it.
2. A fight is cancelled at short notice. Deactivate the fight in the backend, export a new fight card, post it to the story.
3. A fighter changes clubs. Change one field in the backend, and every portrait shows the current club.

This means editors never have to deal with an old version of a graphic still circulating somewhere after it has become outdated.

Websites with microtools instead of standard site builders

Most website owners eventually realise that a site builder can handle the marketing site, but anything beyond that becomes difficult. Editorial workflows, databases with relationships, recurring graphics tasks, custom configurators. This is exactly where we use microtools: small, specialised web components that connect to the existing website and handle one specific job.

The approach matters: we do not replace the website with a heavyweight web app. We let the website remain a website and add a microtool wherever day-to-day work calls for one. For website owners with complex requirements, this is the pragmatic middle ground between "a site builder is not enough" and "we are rebuilding everything".

Typical microtool applications we build for websites:

• Editorial tools for recurring layout tasks, as with Helix
• Configurators and price calculators that generate quotes directly from customer data (see our own price calculator)
• Booking and scheduling tools with custom logic, connected to a CRM or ticketing system
• Internal dashboards for client areas, protected by a login alongside the public website
• Import and sync tools connecting the website and back-office systems

Why we build tools like this with Lovable

A microtool like this is exactly why we keep Lovable in our toolkit. Standard CMS platforms such as WordPress or site builders such as Webflow take you a long way with a standard website, but custom data models, editorial workflows and tightly integrated tools quickly make things fiddly or expensive.

With Lovable, we build the backend, database, image pipeline and design tool in one go. Directly connected to the website, without relying on plugins or isolated systems that need synchronising. For micro-apps that work closely with a website, it is currently our preferred choice.

We explain in detail which stack we choose and when in our tech stack comparison: Webflow, WordPress, Lovable.

Which clients benefit from this

A backend tool like Helix's pays off wherever the same layout task recurs with slight variations. Typical examples:

• Event and tournament organisers with changing line-ups
• Sports leagues with regular matchup announcements
• Media companies with frequent publishing schedules and recurring formats
• Cultural organisations with constantly changing programmes, artists and ensembles
• Education and conference organisers announcing speakers

In all these cases, recurring graphics take up a huge amount of time that a custom tool can reduce to a fraction.

If you would like a rough idea of what a website with additional tools would cost with us, our price calculator gives you an initial estimate. Custom microtools require a separate quote, which we scope carefully with you. We are based in Cologne and work as a web design agency in Cologne with clients across the German-speaking region.