Publishing Claude prototypes to GitLab Pages

How to deploy interactive Claude prototypes as live websites using GitLab Pages for sharing and usability testing.

GitLab team members are experimenting with Claude for prototyping and have been impressed by what it can produce. Interactive charts, sortable tables, filtering, popovers, even a simulated GitLab Duo Chat panel. But once the prototype is ready, it raises the question: how do you actually share it with someone? With Figma and Figma Make, you can generate a shareable link and send it to stakeholders. With Claude, the prototype lives inside the Claude interface with no easy way to send someone a URL.

A few of us ran into this same problem, and GitLab Pages turned out to be a boring solution. This guide walks through how to deploy a Claude prototype as a live website that anyone can access.

Why GitLab Pages

Claude generates fully interactive components, but they live inside the Claude interface as an artifact and can’t be shared directly. Even prototypes built with Claude Code need somewhere to be hosted. GitLab Pages lets you host static websites from a GitLab repository, and since a Claude prototype is just HTML, CSS, and JavaScript, it deploys without needing a backend or database.

It also means you’re dogfooding GitLab’s own tools, and keeping prototypes in GitLab makes it easier for the whole team to collaborate, fork, and iterate on each other’s work.

Once it’s live, you can share the prototype with anyone through a link, use it for unmoderated usability testing without scheduling calls, keep every iteration version-controlled in Git, and update the site just by committing a change. Updates are usually live within two minutes.

Starter template

If you’d rather skip the manual setup, there’s a ready-made template you can fork:

gitlab.com/diegocapetown/claude-pages-template

Fork it, replace the contents of src/main.jsx with your Claude-generated code, commit, and your prototype will be live within minutes. The .gitlab-ci.yml is already configured.

Note: This template is set up for React-based prototypes, which is what Claude generates by default. If your prototype uses a different structure, follow the manual setup steps below instead.

The step-by-step guide below explains how everything works if you’d prefer to understand what’s happening under the hood.

Step-by-step setup

Before you begin

These steps assume that you have already built your prototype in Claude.

Create your GitLab project

You will need a project per prototype. You can manage multiple prototypes under one project but that is out of scope for this tutorial.

  1. Create a new blank project on GitLab.com under your personal namespace.
    1. Set the visibility to Public if you want anyone to access the site without logging in.

Add your prototype file

This step copies the Claude prototype to a file in GitLab

  1. Click New file to add a new file to the repository
  2. Name the file index.html
  3. Insert the code of the prototype into file contents
    1. Go to your Claude prototype
    2. Click Copy code button
    3. Go to the file editor in GitLab and paste the code
    4. Click Commit changes to save the file

Add the CI/CD configuration

This step will ensure that your file will be deployed to GitLab Pages.

  1. Create a .gitlab-ci.yml file at the root of the project:
pages:
  stage: deploy
  script:
    - echo "Deploying to GitLab Pages"
    - mkdir public                      # GitLab Pages deploys files under the /public folder
    - cp index.html public/             # copies the prototype file to the public folder
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == "main"

Deploy

  1. Commit both files. The pipeline runs automatically and your site will be live within a couple of minutes at https://<your-username>.gitlab.io/<project-name>.
  2. Go to Settings → General → Pages and set access to Everyone. “Everyone With Access” sounds like it means everyone, but on GitLab.com it actually means everyone with a GitLab account. For fully public access with no login required, you need the explicit Everyone setting. See GitLab Pages access control for more details. This is the step that’s easy to miss.

Tips

Test at full browser width. Claude artifacts render in a constrained iframe. When your prototype goes live on Pages at full width, the layout may behave differently. Worth checking both sizes.

Updating is fast. Edit the file in GitLab, commit, and the pipeline redeploys automatically. Usually live within two minutes.

Forking existing prototypes. If a colleague has built a prototype that works for your use case, you can fork their project and adapt it rather than starting from scratch.

Examples from the Product Design team

If you’ve published a prototype to GitLab Pages, feel free to add it to this list by submitting an MR.

Last modified April 23, 2026: Simplify single file prototype guide (e9f66a02)
View page source - Edit this page - please contribute. Creative Commons License