CONVERSION CTA
常见问题手风琴FAQ Accordion
一列可展开的问答，默认展开第一条——消化购买前的最后疑虑。
效果预览
免费版和付费版的核心区别？⌄
免费版可建 3 个项目和 1 个自动化流；付费版解锁无限项目、优先渲染和团队协作。
可以随时取消订阅吗？⌄
数据存在哪里，安全吗？⌄
适合用在哪
定价页下方、商品详情页、落地页尾部、帮助中心。
容易踩的坑
- 问题行用 div 加 click 事件，没有 button 和 aria-expanded，键盘无法展开。
- 折叠内容用 display:none，浏览器页内搜索搜不到答案，可改用 hidden="until-found"。
- FAQPage 结构化数据里的问答与页面可见内容不一致，会被搜索引擎判为违规。
设计提示词 · Prompt
常见问题手风琴（FAQ Accordion）：一列白底描边圆角条目，问题行右侧一个旋转 180° 的 V 形箭头；展开时该项描边和标题变品牌色，答案区用 grid-template-rows 0fr→1fr 过渡展开（比 max-height 流畅）。默认展开第一条引导阅读。问题选型：按"购买决策链"排序——价格相关 → 功能边界 → 数据安全 → 退款政策，8 条以内。答案 2-3 行直接给结论，不要"请联系客服"。整组加 schema.org FAQPage 结构化数据，可白嫖搜索结果富摘要。
FAQ Accordion: a column of white, bordered, rounded items, each question row with a V-shaped chevron on the right that rotates 180°; when expanded, that item's border and title turn brand color, and the answer area expands via a grid-template-rows 0fr→1fr transition (smoother than max-height). Expand the first item by default to invite reading. Choosing questions: order them along the "purchase decision chain" — pricing → feature limits → data security → refund policy, 8 items max. Answers give the conclusion directly in 2-3 lines, never "please contact support". Add schema.org FAQPage structured data to the whole group to get rich search snippets for free.
常见搭配
同一页面里经常和「常见问题手风琴」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-faq">
<div class="d-faq__item is-open">
<div class="d-faq__q">免费版和付费版的核心区别？<span class="d-faq__chev">⌄</span></div>
<div class="d-faq__a">免费版可建 3 个项目和 1 个自动化流；付费版解锁无限项目、优先渲染和团队协作。</div>
</div>
<div class="d-faq__item">
<div class="d-faq__q">可以随时取消订阅吗？<span class="d-faq__chev">⌄</span></div>
</div>
<div class="d-faq__item">
<div class="d-faq__q">数据存在哪里，安全吗？<span class="d-faq__chev">⌄</span></div>
</div>
</div>