Skip to main content
Glama

/ Spikes

AI 辅助构建的反馈闭环

MIT License Widget Size Free + Pro

AI 可以在一个小时内构建出原型。 将反馈转化为行动仍然是最慢的部分。

快速开始 · CLI 参考 · 组件文档 · 托管仪表盘 · 自托管


这是什么?

Spikes 是一款面向 AI 辅助开发的反馈工具。它让审阅者可以直接在网页上留下针对性反馈——无需截图,不用“那边的按钮”,不会丢失上下文。

点击任意元素。评分。评论。Spikes 会捕获精确的 CSS 选择器、边界框和页面上下文。你的 AI 代理会得到可立即执行的结构化 JSON。

无需账户。无需构建步骤。适用于 file://、localhost、任何地方。


Related MCP server: Mockups MPC

快速开始

1. 安装 CLI

curl -fsSL https://spikes.sh/install.sh | sh
# Or: cargo install spikes

2. 初始化项目

spikes init                     # Defaults to hosted spikes.sh
# spikes init --self-host       # Opt out — scaffold a self-hosted config instead

spikes init 会创建 .spikes/config.toml,其中包含一个 [remote] 配置段,默认指向 https://spikes.sh。传入 --self-host(或在提示时回答 s)可跳过托管默认值。

3. 将组件添加到你的 HTML

spikes inject ./mockups/        # Injects widget script tag (uses configured endpoint)
spikes serve                    # http://localhost:3847

4. 收集并使用反馈

spikes list                     # See all feedback
spikes list --json              # Feed to your agent
spikes list --rating no         # Find problems
spikes hotspots                 # Elements with most feedback
spikes resolve <id>             # Mark items done

CLI 命令

命令

描述

spikes init

创建包含配置的 .spikes/ 目录(默认托管;--self-host 可退出)

spikes list

列出反馈(--json、--page、--reviewer、--rating、--unresolved)

spikes show <id>

显示单条 spike 详情

spikes export

导出为 JSON/CSV/JSONL/Cursor/Claude 上下文

spikes hotspots

获得最多反馈的元素

spikes reviewers

列出所有审阅者

spikes inject <dir>

在 HTML 文件中添加/移除组件(--endpoint <url> 覆盖已配置的端点)

spikes serve

本地开发服务器(--port、--marked、--cors-allow-origin)

spikes mcp serve

启动 MCP 服务器,用于 AI 代理集成

spikes pull/push/sync

与远程端点同步

spikes share <dir>

上传到 spikes.sh 以即时共享

spikes login/logout/whoami

身份验证管理

spikes upgrade/billing

通过 Stripe 订阅 Pro 版

spikes deploy cloudflare

搭建自托管 Worker + D1

所有命令都支持 --json 以便脚本化使用。查看 完整 CLI 参考。

查看托管项目的 spikes:

托管仪表盘位于 https://spikes.sh/dashboard,列出你拥有的每个项目,并可深入查看单条 spike(按页面、评分、已解决状态筛选,内联切换 resolved)。直接在浏览器中登录:点击 登录,打开验证页面,然后通过发送到你邮箱的魔法链接确认——无需 CLI。

你也可以使用你的 bearer token(来自 spikes login 的 $SPIKES_TOKEN)直接调用 JSON API:

# GET /me/projects
# List all projects you own (with spike_count + last_activity)
curl -H "Authorization: Bearer $SPIKES_TOKEN" \
  https://spikes.sh/me/projects

# GET /me/projects/:key/spikes
# List spikes for one of your projects (paginated, filterable: page, per_page,
# filter_page, filter_rating, filter_resolved)
curl -H "Authorization: Bearer $SPIKES_TOKEN" \
  "https://spikes.sh/me/projects/my-project/spikes?page=1&per_page=50"

# PATCH /me/projects/:key/spikes/:id
# Toggle the `resolved` flag on one spike
curl -X PATCH -H "Authorization: Bearer $SPIKES_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"resolved": true}' \
  https://spikes.sh/me/projects/my-project/spikes/<spike_id>

# POST /projects
# Create a new project (user bearer only)
curl -X POST -H "Authorization: Bearer $SPIKES_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"key": "my-project", "allowed_origins": ["https://example.com"]}' \
  https://spikes.sh/projects

# Single-line variant (copy-paste friendly)
curl -H "Authorization: Bearer $SPIKES_TOKEN" https://spikes.sh/me/projects

所有 /me/* 端点均按用户隔离:你只能看到自己拥有的项目和 spikes。跨租户请求会返回 404 PROJECT_NOT_FOUND(防枚举)。

安全说明: API 密钥(sk_spikes_*)和管理员 SPIKES_TOKEN 不适用于 /me/* 端点或 POST /projects——这些需要来自 spikes login 的用户 bearer token。POST /spikes 收集端点会强制执行每项目来源允许列表和每项目速率限制;被拒绝的组件请求会以组件按钮上的小红点 #spikes-error-dot 指示器显示(404 / 403 / 429)。


AI 代理集成

Spikes 原生支持代理。你的 AI 编程助手无需离开其工作流,即可读取、写入和管理反馈。

npx spikes-mcp            # Zero-install MCP server — just works
# or: spikes mcp serve    # If you have the CLI installed

MCP 服务器 — 9 个工具

spikes mcp serve 会启动一个 Model Context Protocol 服务器,暴露 9 个工具:

工具

用途

get_spikes

列出带筛选条件的反馈(页面、评分、未解决)

get_element_feedback

获取特定 CSS 选择器的反馈

get_hotspots

查找获得最多反馈的元素

submit_spike

以编程方式创建反馈

resolve_spike

将反馈标记为已处理

delete_spike

删除一条 spike

create_share

上传文件,获取可共享 URL

list_shares

查看你的有效共享

get_usage

查看使用统计、限制和花费

支持 stdio 和 HTTP 传输方式,以及 本地 和 远程 数据模式:

spikes mcp serve                              # stdio, local JSONL
spikes mcp serve --remote                     # stdio, hosted API
spikes mcp serve --transport http --port 3848 # HTTP for sandboxed agents

API 密钥

代理拥有自己的身份。无需电子邮件、无需魔法链接、无需人工步骤:

spikes auth create-key --name "my-agent"   # → sk_spikes_...
spikes auth list-keys                       # See all keys
spikes auth revoke-key <key_id>            # Revoke

密钥支持读取/写入/完全作用域,并可设置可选的预算上限。

代理级计费

面向代理规模使用量的按量计费。按 spike 付费,而非按席位付费:

spikes usage    # See current spend and limits

当达到上限时,预算强制执行会返回 429 BUDGET_EXCEEDED——代理可以在消耗之前进行检查。

上下文导出

导出为适合代理消费的结构化 Markdown:

spikes export --format cursor-context > cursor-feedback.md
spikes export --format claude-context > claude-feedback.md

发现

  • llms.txt — 全部 9 个 MCP 工具、参数、代理快速入门

  • agents.md — 面向代理的机器可读落地页

  • Smithery — 已列入 MCP 服务器注册表

  • spikes mcp install — 为 Claude Desktop / Cursor 生成配置

完整详情: llms.txt · agents.md


GitHub Action

使用反馈质量来把关 CI。当未解决的负面反馈超过你的阈值时,spikes-action 会让构建失败。

name: CI
on: [push, pull_request]

jobs:
  feedback-gate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: bierlingm/spikes/action@v0.3.1
        with:
          threshold: 0           # Fail if any blocking spikes
          ignore-paths: ""     # Optional: pages to ignore
          require-resolution: false

查看 action/README.md 获取完整文档。


组件属性

简单设置 — 只需添加你的项目密钥,即可开始收集反馈:

<script src="https://spikes.sh/spikes.js" data-project="my-app"></script>

当你设置 data-project 后,反馈会自动同步到 https://spikes.sh/spikes。除非你正在自托管,否则无需配置端点。

完整配置 — 所有可用属性:

<script src="https://spikes.sh/spikes.js"
  data-project="my-app"
  data-position="bottom-right"
  data-color="#e74c3c"
  data-theme="dark"
  data-reviewer="Pat"
  data-collect-email="true"
  data-admin="true">
</script>

自托管 — 指向你自己的后端:

<script src="/spikes.js"
  data-project="my-app"
  data-endpoint="https://my-worker.workers.dev/spikes">
</script>

属性

描述

默认

data-project

按项目密钥对反馈分组

location.hostname

data-position

按钮角位置:bottom-right、bottom-left、top-right、top-left

bottom-right

data-color

强调色(任何 CSS 颜色)

#e74c3c

data-theme

弹窗主题:dark 或 light

dark

data-reviewer

预设审阅者名称

(提示用户)

data-endpoint

用于多审阅者同步的后端 URL。可选——设置 data-project 后默认为 https://spikes.sh/spikes。

https://spikes.sh/spikes(设置了 data-project 时)、/spikes(本地开发)

data-collect-email

在提示中显示电子邮件字段

false

data-admin

启用审阅模式功能

false

data-offset-x/y

按钮距边缘的偏移量

—

查看 组件属性参考 获取完整文档。


架构

Spikes 有三个可协同工作或独立使用的组件:

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   CLI       │────▶│   Widget    │◄────│   Worker    │
│  (Rust)     │     │  (Vanilla   │     │ (Cloudflare │
│             │     │    JS)      │     │  + D1)      │
└─────────────┘     └─────────────┘     └─────────────┘
     │                                            │
     │          spikes.sh (hosted)                │
     └────────────────────────────────────────────┘

CLI — Rust 二进制文件,用于本地开发、spike 管理和部署。将 spikes 存储在 ~/.local/share/spikes/。

组件 — 14KB gzip 压缩的原生 JS。捕获元素选择器、边界框、评分和评论。通过 localStorage 支持离线使用。

Worker — 可选的 Cloudflare Worker + D1 后端,用于多审阅者同步、共享和托管部署。位于 spikes-hosted/。


开发

CLI

cd cli
cargo build --release
cargo test              # 160+ tests
cargo run -- --help

组件

cd widget
# Edit src/spikes.js
# Test by running: spikes serve from the project root

组件回归测试

CI 套件,用于捕获静默数据丢失类错误(例如,组件在非允许来源上加载时无法同步,但未显示错误):

cd tests/widget
npm install
npx playwright install chromium    # one-time
npm test                           # 23 tests: marker checks + happy/reverse/boundary specs (<60s)

也已接入本地 agent-ci:

npx agent-ci run --workflow workflows-local/widget.yml

Worker

Worker 后端位于私有 spikes-hosted 仓库中。要测试它:

cd ../spikes-hosted/worker
npm test              # Worker test suite (vitest)
npx wrangler dev

自托管

想要自己的后端?一条命令:

spikes deploy cloudflare    # Creates spikes-worker/ directory
cd spikes-worker && npx wrangler deploy

查看 自托管指南 了解包含 D1 数据库、身份验证和 Stripe 计费集成的完整设置。

Share 与 Deploy Cloudflare:如何选择?

当你希望无需任何设置即可即时共享时,请使用 spikes share——文件会上传到 spikes.sh 并从我们的基础设施提供。非常适合快速审阅、客户反馈,或者当你不想管理后端时。

当你需要数据隔离(反馈保留在你的 Cloudflare 账户中)、自定义域名,或希望完全控制基础设施时,请使用 spikes deploy cloudflare。自托管需要 Cloudflare 账户和一次性部署设置。


更新内容(近期全面重构)

  • 安全:PBKDF2 密码哈希、路径遍历修复、XSS 防护

  • 身份验证:魔法链接验证(无需记住密码)

  • 计费:集成 Stripe,支持 Pro 版

  • 测试:CLI 测试套件(Rust)+ Worker 测试套件(位于 ../spikes-hosted/worker)

  • 架构:模块化 worker,关注点清晰分离

  • CI/CD:自动化测试和部署流水线


详细文档


为什么选择 Spikes

零摩擦

一个脚本标签,无需注册,无需构建步骤

随处可用

file://、localhost、任意域名

精准

基于精确 CSS 选择器的元素级反馈

Agent 原生

处处 JSON、管道、可查询的 CLI

你的基础设施

自托管或使用托管版——由你选择

小巧

Widget 仅 14KB(gzip 后)

隐私

无追踪,你的数据始终属于你


定价

永远免费。需要更多就升级 Pro。

无需注册即可开始。需要 Pro 功能时再登录。

免费

Pro

价格

永久 $0

随心支付

共享数

5

无限

每个共享的 Spikes 数

1,000

无限

Widget + CLI

完整

完整

自托管

支持

支持

密码保护

—

支持

Webhooks

—

支持

徽章移除

—

支持

MIT 许可。付费是赞赏,而非访问条件。

准备好后运行 spikes upgrade。没有压力。


网站 · 文档 · GitHub · 问题

MIT 许可证 · 为与 AI 协作的构建者打造。

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.
    1
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    A self-hosted MCP server and gallery for AI-generated mockups, enabling AI tools to send mockups via MCP tool calls for storage and browsing in a clean web gallery.
    2
    MIT
  • F
    license
    Not graded
    quality
    C
    maintenance
    An MCP server that establishes feedback-oriented development workflows with a Web UI and desktop app, allowing users to provide interactive feedback to AI models through prompts, images, and session tracking.
    -
  • F
    license
    Not graded
    quality
    B
    maintenance
    Open-source human-in-the-loop design review tool that enables AI agents to upload UI screenshots for human feedback, with MCP tools for creating reviews, pinning notes, and getting structured feedback.
    3
    -