我为复杂的 Web 应用构建了一个简单的 guide/spotlight 工具（开源）

Source: Dev.to

Hi everyone 👋

我最近做了一个小型开源工具，叫 RotaGuide Spotlight，用来在复杂的网页界面中引导用户。很多内部工具或企业仪表盘里，按钮、表单和模块太多，用户容易迷路。我想要一种简单的方式来创建逐步的 UI 引导，而不需要写大量手动代码。

Guide Engine (Library)

核心库通过暗色遮罩和聚光灯效果高亮元素，并一步步指引用户。

Repository:

How it works

使用 guideTarget 辅助函数标记引导目标：

New Booking

通过 markdown 内容触发引导：

<GuideProvider>
  <Guide
    steps={[
      {
        target: "#booking-card",
        content: "Hover or focus this card to start",
      },
    ]}
  />
</GuideProvider>

或者手动控制引导：

<GuideProvider>
  {({ startGuide, triggerProps }) => (
    <button
      {...triggerProps}
      onClick={() => {
        console.log("custom logic");
        startGuide();
      }}
    >
      Start Guide
    </button>
  )}
</GuideProvider>

Guide Editor

为了让创建引导更容易，我做了一个可视化编辑器，用户可以直接选取页面元素并编写步骤，无需手动配置所有内容。

Repository:

Online editor:

Landing page:

My Goal

我的长期目标是让团队能够更轻松地为复杂应用构建产品入门 / 功能引导，而不必依赖 Appcues、Intro.js 等重量级工具。我也在考虑做一个浏览器扩展，能够把引导导出为 markdown 文件，直接供库使用。

Feedback

• 是否已经有类似的项目，我应该去研究一下？
• 哪些功能可以让它更实用？
• 你会在自己的项目中使用这种工具吗？

Thanks 🙌