· Martin Swoboda

Ich habe eine statische HTML-Seite mit einem Prompt zum editierbaren CMS gemacht

Webdesigner verlieren Tage damit, fertige Designs als CMS nachzubauen. So macht Neletos nativer MCP-Server das aus einem einzigen Prompt — inklusive Animationen und Custom-Cursor.
Ich habe eine statische HTML-Seite mit einem Prompt zum editierbaren CMS gemacht
MCPKI-AgentenWebdesignClaude CodeCMSNeleto

Ich habe eine statische HTML-Seite zum editierbaren CMS gemacht — mit einem Prompt

Es gibt diesen Moment, den jeder Webdesigner kennt. Das Design ist fertig. Es ist gut. Die Animationen laufen geschmeidig, die Typo sitzt, der Custom-Cursor macht sein Ding. Und dann stellt die Kundin die Frage, die dein Wochenende löscht:

„Kann ich das selbst bearbeiten?"

Jetzt bist du kein Designer mehr. Du bist CMS-Klempner. Du baust das Ganze in WordPress oder Contentful nach, mappst jede Überschrift auf ein Feld, kämpfst mit einer Template-Sprache, die du nicht magst, und irgendwo dabei brechen die Animationen und du verbringst einen Nachmittag damit, dein Scroll-Reveal wieder zum Laufen zu bringen. Eine Woche, weg. Das Design ist nicht besser geworden. Es ist nur editierbar geworden.

Ich habe Neleto unter anderem gebaut, um diese Woche zu killen. Dieser Beitrag zeigt dir wie — mit einem echten Beispiel zum Nachmachen.

Die 30-Sekunden-Version

Neleto ist das einzige CMS mit nativem MCP-Server. MCP (Model Context Protocol) ist das, was Tools wie Claude Code, Cursor und Windsurf direkt mit anderen Systemen sprechen lässt. Weil Neleto es nativ spricht, kann ein KI-Assistent dein CMS lesen und beschreiben — Layouts, Komponenten und editierbare Felder anlegen — ohne dass du ein einziges Admin-Formular anfasst.

Der Workflow wird also: Du machst dein HTML fertig, führst einen Prompt aus, und Neleto verwandelt es in eine vollständig komponentenbasierte Seite, auf der die Kundin jedes Wort und jedes Bild bearbeiten kann — während dein CSS, deine Animationen und dein JavaScript unangetastet mitwandern.

Nicht „KI-unterstützt". Ein Prompt, fertige Seite.

Das Beispiel

Ich habe eine kleine Design-Studio-Landingpage gebaut — nennen wir sie Studio Nordlys. Bewusst so etwas, das du tatsächlich ausliefern würdest: eine fixierte Nav mit Scroll-Zustand, ein Hero mit leuchtendem animiertem Blob und gestaffeltem Reveal, ein scrollender Marquee, ein About-Bereich mit animiertem Zähler, ein Vierer-Services-Grid mit Hover-States, eine Projektgalerie mit Bild-Zoom, ein dunkler Process-Bereich, ein großes Testimonial, ein CTA-Banner und ein Custom-Cursor, der dir am Desktop folgt. CSS-Variablen, Keyframes, ein IntersectionObserver, das volle Programm.

Eine Datei. Die Art Seite, die das „mach es editierbar"-Gespräch normalerweise schmerzhaft macht, weil so viel drinsteckt, das du nicht verlieren willst.

📥 Beispiel „Studio Nordlys" herunterladen — die HTML-Seite plus den vollständigen Prompt (.zip)

Der Prompt erledigt den langweiligen Teil

Der Trick: Das schwierige Wissen ist nicht das Design — das ist deins. Das schwierige Wissen ist, wie ein CMS seine Layouts, Komponenten, Templates und Felder strukturiert haben will, und all die kleinen Arten, es falsch zu machen. Dieses Wissen steckt also in einem Prompt.

Du zeigst Claude auf deine Datei:

Nutze den Neleto-MCP-Server, um @studio-nordlys.html als vollständig komponentenbasierte Seite umzusetzen. Jeder Inhalt muss über das CMS editierbar sein — nichts fest verdrahtet.

…und übergibst die Spezifikation. Von da an zerlegt Claude die Seite in Abschnitte, legt dein gesamtes globales CSS in ein Layout, macht aus jedem Abschnitt eine Komponente mit eigenem gekapseltem CSS und JS und — der entscheidende Teil — ersetzt jede Überschrift, jeden Absatz, jedes Label, jeden Link und jedes Bild durch ein benanntes, editierbares Feld. Aus deinem <h1>Design that moves people</h1> wird ein Feld „Überschrift" im CMS. Gleiches Markup, gleiches Styling, jetzt editierbar.

Es setzt die Seite in deiner ursprünglichen Reihenfolge zusammen, bindet Nav und Footer ins Layout ein, damit sie auf jeder Seite erscheinen, und gibt dir eine Live-URL. Deine Animationen laufen noch. Der Custom-Cursor folgt noch der Maus. Der Zähler zählt noch hoch. Weil nichts davon neu gebaut wurde — es wurde verschoben, intakt, an die richtigen Stellen.

Warum das anders ist als „KI-Website-Baukästen"

Zwei Gründe, und es sind die, auf denen ich immer wieder herumreite.

Du behältst dein Design. Das ist kein Generator, der aus einem Text-Prompt eine generische Seite erfindet. Er nimmt dein pixelgenaues HTML und bewahrt es. Die KI macht die CMS-Verkabelung, nicht die Art Direction. Das ist die richtige Arbeitsteilung — Maschinen sind gut im stupiden strukturellen Mapping, du bist gut im Geschmack.

Darunter steckt ein echtes CMS, in der EU gehostet. Wenn du fertig bist, loggt sich die Kundin in einen Admin ein, in dem jeder Abschnitt ein sauberes Panel mit Klartext-Feldern ist. Sie kann dein Layout nicht kaputt machen, weil das Layout kein Feld ist. Und weil Galerien und Listen als wiederholbare Komponenten gebaut sind, kann die Kundin selbst ein fünftes Projekt hinzufügen — nicht nur die vier bearbeiten, die du ausgeliefert hast. Bilder werden beim Upload automatisch skaliert, ein Kunde, der ein 6-MB-Foto einwirft, ruiniert also nicht deinen Performance-Score. Und es läuft auf Neletos Rust-Backend auf EU-Infrastruktur — kein US-Cloud-Act-Risiko, was deinen Kunden Jahr für Jahr wichtiger wird.

Zum Preis-Kontext: Ein solches Setup auf Contentful startet bei rund 109 €/Monat und klettert mit Sitzen schnell. Neleto startet kostenlos, mit bezahlten Tarifen ab 24 €/Monat. Für eine Agentur, die an Kunden weiterverkauft, ist genau diese Marge der Punkt.

Der ehrliche Teil

Ich tu nicht so, als wäre es kantenlose Magie.

Es funktioniert am besten auf einer sauberen, gegliederten Seite. Gib ihm ordentliche <section>-Wrapper und gruppiertes CSS, und die Umwandlung ist gestochen scharf. Gib ihm 4.000 Zeilen unbeschrifteten <div>-Brei, und du räumst etwas auf. Die Beispielseite ist absichtlich sauber — das ist die Lektion, nicht der Trick.

Gelegentlich wird ein Abschnitt doppelt umgewandelt, oder ein JavaScript-Effekt braucht einen Schubs zum erneuten Andocken, oder ein Feldname vertippt sich. Jedes davon lässt sich beheben, indem du das Symptom beschreibst — „dieser Abschnitt ist doppelt, aktualisiere ihn in-place" — nicht durch händisches Editieren von CMS-Interna. Der Prompt dokumentiert die häufigen Fälle bereits. Aber ich würde lügen, wenn ich sagte, es ist auf einer verzwickten Seite immer One-Shot-perfekt. Auf einer sauberen Seite ist es das im Grunde.

Und es macht deine Arbeit nicht für dich. Es schreibt keine Content-Strategie, repariert keine Barrierefreiheit, macht kein SEO. Es bewahrt, was du ihm gibst. Müll rein, editierbarer Müll raus.

Probier es

Wenn du Websites gestaltest und je eine Woche verloren hast, eine editierbar zu machen, ist das zwanzig Minuten deines Abends wert. Schnapp dir die Beispielseite und den Prompt, verbinde den Neleto-MCP-Server mit deinem Editor und sieh zu, wie ein fertiges Design zur kunden-editierbaren Seite wird, während du Tee kochst.

📥 Beispielseite + Prompt herunterladen (.zip)

Nächstes Mal, wenn jemand fragt „Kann ich das selbst bearbeiten?" — ja. Und es kostet dich einen Prompt, kein Wochenende.

Kostenlos starten auf neleto.io · das einzige CMS mit nativem MCP-Server, in der EU gehostet.

Weiterlesen