{"slug": "i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt", "title": "I turned a static HTML page into an editable CMS site with one prompt", "summary": "A developer built Neleto, a CMS with a native MCP server that allows AI assistants to convert static HTML pages into editable CMS sites with a single prompt. The tool preserves original CSS, animations, and JavaScript while replacing hardcoded content with editable fields, enabling clients to edit content without breaking the design. The developer demonstrated the process by converting a complex design-studio landing page into a fully component-driven, editable site.", "body_md": "There's a moment every web designer knows. The design is done. It's *good*. The animations are smooth, the type is dialed in, the custom cursor does the thing. And then the client asks the question that deletes your weekend:\n\n**\"Can I edit this myself?\"**\n\nNow you're not a designer anymore. You're a CMS plumber. You rebuild the whole thing in WordPress or Contentful, you map every headline to a field, you fight a templating language you don't love, and somewhere in there the animations break and you spend an afternoon getting your scroll-reveal working again. A week, gone. The design didn't get better. It just became editable.\n\nI built Neleto partly to kill that week. This post shows you how — with a real example you can copy.\n\nNeleto is the only CMS with a **native MCP server**. [MCP (Model Context Protocol)](https://neleto.io/blog/what-is-mcp) is the thing that lets tools like Claude Code, Cursor and Windsurf talk to other systems directly. Because Neleto speaks it natively, an AI assistant can read and write your CMS — create layouts, components and editable fields — without you touching a single admin form.\n\nSo the workflow becomes: you finish your HTML, you run **one prompt**, and Neleto turns it into a fully component-driven site where the client can edit every word and image — while your CSS, your animations and your JavaScript carry over untouched.\n\nNot \"AI-assisted.\" One prompt, finished site.\n\nI made a small design-studio landing page — call it *Studio Nordlys*. It's deliberately the kind of thing you'd actually ship: a fixed nav with a scroll state, a hero with a glowing animated blob and a staggered reveal, a scrolling marquee, an about section with an animated stat counter, a four-up services grid with hover states, a project gallery with image zoom, a dark process section, a big testimonial, a CTA banner, and a custom cursor that follows you around on desktop. CSS variables, keyframes, an IntersectionObserver, the works.\n\nOne file. The kind of page that normally makes the \"make it editable\" conversation painful, because there's *so much* in there you don't want to lose.\n\n📥\n\n[Download the Studio Nordlys example — the HTML page plus the full prompt (.zip)]\n\nHere's the trick: the hard knowledge isn't the design — that's yours. The hard knowledge is how a CMS wants its layouts, components, templates and fields structured, and all the little ways you can get it wrong. So that knowledge lives in a prompt.\n\nYou point Claude at your file:\n\nUse the Neleto MCP server to implement\n\n`@studio-nordlys.html`\n\nas a fully component-driven page. Every piece of content must be editable through the CMS — nothing hardcoded.\n\n…and hand it the spec. From there Claude splits the page into sections, drops all your global CSS into a layout, turns each section into a component with its own scoped CSS and JS, and — the part that matters — replaces every headline, paragraph, label, link and image with a named, editable field. Your `<h1>Design that moves people</h1>`\n\nbecomes a \"Heading\" field in the CMS. Same markup, same styling, now editable.\n\nIt assembles the page in your original order, wires the nav and footer into the layout so they show on every page, and hands you a live URL. Your animations still run. The custom cursor still follows the mouse. The stat counter still counts up. Because none of that was rebuilt — it was *moved*, intact, into the right places.\n\nTwo reasons, and they're the reasons I keep harping on.\n\n**You keep your design.** This isn't a generator that invents a generic site from a text prompt. It takes *your* pixel-perfect HTML and preserves it. The AI does the CMS wiring, not the art direction. That's the right division of labor — machines are good at tedious structural mapping, you're good at taste.\n\n**It's a real CMS underneath, hosted in the EU.** When you're done, the client logs into an admin where every section is a clean panel of plain-language fields. They can't break your layout because the layout isn't a field. And because galleries and lists are built as repeatable components, the client can add a fifth project themselves — not just edit the four you shipped. Images get scaled automatically on upload, so a client dropping in a 6 MB photo doesn't tank your performance score. And it runs on Neleto's Rust backend on [EU infrastructure](https://neleto.io/blog/eu-hosting-compliance) — no US Cloud Act exposure, which matters more to your clients every year.\n\nFor context on price: a setup like this [on Contentful](https://neleto.io/blog/neleto-vs-contentful) starts around €109/month and climbs fast with seats. Neleto starts free, with [paid plans from €24/month](https://neleto.io/pricing). For an agency reselling to clients, that margin is the whole point.\n\nI'm not going to pretend it's magic with no edges.\n\nIt works best on a **clean, sectioned page**. Feed it tidy `<section>`\n\nwrappers and grouped CSS and the conversion is crisp. Feed it 4,000 lines of unlabelled `<div>`\n\nsoup and you'll do some cleanup. The example page is clean on purpose — that's the lesson, not the cheat.\n\nOccasionally a section converts twice, or a JavaScript effect needs a nudge to re-attach, or a field name gets mistyped. Every one of these is fixable by *describing the symptom* to Claude — \"that section is duplicated, update it in place\" — not by hand-editing CMS internals. The prompt already documents the common ones. But I'd be lying if I said it's always one-shot perfect on a gnarly page. On a clean page, it basically is.\n\nAnd it doesn't do your job *for* you. It doesn't write your content strategy, fix your accessibility, or do your SEO. It preserves what you gave it. Garbage in, editable garbage out.\n\nIf you design websites and you've ever lost a week making one editable, this is worth twenty minutes of your evening. Grab the example page and the prompt, connect the Neleto MCP server to your editor, and watch a finished design become a client-editable site while you make tea.\n\nNext time someone asks \"can I edit this myself?\" — yes. And it'll cost you a prompt, not a weekend.\n\n— **Start free at neleto.io** · the only CMS with a native MCP server, hosted in the EU.", "url": "https://wpnews.pro/news/i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt", "canonical_source": "https://dev.to/neletomartin/i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt-4ajl", "published_at": "2026-07-07 08:00:00+00:00", "updated_at": "2026-07-07 08:28:30.872643+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai", "large-language-models", "ai-products"], "entities": ["Neleto", "Claude", "MCP (Model Context Protocol)", "Claude Code", "Cursor", "Windsurf", "Studio Nordlys"], "alternates": {"html": "https://wpnews.pro/news/i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt", "markdown": "https://wpnews.pro/news/i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt.md", "text": "https://wpnews.pro/news/i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt.txt", "jsonld": "https://wpnews.pro/news/i-turned-a-static-html-page-into-an-editable-cms-site-with-one-prompt.jsonld"}}