PRODUCT LIFECYCLE
功能引导Product Tour / Coachmark
用半透明遮罩压暗整个界面，只把要讲的那个控件挖亮，旁边弹出说明气泡并标出第几步。
效果预览
1 / 3
在这里发布点一下就会自动部署到线上。
适合用在哪
功能复杂的产品首次进入时，分步介绍 2-4 个关键入口。每步只讲一件事，允许跳过。
容易踩的坑
- 一次引导超过 4 步，用户多半在第 2 步就点跳过，后面的讲解全白做。
- 气泡没做视口边缘避让，目标靠近屏幕右侧时说明文字被裁掉一半。
- 引导期间焦点仍在背后页面，键盘和读屏用户无法读到气泡内容或关闭它。
设计提示词 · Prompt
功能引导（Product Tour / Coachmark）：遮罩用一个大范围的 box-shadow 扩散实现——目标元素设 box-shadow: 0 0 0 2px 主色, 0 0 0 99px rgba(23,23,27,.42)，这样只有它能被看见，其余全被压暗（比再叠一层绝对定位遮罩更省事且不会挡住目标）。说明气泡放在目标旁，深色底、白字、圆角 8px、内边距 7-9px，用一个小方块 rotate(45deg) 做指向箭头；气泡内是小标题 + 一行说明，右上角常放「1/3」与关闭按钮。步骤间提供上一步/下一步/跳过。多点引导要记录进度到 localStorage，避免每次登录都弹。
Product Tour / Coachmark: build the overlay with a wide box-shadow spread — give the target element box-shadow: 0 0 0 2px primary, 0 0 0 99px rgba(23,23,27,.42), so only it stays visible and everything else is dimmed (simpler than stacking an absolutely positioned overlay, and it never covers the target). Place the explanation bubble next to the target: dark background, white text, 8px radius, 7-9px padding, with a small square rotated rotate(45deg) as the pointer arrow; inside, a short heading plus one line of explanation, with "1/3" and a close button usually in the top-right corner. Provide Previous / Next / Skip between steps. For multi-step tours, save progress to localStorage so it doesn't pop up on every login.
常见搭配
同一页面里经常和「功能引导」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-tour">
<div class="lc-tour__bar"><i></i><i></i><i></i></div>
<div class="lc-tour__blk"></div>
<div class="lc-tour__blk"></div>
<div class="lc-tour__blk lc-tour__blk--s"></div>
<div class="lc-tour__step">1 / 3</div>
<div class="lc-tour__hl"></div>
<div class="lc-tour__tip"><em></em><b>在这里发布</b><span>点一下就会自动部署到线上。</span></div>
</div>
</div>