faq-page

FAQ 页面技能

生成一个包含可折叠手风琴分区、搜索和类别筛选的单页 FAQ。

工作流

1. 阅读当前生效的 DESIGN.md（已在上方注入）。为交互元素（手风琴标题、搜索输入框、类别标签）使用组件令牌。
2. 根据简述选择领域（例如 SaaS 产品、电子商务、服务），并围绕 3–4 个类别编写 12–18 条真实的 FAQ。
   • 边缘情况：
     • 如果简述提供的 FAQ 少于 8 条，请索要更多内容，或根据领域生成合理的问题。
     • 如果只有 1–5 条 FAQ，则跳过类别和搜索，显示简单列表。
     • 对于很长的回答（超过 100 个词），请拆分成段落或项目符号，以提高可读性。
3. 按以下顺序排列各部分：
   • 页眉——页面标题（“常见问题”或“帮助中心”），可选副标题（用 1 句话说明用户可以在此找到什么）。
   • 搜索栏——醒目的搜索输入框，带占位文本和图标。使用功能性 JS 实时筛选问题。
   • 类别筛选器——3–4 个胶囊样式按钮，用于按类别筛选（例如“账单”“账户”“技术”“常见问题”）。默认选中“全部”。
   • FAQ 手风琴——可折叠的问题与答案：
     • 问题以可点击的标题呈现，并带有展开/折叠图标（箭头或加号/减号）。
     • 默认隐藏答案，点击后以平滑动画展开。
     • 每个条目都带有用于筛选的 data-category 属性。
   • 页脚 CTA——“还有问题？”区域，带有联系链接或支持邮箱。
4. 编写单个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 和 JS 均内联。
   • 手风琴使用语义化 HTML（通过 <details> 和 <summary> 实现渐进增强，或使用带有正确 ARIA 属性的自定义 JS）。
   • 搜索会根据问题或答案中的匹配文本进行筛选。
   • 类别筛选器会根据 data-category 显示或隐藏问题。
   • 展开/折叠使用平滑过渡（max-height 或 grid-template-rows）。
   • 在页眉、搜索栏、类别筛选器、手风琴容器和页脚上添加 data-od-id。
5. 自检：
   • 问题具体且真实，不使用通用占位内容。
   • 答案简洁（2–4 句话）但完整。
   • 支持键盘导航（通过 Tab 在问题间切换，按 Enter 展开）。
   • 搜索不区分大小写，并根据匹配文本进行筛选。
   • 任意时刻只展开一个手风琴条目（可选，取决于 UX 偏好）。
   • 适配移动设备（手风琴标题易于点击，搜索易于使用）。

输出约定

在 <artifact> 标签之间输出：

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

在 artifact 前输出一个句子，之后不输出任何内容。

按类别划分的问题示例

账单

• 如何更新付款方式？
• 你们接受哪些付款方式？
• 可以退款吗？
• 如何取消订阅？

账户

• 如何重置密码？
• 可以更改电子邮箱地址吗？
• 如何删除账户？
• 取消后我的数据会怎样？

技术

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

常见问题

• [Product Name] 是什么？
• 如何开始使用？
• 你们提供客户支持吗？
• 在哪里可以查看服务条款？