PRODUCT LIFECYCLE
上手清单Onboarding Checklist
把「如何用起来」拆成 3-5 个可勾选步骤，顶部有完成度进度条。把新用户推向「第一次获得价值」的最有效工具之一。
效果预览
开始使用1/3
✓创建你的第一个项目
✓邀请一位团队成员
✓开启自动部署
适合用在哪
注册后的仪表盘侧栏或欢迎页；任务管理、协作工具的激活期。
容易踩的坑
- 步骤超过 5 条且不折叠，新用户一眼看去像待办负担，完成率明显下降。
- 勾选状态只存在内存里，刷新或换设备后进度清零，用户会重复操作。
- 全部完成后清单仍常驻侧栏，占位又无价值，应给出庆祝并允许永久关闭。
设计提示词 · Prompt
上手清单（Onboarding Checklist）：白底细描边圆角卡，内边距 11-14px。顶部一行是标题 + 右侧「1/3」进度胶囊；下面一条 4px 圆角进度条，用宽度动画表现推进。每个步骤一行：左侧 15px 圆形勾选框（未完成是灰描边，完成后填充绿色并显示白勾），右侧 10px 文案；步骤文本与勾选框之间 gap 7px。已完成的步骤文字降为浅灰并加删除线，形成「走过去了」的视觉。清单项建议 3-5 条，超过 5 条要折叠。真实实现里点击可跳转到对应功能并高亮定位。
Onboarding Checklist: a white card with a thin border and rounded corners, padding 11-14px. The top row holds the title plus a "1/3" progress pill on the right; below it a 4px rounded progress bar that animates its width to show progress. Each step is one row: a 15px circular checkbox on the left (gray outline when incomplete; filled green with a white check when done) and 10px copy on the right, with a 7px gap between checkbox and text. Completed steps drop to light gray with a strikethrough, creating a "been there" visual. Keep the list to 3-5 items; collapse anything beyond 5. In a real implementation, clicking a step navigates to the corresponding feature and highlights it in place.
常见搭配
同一页面里经常和「上手清单」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-check">
<div class="lc-check__hd"><b>开始使用</b><span>1/3</span></div>
<div class="lc-check__bar"><i></i></div>
<div class="lc-check__i is-done"><em>✓</em>创建你的第一个项目</div>
<div class="lc-check__i"><em>✓</em>邀请一位团队成员</div>
<div class="lc-check__i"><em>✓</em>开启自动部署</div>
</div>
</div>