Turn Your App Into a Shareable Browser Demo

HTML Demo is a free skill for coding agents that builds a web page showing your app at work, step by step. It looks like a screen recording, but it's live HTML, so viewers can pause, scrub, and jump to any step, and it plays the same way every time.

What this helps you do

Skip the afternoon of recording and trimming a screen share. Tell your coding agent the three things a new user should see, and it builds a demo page you can put on your site or send as a link.

Because the demo is drawn in HTML instead of recorded:

• The text stays sharp at any size and on any screen.
• A steps bar under the window lets viewers jump straight to the part they care about.
• It can loop, pause, scrub, and freeze on a frame for a clean screenshot.
• It only plays while it's on screen, and people who turn on reduced motion see a still, finished frame for each step.

The skill comes from fil.design, and its files are also on GitHub.

Before you start

• A coding agent. The install commands below cover Claude Code and Codex.
• Your app's project folder. The skill copies real labels and layouts from your code, so the agent should be able to read it. Screenshots of each screen help too.
• Node.js on your computer, so the agent can preview the page and take screenshots to check its own work.
• A page that can run JavaScript. The demo is built with React or plain JavaScript, so it fits most websites.
• A place to host it if you want a link: your own site or any static hosting you already use.

Terms to know

• Skill: a folder of instructions and helper files your coding agent loads for one kind of job.
• Coding agent: an AI assistant that reads and writes files in your project, such as Claude Code or Codex.
• Step: one short part of the demo, such as "Pick a time." The skill uses 3 to 5 steps of 4 to 8 seconds each.
• Steps bar: the row of step names under the demo window. Click one to jump to it.
• Scrub: drag through the demo's timeline to any moment.
• Reduced motion: a device setting for people who prefer less animation. The demo shows each step's finished frame instead of playing it.

Step-by-step

1. Install the skill. Open your terminal and run the command for your agent. For Claude Code: curl -fsSL https://fil.design/skills/html-demo.zip -o /tmp/html-demo.zip && unzip -o /tmp/html-demo.zip -d ~/.claude/skills For Codex, swap ~/.claude/skills for ~/.codex/skills. You should now have a folder at ~/.claude/skills/html-demo.
2. Start a fresh session in your app's folder. In the terminal, go to your project and type claude. A new session picks up the new skill.
3. Pick the three moments. Write down the three things a new user should see, in order. For a booking app, that's "choose a service," "pick a time," and "see the confirmation."
4. Pick one example to use throughout. Choose one made-up customer, product, or project you own, and use it in every step. Don't show real customer data.
5. Paste the prompt from the next section and fill in the brackets. The agent studies your app's screens and wording, scripts the steps, builds the page, then takes screenshots and compares them with your real app.
6. Preview it. Ask the agent for the local preview link and open it in your browser. You should see a window playing your app, with the steps bar underneath.
7. Watch the whole thing, start to finish, before you share it. Click each step, drag the scrubber, and pause. Look for wrong labels, a pointer that clicks the wrong spot, or a step that ends half-drawn. Ask for fixes by step name.
8. Share it. Publish the page on your site or your usual hosting, and send the link to a teammate or a customer.

Copy this

Paste this into Claude Code (or Codex) with your app's project folder open. Replace every [BRACKETED] part.

Use the html-demo skill to make a short demo of my [APP NAME] as a live HTML window, not a video.

Show these steps, in this order:
1. [STEP ONE, e.g. Choose a service]
2. [STEP TWO, e.g. Pick a time]
3. [STEP THREE, e.g. See the confirmation]

Use one example the whole way through: [EXAMPLE, e.g. a haircut booking for "Sam" on Friday at 10am]. Copy every label, button, and message from my app's source code or these screenshots: [SCREENSHOT FOLDER OR "use the source"]. Don't invent any wording.

Put the steps bar under the window, plus Pause/Play and a scrubber so viewers can pause, scrub, and jump to any step. Build it as a standalone page I can host at [PAGE PATH, e.g. /demo]. Then take screenshots through every step, compare them with my real app, fix what doesn't match, and give me the preview link.

Things to know

• Watch it before you send it. The agent checks its own screenshots, but you know your app best. A wrong label or a broken step is easy to spot when you watch it once, start to finish.
• Keep it short. Three steps of a few seconds each is enough. The skill aims for 3 to 5 steps and about 18 to 30 seconds.
• Use real wording. The skill is built to copy labels from your app, not invent them. If you don't share the source or screenshots, the demo is more likely to look made up.
• It isn't a video file. The demo lives on a web page. If you need an MP4 for social media, record the page or use a screen recorder instead.
• It updates with your app. When a screen changes, ask the agent to update that step instead of re-recording anything.
• Cost and license: the skill is a free download. Its GitHub repository is MIT licensed. Your agent's usage still counts toward your plan.

If something goes wrong

• The agent doesn't seem to know the skill: confirm the html-demo folder is inside ~/.claude/skills, then start a new session.
• unzip or curl isn't found: install them, or tell your agent "Install the HTML Demo skill from https://fil.design/skills/html-demo" and let it do the install.
• Labels don't match your app: point the agent to the exact source files or screenshots for that screen and ask it to copy the wording.
• The pointer misses buttons: ask it to measure each target from the page instead of guessing positions, then re-check with screenshots.
• It looks squished on a phone: ask it to check the page at 390 pixels wide and remove any sideways scrolling.

Final check

Open your demo link on another device. It plays through all three steps, the steps bar jumps to each one, pause and scrub work, and every label matches your real app. If so, it's ready to send.