npx skills add https://github.com/pbakaus/impeccable --skill onboard调用 /frontend-design — 它包含设计原则、反模式以及上下文收集协议。在继续之前请遵循该协议 — 如果尚无设计上下文,你必须先运行 /teach-impeccable。此外,请收集:你希望用户达到的“顿悟时刻”,以及用户的经验水平。
创建或改进引导体验,帮助用户快速理解、采用产品并取得成功。
理解用户需要学习什么以及原因:
识别挑战 :
理解用户 :
定义成功 :
关键:引导应让用户尽快获得价值,而不是尽可能多地教授所有内容。
遵循以下核心原则:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
根据上下文创建合适的引导:
欢迎屏幕 :
账户设置 :
核心概念介绍 :
首次成功 :
空状态:代替空白区域,显示:
示例:
尚无项目
项目帮助您组织工作并与团队协作。
[创建您的第一个项目] 或 [从模板开始]
上下文工具提示 :
功能公告 :
渐进式引导 :
何时使用 :
如何设计 :
最佳实践 :
何时使用 :
如何设计 :
产品内帮助 :
帮助模式 :
? 图标⌘K)每个空状态都需要:
“您最近的项目将显示在这里”
“项目帮助您组织工作并与团队协作”
[创建项目] 或 [从模板导入]
插图或图标(不仅仅是空白页面上的文字)
“需要帮助开始?[观看2分钟教程]”
空状态类型 :
工具提示库:Tippy.js, Popper.js 导览库:Intro.js, Shepherd.js, React Joyride 模态框模式:焦点陷阱、背景遮罩、ESC键关闭 进度跟踪:使用LocalStorage记录“已查看”状态 分析:跟踪完成情况、流失点
存储模式:
// 跟踪用户已查看的引导步骤
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
重要:不要重复显示相同的引导(令人厌烦)。跟踪完成情况并尊重用户的关闭操作。
切勿:
用真实用户测试:
记住:你是一位具有出色教学本能的产品教育者。让用户尽快达到他们的“顿悟时刻”。教授必要内容,使其具有上下文相关性,尊重用户的时间和智力。
每周安装量
26.5K
仓库
GitHub Stars
13.0K
首次出现
2026年3月4日
安全审计
安装于
codex25.9K
opencode25.7K
github-copilot25.7K
gemini-cli25.7K
cursor25.7K
amp25.6K
Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: the "aha moment" you want users to reach, and users' experience level.
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
Understand what users need to learn and why:
Identify the challenge :
Understand the users :
Define success :
CRITICAL : Onboarding should get users to value as quickly as possible, not teach everything possible.
Follow these core principles:
Create appropriate onboarding for the context:
Welcome Screen :
Account Setup :
Core Concept Introduction :
First Success :
Empty States : Instead of blank space, show:
Example:
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
Contextual Tooltips :
Feature Announcements :
Progressive Onboarding :
When to use :
How to design :
Best practices :
When to use :
How to design :
In-product help :
Help patterns :
? icon near complex features⌘K shown on search box)Every empty state needs:
"Your recent projects will appear here"
"Projects help you organize your work and collaborate with your team"
[Create project] or [Import from template]
Illustration or icon (not just text on blank page)
"Need help getting started? [Watch 2-min tutorial]"
Empty state types :
Tooltip libraries : Tippy.js, Popper.js Tour libraries : Intro.js, Shepherd.js, React Joyride Modal patterns : Focus trap, backdrop, ESC to close Progress tracking : LocalStorage for "seen" states Analytics : Track completion, drop-off points
Storage patterns :
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
IMPORTANT : Don't show same onboarding twice (annoying). Track completion and respect dismissals.
NEVER :
Test with real users:
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
Weekly Installs
26.5K
Repository
GitHub Stars
13.0K
First Seen
Mar 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex25.9K
opencode25.7K
github-copilot25.7K
gemini-cli25.7K
cursor25.7K
amp25.6K
Python PDF处理教程:合并拆分、提取文本表格、创建PDF文件
52,000 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装
SVG Logo Designer - AI 驱动的专业矢量标识设计工具,生成可缩放品牌标识
1,200 周安装