Mat de Beschten bauen: Meng Erfahrung beim AI Showdown op Lovable.dev

Um Weekend vum 14.–15. Juni 2025 huet lovable.dev (einfach Lovable) – eng KI-baséiert „Vibe‑Coding“-Plattform – d’Benotzer weltwäit invitéiert, gratis Full‑Stack Webapps ze bauen, och ouni Programméierkenntnisser. Lovable erlaabt et, Applikatiounen duerch natierleche Sproochinput direkt am Browser ze generéieren.

Zesumme mat OpenAI, Anthropic an Google huet Lovable The AI Showdown organiséiert – e public Benchmarking-Event fir Top-Kodéierungs-KI-Modeller ze vergläichen. Fir 48 Stonnen konnt jiddereen gratis an ouni Limit all Lovable Tools a Modeller benotzen.

---

🚧 Meng Experimenter: Dräi Modeller, zwou Apps, ee Prompt

Fir d’Modeller ze testen, hunn ech zwou Uwendungen gebaut an déi selwecht Instruktiounen un all dräi AI-Modeller iwwermëttelt. Hei sinn déi Resultater:

🔊 1. Lux‑ASR‑Trial

Eng Sprooch‑zu‑Text App, déi et erlabt eng Sproochbotschaft op Smartphone oder Computer opzehuelen an per API un d’Lux‑ASR System vun der Universitéit Lëtzebuerg ze schécken.
Lux‑ASR erkennt automatesch Lëtzebuergesch, Franséisch, Däitsch, Englesch, Portugisesch a Spuenesch. D’Transkriptioun gëtt direkt um Écran ugewisen.

Screenshoten a Test-Links:

• https://google-speak-luxasr.lovable.app
• https://anthropic-speak-luxasr.lovable.app
• https://openai-speak-luxasr.lovable.app

🛑 2. Access‑Brake‑to‑API

En Proof of Concept, fir den abusiven Gebrauch vu gratis GenAI-Déngschter ze reduzéieren. D’App benotzt d’Applikatioun randomuser.me fir Foto, Numm, Alter an Adress vu fiktiven Profiler unbewiesen. E progressive Verzögerungs­mechanismus mëcht weider Requëten an där selwechter Session méi lues fir eng Iwwerlaaschtung vu Servicer ze vermeiden.

Screenshoten a Test-Links:

• https://random-user-viewer-by-anthropic.lovable.app
• https://random-profile-explorer-by-openai.lovable.app
• https://instant-profile-seeker-by-google.lovable.app

🌐 Bonus‑Erausfuerderung: Mobile‑First WordPress‑Viewer

Fir nach eng Kéier méi wäit ze goen an d’Fäegkeete vu Lovable mat realem Inhalt ze weisen, hunn ech dëse Prompt agereecht — ursprénglech bei Anthropic, mee wéinst héijer Serverlaascht hun ech misse bei OpenAI wiesselen.

Prompt:

“Create a Mobile First app that fetches the JSON content of a WordPress article from the REST API at admin.ki-leierbud.lu/?p=1008 and displays it as a properly formatted HTML page with the following features:

1. A fixed header (#003366 background) with the article title on the left and a language switcher (EN, FR, DE, PT, LB) on the right.
2. A fixed footer (#004080 background) with a 3-column grid showing the article’s tags.
3. A central content area (#E6F2FF background) displaying the article body with:
   • Blue, non-underlined links
   • Proper bullets for lists
   • Bold and italic text where applicable
   • UTF-8 support
4. All links should open in a new tab/window.
5. On language change, load the corresponding article:
   • EN > ?p=1008
   • FR > ?p=1012
   • DE > ?p=1017
   • PT > ?p=1014
   • LB > ?p=1020“

Zu menger Iwwerraschung huet d’App perfekt funktionéiert – ganz ouni Code‑Ännerungen. De generéierte Code gouf op mäi GitHub‑Kont eropgelueden

🔗  https://github.com/mbarnig/leierbud-article-viewer

an d’Live‑Versioun ass ëffentlech zougänglech ënner:

🔗  https://the-ai-showdown.lovable.app

Den nächsten Dag hunn ech e puer kleng HTML-Problemer mat Bullet-Lëschten an den <h1> bis <h6> Header-Tags bemierkt. Ech hu lovable.dev gefrot de Code ze kontrolléieren. Hei ass d’Äntwert:

Looking at your code, I can see the issue. The HTML content is being rendered with dangerouslySetInnerHTML, 
but the proper styling for HTML elements like headings, lists, etc. is not being applied correctly.

The problem is in the ArticleContent component. While you're using the prose class from Tailwind's typography plugin, 
it seems like the typography plugin might not be installed, or the styles aren't being applied properly to the rendered HTML content.

I've fixed the HTML styling issues by adding proper CSS rules for all HTML elements in the article content. 
Now headings (h1-h6) will display with different sizes, lists will show proper bullets/numbers, and all other HTML elements will be properly styled.

Hei ass de Link zur iwweraarbechter Applikatioun:

🔗 https://the-ai-showdown-rev1.lovable.app

📊 Wat kënnt elo?

Ech analyséieren aktuell d’Leeschtung vun den dräi Modeller an dëse Projekter. Ech plangen, eng detailléiert Vergläichsanalyse op de soziale Medien ze publizéieren a meng Resultater un de Lovable Content Challenge anzeschécken.

Bleift drun fir méi spannend Updates!