How to Build Interactive HTML Check-in Tools with Claude Code

Claude Code can generate interactive HTML pages that serve as workflow interfaces for batch decision-making. Instead of answering questions one at a time in the terminal, users ask Claude to build an HTML file with one card per question, text inputs for responses, and a “copy to clipboard” button at the end. The user opens the file in a browser, answers each question, copies all responses, and pastes them back into Claude for processing.

There’s a pattern that keeps showing up once you use Claude Code for real work: Claude generates a wall of questions or decisions, you answer them in the chat, and then Claude updates your files based on what you said. It works. But reading 10 prioritized questions in a terminal window and typing responses back one at a time is slow and a little miserable.

There’s a better version of this. You can ask Claude to turn that wall of questions into an HTML file, open it in your browser, answer each question in a real text input, and paste everything back when you’re done. The browser becomes your input form. Claude becomes your backend.

This post walks through the pattern using a chief-of-staff check-in as the example. But the pattern applies to any workflow where you’re making a batch of decisions.

What’s an HTML file in this context?

An HTML file is just a document your browser knows how to render. You’ve been opening them your whole life, usually from the internet. But you can also open a local one directly from your computer. No server, no internet required.

When Claude Code generates an HTML file and saves it to your filesystem, you can open it by typing open filename.html in your terminal, or by dragging it into any browser window. The URL in your browser will start with file:// instead of https://, which just means you’re reading a local file rather than a remote one.

That’s it. HTML file, opens in browser, works immediately.

What the chief-of-staff tool does

The /chief-of-staff command in Claude Code reads 15+ context files at once: your inbox, recent meetings, content drafts, social queue, task lists, experiments in progress. It synthesizes all of that into 10 prioritized questions tagged to your current goals.

The raw output is useful but overwhelming. Ten dense paragraphs with context, a question, and suggested actions for each one. Reading and responding to all of that in a terminal is doable but slow.

The upgrade is one sentence:

Can you build me an HTML page that walks through these one at a time?
I want to respond to each item in the browser and then paste everything back to you.

Claude builds the file. You open it. You answer questions. You paste back. Claude processes your answers and updates your state files.

What Claude actually builds

The HTML page Claude generates has a few pieces worth understanding:

One card at a time. Instead of showing all 10 questions as a scrolling page, the page shows one card and hides the rest. This is a small thing that makes a big difference. You’re not distracted by what’s coming. You just answer what’s in front of you.

contenteditable text areas. Each card has a text area where you type your response. The contenteditable attribute is what makes a plain HTML element behave like a text input. You click in the box, type your answer, and it holds what you wrote. No form submission, no page reload. Your response just sits there until you’re ready to move to the next card.

Quick-action chips. Each card includes a row of small buttons with common responses like “do it this week” or “hold for now.” Clicking one of these fills the text area automatically. They’re not required; you can ignore them and type whatever you want. But for questions where your answer is going to be one of four obvious options anyway, they save time.

A progress bar. A small bar at the top of the page shows where you are (3 of 10, 7 of 10). Trivial feature, but it helps you pace yourself. You know when you’re almost done.

A “copy to clipboard” button at the end. This is the part that closes the loop. After you answer the last question, the page compiles all your responses into a formatted markdown block and gives you a single button to copy everything. You switch back to your terminal, paste, and say “process these.” Claude reads your 10 responses and updates your tasks, drafts, and queues accordingly.

The copy-paste loop

The workflow that makes this useful is simple, but worth naming explicitly because it’s the key to why HTML views work well with Claude:

1. Claude generates structured output (questions, decisions, a plan)
2. You ask Claude to turn it into an HTML file
3. You open the file in your browser and fill in your responses
4. You use the “copy to clipboard” button to grab everything
5. You paste back into Claude and say what to do with it

The browser is doing the job of a UI. Claude is doing the job of the backend. You’re not writing code, you’re not setting up a server, you’re not installing anything. You asked Claude to make you a form and it made you a form.

Why this is better than answering in the terminal

A few reasons this workflow beats the plain chat version:

One question at a time is genuinely less cognitively heavy. When the terminal shows you all 10 items at once, you’re doing the organizational work yourself. The HTML page does that work for you.

Text areas in a browser behave better than chat input for longer answers. You can type a few sentences, reread them, fix a word, and move on. In a chat input, long responses feel awkward.

The compiled output at the end is clean. Instead of 10 separate messages scattered through a chat thread, you get one formatted block. Claude reads it as a unit and processes it as a unit.

The broader pattern

This works for any “batch decisions” workflow, not just chief-of-staff check-ins. Some examples:

Content review. You have 8 draft posts in a queue. You want to decide for each one: publish, revise, or kill. Claude reads the drafts, generates an HTML review page, you click through and mark each one, you paste back the results.

Project triage. You have 12 open tasks. You want to categorize each as “this week,” “this month,” or “backlog.” Same pattern.

Feedback review. You got 15 responses to a survey. You want to decide what to act on. Claude builds a page with one response per card, you write a note on each, you paste back what you want to do.

The shape is always: AI generates structured items, you answer in a UI, you paste back, AI processes. The HTML page is just the cleanest way to do the answering step. This same pattern shows up in How to Build Emails with Claude Code and MJML, where you iterate on email design in the browser before converting.

How to prompt for this

The exact prompt matters less than the pattern. After Claude generates whatever bulk output you’re working with, say something like:

Build me an HTML file that walks through these one at a time.
One card per item. Text area for my response.
Compile all responses at the end with a copy button.

You can be more specific if you want (add quick-action buttons for common responses, show priority level on each card, use a dark theme). But the three-line version works.

Save the file somewhere findable. Claude defaults to the current directory. Type open filename.html in your terminal. Answer your questions. Copy. Paste back.

Further reading

• Claude Code documentation for an overview of what Claude Code can do and how to set it up
• MDN on contenteditable if you want to understand how the text areas work under the hood
• MDN on the Clipboard API for how “copy to clipboard” works in browsers
• Code for Creatives if you want to go deeper on using Claude Code as a daily work tool

Common Questions

Can Claude Code generate interactive HTML pages?

Yes. Claude Code can write a complete HTML file with interactive elements like text inputs, buttons, and progress bars. The file runs locally in any browser with no server required. Users open it by typing open filename.html in the terminal.

How do I get my answers from an HTML page back into Claude Code?

The HTML page includes a “copy to clipboard” button that compiles all responses into formatted markdown. Click the button, switch to your terminal, paste the content, and tell Claude to process it. Claude reads everything as a single block.

What is the contenteditable HTML attribute?

contenteditable is an HTML attribute that makes any element behave like a text input in the browser. Adding contenteditable="true" to a paragraph or div lets users click and type directly. No form submission or page reload is needed.

Can I use Claude Code HTML pages for project triage?

Yes. The pattern works for any batch of decisions: content review, project triage, survey response analysis, or feedback review. Claude generates one card per item, the user responds in the browser, and Claude processes the compiled output.