Turn an HTML + Tailwind prototype
into a CMS-driven site.

You have a static page from a designer or an AI tool. It looks right, and nobody but you can change a word of it. Here is how it becomes a site your client edits.

Updated September 20264 min readBy the Quilium team

In short

Keep your HTML and your Tailwind classes. Decide what the client will edit, declare it as fields and collections in YAML, replace the copy in your markup with Liquid tags, run the site locally, then push. The rendered page stays the same; an editor can now change it from a form.

1. Sort content from layout

Read the page with one question: what will someone want to change without calling you? The eyebrow, headline and intro of a hero become the fields of a content-type, a block editors drop into a page, and a project card repeated eight times becomes a collection. Classes, grid and spacing stay in the template, so editors never see styling options.

2. Create the site and check it out

Install the CLI (Node 20 or later), log in through the browser, create a site and pull its theme into a folder. site create waits for the deploy and prints the site ID, and init downloads the Liquid templates and the public/ assets. There is no framework to adopt. Your compiled CSS goes in public/ as it is; if you add Tailwind classes, rebuild it with your usual tool, or load Tailwind from its CDN while you prototype.

npm i -g quilium
quilium login

ID=$(quilium site create --name "Studio" --yes)
quilium init "$ID" --dir ./studio

3. Declare the model in YAML

A collection is a few lines of YAML, and the editing form is generated from it. The block that lists projects then reads the collection through a query field, where the sort and the limit stay configuration.

project:
  name: Projects
  objectName: Project
  sortable: true
  tabsets:
    main:
      name: Project
      fields:
        title:
          type: text
          label: Project title
        client:
          type: text
          label: Client

4. Turn the HTML into Liquid

Paste each section into its own file under elements/, keep one card and loop over the query. The classes do not change: the markup is yours, only the words and the images moved out.

{% if c.projectList and c.projectList.size > 0 %}
<div class="mt-14 grid md:grid-cols-3 gap-6">
  {% for project in c.projectList %}
  {% assign pImg = project.image[0].versions.standard.url %}
  ...
  {% endfor %}
</div>
{% endif %}

5. Run it, push it, publish

quilium run renders your local templates against the site's draft content and reads them from disk on every request, so the loop is save, reload. When the page matches the prototype, quilium push sends the templates and the Publish button in the back office sends the content live. Your client then edits labelled fields and reorders projects by dragging rows, without ever seeing a class or a template.

quilium run

The full walkthrough starts with the Quickstart and continues in Turn the work list into a collection.

Try it with a prototype you already have.

Create a site, check it out, port one section. Building is free, you pay when the site goes live.

Start building Read the quickstart