Back to Details

impeccable-onboard

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Impeccable /onboard

Impeccable /onboard

Run the original Impeccable 
/onboard
workflow in a skills-only environment.
  • Apply 
    frontend-design
    principles as baseline guardrails.
  • Treat command arguments mentioned by the user as scope hints.
  • Ask clarifying questions when context is missing.
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
在纯技能环境中运行原版Impeccable 
/onboard
工作流。
  • 将
    frontend-design
    原则作为基础准则。
  • 将用户提及的命令参数视为范围提示。
  • 当上下文缺失时，提出澄清问题。
创建或优化用户引导体验，帮助用户快速理解、采用并成功使用产品。

Assess Onboarding Needs

评估用户引导需求

Understand what users need to learn and why:
  1. Identify the challenge:
    • What are users trying to accomplish?
    • What's confusing or unclear about current experience?
    • Where do users get stuck or drop off?
    • What's the "aha moment" we want users to reach?
  2. Understand the users:
    • What's their experience level? (Beginners, power users, mixed?)
    • What's their motivation? (Excited and exploring? Required by work?)
    • What's their time commitment? (5 minutes? 30 minutes?)
    • What alternatives do they know? (Coming from competitor? New to category?)
  3. Define success:
    • What's the minimum users need to learn to be successful?
    • What's the key action we want them to take? (First project? First invite?)
    • How do we know onboarding worked? (Completion rate? Time to value?)
CRITICAL: Onboarding should get users to value as quickly as possible, not teach everything possible.
了解用户需要学习什么以及原因：
  1. 明确挑战：
    • 用户想要达成什么目标？
    • 当前体验中有哪些内容令人困惑或不清晰？
    • 用户在哪些环节受阻或流失？
    • 我们希望用户获得怎样的「顿悟时刻」？
  2. 理解用户：
    • 他们的经验水平如何？（新手、高级用户还是混合群体？）
    • 他们的使用动机是什么？（兴趣探索还是工作要求？）
    • 他们能投入多少时间？（5分钟？30分钟？）
    • 他们了解哪些替代产品？（来自竞品还是刚接触该品类？）
  3. 定义成功标准：
    • 用户要成功使用产品，最少需要掌握哪些内容？
    • 我们希望他们采取的关键行动是什么？（创建首个项目？发出首个邀请？）
    • 如何判断用户引导是否有效？（完成率？价值获取时长？）
关键提示：用户引导应尽快让用户获取价值，而非试图教授所有内容。

Onboarding Principles

用户引导原则

Follow these core principles:
遵循以下核心原则：

Show, Don't Tell

演示而非说教

  • Demonstrate with working examples, not just descriptions
  • Provide real functionality in onboarding, not separate tutorial mode
  • Use progressive disclosure - teach one thing at a time
  • 用可运行的示例进行演示，而非仅用文字描述
  • 在用户引导中提供真实功能，而非独立的教程模式
  • 采用渐进式信息披露——一次只教授一项内容

Make It Optional (When Possible)

尽可能提供可选项

  • Let experienced users skip onboarding
  • Don't block access to product
  • Provide "Skip" or "I'll explore on my own" options
  • 允许有经验的用户跳过引导流程
  • 不要阻止用户访问产品
  • 提供「跳过」或「我将自行探索」的选项

Time to Value

价值获取时长

  • Get users to their "aha moment" ASAP
  • Front-load most important concepts
  • Teach 20% that delivers 80% of value
  • Save advanced features for contextual discovery
  • 尽快让用户到达他们的「顿悟时刻」
  • 优先呈现最重要的概念
  • 教授能带来80%价值的20%核心内容
  • 将高级功能留到用户在使用中自主发现

Context Over Ceremony

情境优先，形式次之

  • Teach features when users need them, not upfront
  • Empty states are onboarding opportunities
  • Tooltips and hints at point of use
  • 在用户需要时教授功能，而非提前灌输
  • 空状态是进行用户引导的绝佳机会
  • 在使用场景中提供工具提示和提示信息

Respect User Intelligence

尊重用户的智慧

  • Don't patronize or over-explain
  • Be concise and clear
  • Assume users can figure out standard patterns
  • 不要居高临下地过度解释
  • 语言简洁清晰
  • 假设用户能够理解标准设计模式

Design Onboarding Experiences

设计用户引导体验

Create appropriate onboarding for the context:
根据场景设计合适的用户引导：

Initial Product Onboarding

产品初始引导

Welcome Screen:
  • Clear value proposition (what is this product?)
  • What users will learn/accomplish
  • Time estimate (honest about commitment)
  • Option to skip (for experienced users)
Account Setup:
  • Minimal required information (collect more later)
  • Explain why you're asking for each piece of information
  • Smart defaults where possible
  • Social login when appropriate
Core Concept Introduction:
  • Introduce 1-3 core concepts (not everything)
  • Use simple language and examples
  • Interactive when possible (do, don't just read)
  • Progress indication (step 1 of 3)
First Success:
  • Guide users to accomplish something real
  • Pre-populated examples or templates
  • Celebrate completion (but don't overdo it)
  • Clear next steps
欢迎界面：
  • 清晰的价值主张（这款产品是什么？）
  • 用户将学习/完成的内容
  • 时间预估（如实告知所需投入）
  • 跳过选项（面向有经验的用户）
账户设置：
  • 仅收集必要信息（后续再补充更多）
  • 解释询问每项信息的原因
  • 尽可能提供智能默认选项
  • 合适时提供社交登录方式
核心概念介绍：
  • 介绍1-3个核心概念（而非全部）
  • 使用简单的语言和示例
  • 尽可能设置为交互式（动手操作，而非仅阅读）
  • 进度提示（第1步，共3步）
首次成功体验：
  • 引导用户完成真实的操作
  • 提供预填充的示例或模板
  • 庆祝完成（但不要过度）
  • 清晰的下一步指引

Feature Discovery & Adoption

功能发现与采用

Empty States: Instead of blank space, show:
  • What will appear here (description + screenshot/illustration)
  • Why it's valuable
  • Clear CTA to create first item
  • Example or template option
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:
  • Appear at relevant moment (first time user sees feature)
  • Point directly at relevant UI element
  • Brief explanation + benefit
  • Dismissable (with "Don't show again" option)
  • Optional "Learn more" link
Feature Announcements:
  • Highlight new features when they're released
  • Show what's new and why it matters
  • Let users try immediately
  • Dismissable
Progressive Onboarding:
  • Teach features when users encounter them
  • Badges or indicators on new/unused features
  • Unlock complexity gradually (don't show all options immediately)
空状态： 不要留空白，而是展示：
  • 此处将显示的内容（描述+截图/插图）
  • 它的价值所在
  • 创建首个内容的清晰行动召唤（CTA）
  • 示例或模板选项
示例：
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
情境化工具提示：
  • 在相关时刻出现（用户首次看到功能时）
  • 直接指向相关UI元素
  • 简短的解释+价值说明
  • 可关闭（提供「不再显示」选项）
  • 可选的「了解更多」链接
功能公告：
  • 发布新功能时进行重点展示
  • 展示新内容及其重要性
  • 允许用户立即试用
  • 可关闭
渐进式引导：
  • 在用户接触到功能时再进行教授
  • 在新/未使用的功能上添加徽章或标识
  • 逐步解锁复杂功能（不要一次性展示所有选项）

Guided Tours & Walkthroughs

引导式游览与分步指引

When to use:
  • Complex interfaces with many features
  • Significant changes to existing product
  • Industry-specific tools needing domain knowledge
How to design:
  • Spotlight specific UI elements (dim rest of page)
  • Keep steps short (3-7 steps max per tour)
  • Allow users to click through tour freely
  • Include "Skip tour" option
  • Make replayable (help menu)
Best practices:
  • Interactive > passive (let users click real buttons)
  • Focus on workflow, not features ("Create a project" not "This is the project button")
  • Provide sample data so actions work
适用场景：
  • 功能众多的复杂界面
  • 现有产品的重大改版
  • 需要领域知识的行业特定工具
设计方法：
  • 突出显示特定UI元素（模糊页面其余部分）
  • 步骤简短（每次游览最多3-7步）
  • 允许用户自由点击完成游览
  • 包含「跳过游览」选项
  • 支持重新播放（在帮助菜单中）
最佳实践：
  • 交互式优于被动式（让用户点击真实按钮）
  • 聚焦工作流而非功能（「创建项目」而非「这是项目按钮」）
  • 提供示例数据确保操作有效

Interactive Tutorials

交互式教程

When to use:
  • Users need hands-on practice
  • Concepts are complex or unfamiliar
  • High stakes (better to practice in safe environment)
How to design:
  • Sandbox environment with sample data
  • Clear objectives ("Create a chart showing sales by region")
  • Step-by-step guidance
  • Validation (confirm they did it right)
  • Graduation moment (you're ready!)
适用场景：
  • 用户需要动手练习
  • 概念复杂或陌生
  • 高风险场景（最好在安全环境中练习）
设计方法：
  • 带有示例数据的沙箱环境
  • 清晰的目标（「创建一个显示各区域销售额的图表」）
  • 分步指引
  • 验证机制（确认用户操作正确）
  • 结业时刻（你已准备就绪！）

Documentation & Help

文档与帮助

In-product help:
  • Contextual help links throughout interface
  • Keyboard shortcut reference
  • Search-able help center
  • Video tutorials for complex workflows
Help patterns:
  • ?
    icon near complex features
  • "Learn more" links in tooltips
  • Keyboard shortcut hints (
    ⌘K
    shown on search box)
产品内帮助：
  • 界面各处提供情境化帮助链接
  • 键盘快捷键参考
  • 可搜索的帮助中心
  • 针对复杂工作流的视频教程
帮助模式：
  • 复杂功能旁的
    ?
    图标
  • 工具提示中的「了解更多」链接
  • 键盘快捷键提示（搜索框旁显示
    ⌘K
    ）

Empty State Design

空状态设计

Every empty state needs:
每个空状态都需要包含：

What Will Be Here

此处将显示什么

"Your recent projects will appear here"
「你的近期项目将在此处显示」

Why It Matters

它的重要性

"Projects help you organize your work and collaborate with your team"
「项目可帮助你整理工作并与团队协作」

How to Get Started

如何开始

[Create project] or [Import from template]
[创建项目] 或 [从模板导入]

Visual Interest

视觉吸引力

Illustration or icon (not just text on blank page)
插图或图标（不要只是空白页面上的文字）

Contextual Help

情境化帮助

"Need help getting started? [Watch 2-min tutorial]"
Empty state types:
  • First use: Never used this feature (emphasize value, provide template)
  • User cleared: Intentionally deleted everything (light touch, easy to recreate)
  • No results: Search or filter returned nothing (suggest different query, clear filters)
  • No permissions: Can't access (explain why, how to get access)
  • Error state: Failed to load (explain what happened, retry option)
「需要入门帮助？[观看2分钟教程]」
空状态类型：
  • 首次使用：从未使用过此功能（强调价值，提供模板）
  • 用户清空：用户有意删除了所有内容（轻量提示，便于重新创建）
  • 无结果：搜索或筛选未返回任何内容（建议更换查询词、清除筛选条件）
  • 无权限：无法访问（解释原因及获取权限的方式）
  • 错误状态：加载失败（说明问题，提供重试选项）

Implementation Patterns

实现模式

Technical approaches:

技术方案：

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:
javascript
// 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:
  • Force users through long onboarding before they can use product
  • Patronize users with obvious explanations
  • Show same tooltip repeatedly (respect dismissals)
  • Block all UI during tour (let users explore)
  • Create separate tutorial mode disconnected from real product
  • Overwhelm with information upfront (progressive disclosure!)
  • Hide "Skip" or make it hard to find
  • Forget about returning users (don't show initial onboarding again)
工具提示库：Tippy.js, Popper.js 游览库：Intro.js, Shepherd.js, React Joyride 模态框模式：焦点锁定、背景遮罩、按ESC关闭 进度跟踪：使用LocalStorage记录「已查看」状态 数据分析：跟踪完成率、流失节点
存储模式：
javascript
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
重要提示：不要重复显示相同的引导内容（会惹恼用户）。跟踪完成情况并尊重用户的关闭操作。
绝对不要：
  • 强制用户完成冗长的引导后才能使用产品
  • 用显而易见的解释居高临下地对待用户
  • 重复显示相同的工具提示（尊重用户的关闭选择）
  • 在游览过程中屏蔽所有UI（让用户可以探索）
  • 创建与真实产品脱节的独立教程模式
  • 一开始就用大量信息 overwhelm 用户（采用渐进式披露！）
  • 隐藏「跳过」选项或让其难以找到
  • 忘记回访用户（不要再次显示初始引导流程）

Verify Onboarding Quality

验证用户引导质量

Test with real users:
  • Time to completion: Can users complete onboarding quickly?
  • Comprehension: Do users understand after completing?
  • Action: Do users take desired next step?
  • Skip rate: Are too many users skipping? (Maybe it's too long/not valuable)
  • Completion rate: Are users completing? (If low, simplify)
  • Time to value: How long until users get first value?
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.
与真实用户一起测试：
  • 完成时长：用户能否快速完成引导？
  • 理解程度：用户完成引导后是否理解相关内容？
  • 行动转化：用户是否采取了预期的下一步行动？
  • 跳过率：是否有太多用户跳过引导？（可能是因为引导太长或没有价值）
  • 完成率：用户是否完成了引导？（如果完成率低，需简化流程）
  • 价值获取时长：用户需要多久才能获得首次价值？
记住：你是一位拥有出色教学直觉的产品教育者。尽快让用户到达他们的「顿悟时刻」。教授核心内容，使其贴合情境，尊重用户的时间和智慧。