faq-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

FAQ Page Skill

FAQ页面技能

Produce a single FAQ page with collapsible accordion sections, search, and category filtering.

生成一个包含可折叠手风琴板块、搜索和分类筛选功能的单页FAQ页面。

Workflow

工作流程

Read the active DESIGN.md (injected above). Use the component tokens for interactive elements (accordion headers, search input, category pills).
Pick the domain from the brief (e.g., SaaS product, e-commerce, service) and write 12–18 real FAQ entries across 3–4 categories.
- Edge cases:
  - If the brief provides fewer than 8 FAQs, ask for more content or generate realistic questions based on the domain.
  - For 1–5 FAQs, skip categories and search; show a simple list.
  - For very long answers (>100 words), break into paragraphs or bullet points to maintain readability.
Sections, in order:
- Header — page title ("Frequently Asked Questions" or "Help Center"), optional subtitle (1 sentence explaining what users can find here).
- Search bar — prominent search input with placeholder text and icon. Functional JS to filter questions in real-time.
- Category filters — 3–4 pill-style buttons to filter by category (e.g., "Billing", "Account", "Technical", "General"). "All" selected by default.
- FAQ accordion — collapsible question/answer pairs:
  - Question as clickable header with expand/collapse icon (chevron or plus/minus).
  - Answer hidden by default, expands on click with smooth animation.
  - Each entry has
```
data-category
```
    attribute for filtering.
- Footer CTA — "Still have questions?" section with contact link or support email.
Write a single HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , CSS and JS inline.
- Accordion uses semantic HTML (
```
<details>
```
  and
```
<summary>
```
  for progressive enhancement, or custom JS with proper ARIA attributes).
- Search filters questions by matching text in question or answer.
- Category filters show/hide questions based on
```
data-category
```
  .
- Smooth transitions for expand/collapse (max-height or grid-template-rows).
- ```
data-od-id
```
  on header, search, categories, accordion container, footer.
Self-check:
- Questions are specific and realistic (not generic placeholders).
- Answers are concise (2–4 sentences) but complete.
- Keyboard navigation works (Tab through questions, Enter to expand).
- Search is case-insensitive and filters by matching text.
- Only one accordion item expanded at a time (optional, depends on UX preference).
- Mobile-friendly (accordion headers are tappable, search is usable).

阅读当前的DESIGN.md（已注入上方）。为交互元素（手风琴标题、搜索输入框、分类标签）使用组件令牌。
从需求中确定领域（如SaaS产品、电商、服务类），并撰写12–18条真实的FAQ条目，分为3–4个类别。
- 特殊情况：
  - 如果需求提供的FAQ少于8条，请求补充内容或基于该领域生成贴合实际的问题。
  - 若只有1–5条FAQ，跳过分类和搜索功能，展示简单列表。
  - 对于过长的答案（超过100词），拆分为段落或项目符号以保持可读性。
页面板块顺序：
- 页眉——页面标题（“常见问题”或“帮助中心”），可选副标题（1句话说明用户可在此找到什么内容）。
- 搜索栏——显眼的搜索输入框，带有占位文本和图标，具备实时筛选问题的功能JS。
- 分类筛选器——3–4个胶囊样式按钮，按类别筛选（如“账单”、“账户”、“技术”、“通用”）。默认选中“全部”。
- FAQ手风琴——可折叠的问答对：
  - 问题作为可点击标题，带有展开/折叠图标（ Chevron或加减号）。
  - 答案默认隐藏，点击后平滑展开。
  - 每个条目带有
```
data-category
```
    属性用于筛选。
- 页脚CTA——“还有疑问？”板块，包含联系链接或支持邮箱。
编写单个HTML文档：
- 包含
```
<!doctype html>
```
  到
```
</html>
```
  的完整结构，CSS和JS内嵌。
- 手风琴使用语义化HTML（
```
<details>
```
  和
```
<summary>
```
  实现渐进式增强，或使用带有合适ARIA属性的自定义JS）。
- 搜索功能通过匹配问题或答案中的文本进行筛选。
- 分类筛选器基于
```
data-category
```
  显示/隐藏问题。
- 展开/折叠时使用平滑过渡效果（max-height或grid-template-rows）。
- 页眉、搜索栏、分类、手风琴容器、页脚需添加
```
data-od-id
```
  属性。
自我检查：
- 问题具体且贴合实际（非通用占位符）。
- 答案简洁（2–4句话）但完整。
- 支持键盘导航（Tab键切换问题，Enter键展开）。
- 搜索不区分大小写，可通过匹配文本筛选。
- 同一时间仅展开一个手风琴项（可选，取决于UX偏好）。
- 适配移动端（手风琴标题可点击，搜索功能易用）。

Output contract

输出约定

Emit between

<artifact>

tags:

<artifact identifier="faq-page" type="text/html" title="FAQ Page">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

在

<artifact>

标签内输出：

<artifact identifier="faq-page" type="text/html" title="FAQ Page">
<!doctype html>
<html>...</html>
</artifact>

在artifact前写一句话，之后无内容。

Example questions by category

按分类划分的示例问题

Billing

How do I update my payment method?
What payment methods do you accept?
Can I get a refund?
How do I cancel my subscription?

Account

How do I reset my password?
Can I change my email address?
How do I delete my account?
What happens to my data after I cancel?

Technical

What browsers do you support?
Is there a mobile app?
How do I export my data?
What are your API rate limits?

General

What is [Product Name]?
How do I get started?
Do you offer customer support?
Where can I find your terms of service?

账单

如何更新我的付款方式？
你们支持哪些付款方式？
我可以申请退款吗？
如何取消我的订阅？

账户

如何重置我的密码？
我可以更改邮箱地址吗？
如何删除我的账户？
取消订阅后我的数据会如何处理？

技术

你们支持哪些浏览器？
有移动应用吗？
如何导出我的数据？
你们的API速率限制是多少？

通用

[产品名称]是什么？
如何开始使用？
你们提供客户支持吗？
在哪里可以找到你们的服务条款？