If your inbox recycles the same five questions every day — "When does my order ship?", "What's your return policy?", "Can I exchange sizes?" — you already have the raw material for a complete FAQ page. The problem isn't content; it's the manual assembly: copy, categorize, write a clean answer, wrap it in HTML, repeat. Claude Code collapses that entire pipeline into a single command.
This tutorial walks through the full workflow: raw ticket list in, production-ready FAQ page out, with incremental updates handled automatically.
The Problem: FAQ Pages Rot Because They're Painful to Build
A good FAQ page is one of the highest-ROI assets a small team can ship. One well-answered question can deflect hundreds of support threads. But in practice, FAQ pages are usually stale, thin, and weirdly organized — because building them properly takes time nobody has.
The typical workflow looks like this: export 40 tickets from Intercom or Zendesk, open a blank doc, stare at the pile, spend 30 minutes grouping them into categories you immediately second-guess, write tentative answers in a tone that drifts sentence by sentence, then hand it to a developer to wrap in HTML. The whole thing takes half a day. And six weeks later, five new question types have appeared and nobody's updated the page.
I timed this on an M4 Mac with a list of 30 repeat questions. Average time from raw list to complete HTML draft: 40 seconds.
Section 1: Feed the Raw List Directly — No Formatting Needed
The first thing I tried was cleaning up my ticket export into a neat numbered list with consistent phrasing. That's wasted effort. Claude Code handles noise just fine.
Pull your repeat questions from wherever they live — Slack threads, a Gmail label, Zendesk exports, a sticky note on your monitor. Paste them raw. Incomplete sentences, typos, mixed languages, shorthand — all of it works.
claude 'Create a customer-facing FAQ page in HTML from these repeat support questions:
When does my order ship / What is the return policy / Can I exchange sizes /
Do you offer gift wrapping / How do I cancel my order / Is international shipping available /
How long does a refund take / Can I change my delivery address after ordering /
Do you have a loyalty program / How do I track my package'
What comes back is a fully structured HTML page: <section> tags per category, <details>/<summary> accordion elements for each Q&A pair, anchor links in a top nav, and sensible default answers flagged with [PLACEHOLDER] where you need to fill in specifics.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQ – Customer Support</title>
</head>
<body>
<nav>
<a href="#shipping">Shipping</a> |
<a href="#returns">Returns</a> |
<a href="#orders">Orders</a>
</nav>
<section id="shipping">
<h2>Shipping</h2>
<details>
<summary>When does my order ship?</summary>
<p>Orders placed before 2 PM [TIMEZONE] ship the same business day.
Orders after that cut-off ship the next business day. [ADJUST AS NEEDED]</p>
</details>
<!-- ... -->
</section>
</body>
</html>
You can paste this into your CMS or static site and it works immediately. The [PLACEHOLDER] pattern is intentional — Claude flags every answer that needs a real business decision rather than silently inventing a policy.
Section 2: Auto-Categorization and Section Reorganization
When you throw 50 questions at it, Claude automatically groups them. My test set of 30 questions came back sorted into Shipping, Payment, Exchanges & Returns, and Account — which is actually the grouping I would have chosen manually, minus the 30 minutes of deliberation.
If the auto-grouping doesn't match your mental model, one follow-up command fixes it:
claude 'Reorganize the FAQ sections into exactly these four categories:
Shipping & Delivery, Payments & Invoices, Exchanges & Returns, Account & Profile.
Add a relevant emoji icon to each section heading.'
The output respects your exact category names and drops the accordion structure into place. I tried pushing it to six categories on a thin question set — it handled it without creating empty sections, which was the behavior I expected to break.
The gotcha I hit: if your question list has genuine ambiguity — say, "How do I cancel?" could mean cancel an order or cancel a subscription — Claude will pick one bucket. Flag ambiguous questions manually if the distinction matters for your users. A quick comment in your input like # cancel = order cancellation only is enough to steer it.
Section 3: Tone Control and Brand Voice
Default output is neutral, slightly formal English. That works for most B2B contexts. For consumer brands, you usually want warmer copy.
claude 'Rewrite all FAQ answers in a friendly, conversational tone.
Use "you" and "we" throughout. Keep answers under 60 words each.
Avoid corporate phrases like "please be advised" or "kindly note".'
For a different axis — say you need the same content as an internal operations guide rather than a customer page:
claude 'Convert this customer FAQ into an internal CS agent guide.
Use imperative tone ("Tell the customer...", "Check the order dashboard...").
Add a "Common edge cases" note under each answer.'
One pass, two very different documents. What worked for me was keeping tone instructions in a faq_tone_brief.txt file and prepending it to any FAQ command — that way every regeneration stays consistent without retyping the brief.
claude "$(cat faq_tone_brief.txt) Now update faq.html with the questions below: ..."
Section 4: Incremental Updates Without Breaking the Page
This is where the workflow pays off long-term. New question types appear every few weeks. With the old approach, adding them meant hunting through HTML for the right <section>, inserting tags carefully, and praying you didn't break indentation. With Claude Code:
claude 'Add these three new questions to faq.html in the correct sections.
Check for duplicates with existing questions before inserting.
Sort each section alphabetically after updating.
New questions:
- Can I request a gift receipt?
- Do you ship to PO boxes?
- How do I get a duplicate invoice?'
Claude reads the existing file, identifies the right section for each question, checks that none of them duplicate existing entries, inserts the new <details> blocks, and re-sorts. It also returns a short summary of what it changed — useful for a quick sanity check before you push.
Pitfalls to avoid:
| Scenario | What breaks | Fix |
|---|---|---|
| Very long existing FAQ (200+ items) | Claude may miss a duplicate in a crowded section | Break file into per-section partials |
| Custom JavaScript accordion in existing file | Regeneration may overwrite JS hooks | Tell Claude "preserve all data-* attributes and JS event listeners" |
| Non-English questions in a mixed-language input | Answers may default to English | Specify 'Answer in the same language as each question' |
| Docker / remote dev environment | File path must be absolute | Use $(pwd)/faq.html instead of relative path |
Closing
A FAQ page is infrastructure. The companies with the lowest CS ticket volume aren't the ones with the fewest problems — they're the ones who documented the answers once and let that documentation do the work. The bottleneck was always the build time. Paste your ticket list, run one command, fill in the [PLACEHOLDER] values that need real policy decisions, and ship it today.
Next natural step: wire this into a weekly cron that pulls new tickets from your CS tool's API, appends them to a running questions file, and pings you with a diff of what Claude suggests adding. The FAQ stops being a document you update and starts being a system that updates itself.
🐦 Faster updates on X: @baegseungh7061
📚 More in this series: Code Intro
💌 Subscribe: Follow on X or grab the RSS
댓글
댓글 쓰기