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

  1. Build your prototype in Claude. When it’s ready, click the copy code button on the artifact.
  2. Create a new blank project on GitLab.com under your personal namespace. Set the visibility to Public if you want anyone to access the site without logging in.

Add your prototype file

  1. Create a public/ directory in your project and add your HTML file as public/index.html.
  2. Use Edit single file rather than the Web IDE. The Web IDE can sometimes place files in the wrong folder, and for a single-file project, editing the file directly is more reliable.

Add the CI/CD configuration

  1. Create a .gitlab-ci.yml file at the root of the project:
pages:
  stage: deploy
  script:
    - echo "Deploying to GitLab Pages"
  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

Use “Edit single file” for updates. The Web IDE can place files in the wrong folder when working with simple project structures. For single-file prototypes, editing the file directly is more reliable.

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 1, 2026: Add tutorial: Publishing Claude prototypes to GitLab Pages (84d3bb99)
View page source - Edit this page - please contribute. Creative Commons License