可嵌入组件

在用户所在的地方收集反馈

一个 script 标签。截图、控制台日志和元数据——自动捕获。

用 Skills 安装 推荐
  1. 1
    $ npx skills add makethisbetter/skills
  2. 2
    > /makethisbetter setup
用 script 标签安装
<script src="https://unpkg.com/makethisbetter@1"></script>

~42 kB gzipped · 零依赖 · 适用于所有平台

app.demo.com
Demo Analytics
Dashboard Reports Settings
Revenue
$284,500
Growth
+18.2%
Users
12,847
1
关于 "Revenue Chart"
🐛 出了问题
💡 我有个建议
或者用你自己的话描述...
反馈
全面捕获

远不只是一个评论框。

标注与注释

点击任意元素即可标注反馈，或拖拽自由绘制。上下文信息自动捕获。

屏幕录制

录屏精确还原现场。无需外部工具——点一下录制按钮就行。

AI 追问

反馈到你团队手上之前，AI 先问清楚，把模糊描述打磨成可执行的 Issue。

上下文捕获

截图、控制台日志、DOM 状态、浏览器信息和页面 URL——全部自动捕获，用户零操作。

快捷操作

一键选择：「出了问题」、「我有个建议」、「我看不懂」——无需打字。

零配置

一个 script 标签即可开始。兼容所有框架——React、Vue、Rails、纯 HTML——无需构建步骤。

集成方式

两行代码，搞定。

在 Project Settings 获取 projectKey。颜色配置位于已安装的 MakeThisBetter.init 代码中；Dashboard 修改不会更新已部署脚本。

index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/makethisbetter@1"></script>
  <script>
    MakeThisBetter.init({
      projectKey: 'mtb_proj_YOUR_KEY',
      tabText: 'Report a problem',
      brandColors: {
        primary: '#2563eb',
        hover: '#1d4ed8',
        active: '#1e40af',
        onPrimary: '#ffffff'
      }
    })
  </script>
</head>
<body>
  <!-- your app -->
</body>
</html>
React Vue Rails Next.js plain HTML
工作原理

从点击到可执行的 Issue。

1 用户点击反馈

页面上的标签或按钮打开标注工具栏。用户点击任意元素或拖拽高亮某个区域。

2 AI 打磨反馈

快速选择或自由输入——然后 AI 追问一两个问题，将模糊的报告转化为精确的 Issue。

3 Issue 进入看板

反馈、截图、录屏和技术上下文汇成 Issue，直接交给 Agent 或团队处理。

开源，免费。

查看源码、提 Issue 或发 PR。Widget SDK 开源在 GitHub。

在 GitHub 上查看
github.com/makethisbetter/makethisbetter-js