PRODUCT LIFECYCLE
首用引导Blank Slate Onboarding
空状态的一种进阶形态：不只说「暂无数据」，而是明确告诉用户第一步做什么，并直接给一个可点的入口。
效果预览
📁
还没有项目
创建第一个项目，只需 30 秒。也可以直接套用模板。
适合用在哪
新建项目/新建文件夹/未导入数据时。与普通空状态的区别是必须带行动指引。
容易踩的坑
- 给出三个以上同权重按钮，新用户反而不知道第一步该点哪个。
- 插图浮动动画未判断 prefers-reduced-motion，对晕动敏感用户不友好。
- 首用页和「筛选无结果」共用同一套文案，用户误以为数据丢了。
设计提示词 · Prompt
首用引导（Blank Slate Onboarding）：居中的插图位（46-64px 圆角方块，浅色渐变底 + 虚线描边，内放一个语义图标，可选轻微浮动动画），下面 11.5px 加粗标题（说结果，如「还没有项目」而不是「列表为空」），再下一行 9.5px 浅灰说明（说怎么做）。按钮区给 1 个主行动 + 1 个次要入口（如「从模板开始」+「导入已有数据」）。整块最大宽度 240-320px、文案不超两行，避免在空白页面上显得又空又啰嗦。
Blank Slate Onboarding: a centered illustration slot (a 46-64px rounded square with a light gradient background and dashed border, holding a semantic icon, optionally with a subtle floating animation), followed by an 11.5px bold title (state the outcome, e.g. "No projects yet" rather than "List is empty"), then a 9.5px light-gray line of explanation (say what to do). The button area offers 1 primary action + 1 secondary entry (e.g. "Start from a template" + "Import existing data"). Keep the whole block at a max width of 240-320px with copy no longer than two lines, so it doesn't feel both empty and wordy on a blank page.
常见搭配
同一页面里经常和「首用引导」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-blank">
<div class="lc-blank__ico">📁</div>
<b>还没有项目</b>
<p>创建第一个项目，只需 30 秒。也可以直接套用模板。</p>
<div class="lc-blank__acts">
<button class="d-btn d-btn--p d-btn--sm">新建项目</button>
<button class="d-btn d-btn--g d-btn--sm">用模板</button>
</div>
</div>
</div>