B
baccaraaa/tavero
Keep the UI your agent writes consistent
无 SECURITY.md
在 GitHub 查看 ↗链接已于 2026-11-12 核查 · HTTP 200 · 打开的是厂商自己的官网
官方说明Keep the UI your agent writes consistent. Scans your running React app for drift in buttons, cards, colors and spacing, and gives your coding agent each fix. CLI, MCP server, local panel.
安装与配置
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"baccaraaa-tavero": {
"command": "npx",
"args": ["playwright"]
}
}
}解析自我们于 2026-10-26 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"baccaraaa-tavero": {
"command": "npx",
"args": ["playwright"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio baccaraaa-tavero -- npx playwright
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- ★ 数取值
- 3 ★ · baccaraaa/tavero · 取自 GitHub 搜索 API · （2026-11-13 20:00:50 核对）
- 来源明细
- 从该仓库的 GitHub 页面直接读取 · 条目类型：开源项目
- 收录与活跃
- 收录于 2026-10-23 · 最近见到 2026-11-14 · 共见到 26 次 · 被 3 个来源列出
- 评分构成
- 综合分 303 · 3 ★ · 3 个来源 · repo
- 安装
npx playwright
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx playwright。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们把它归在这些标签下: 开源项目。标签来自条目自身，不是我们强加的分类。
谁维护它、还在更新吗？
仓库
baccaraaa/tavero；我们收录于 2026-10-23；最近见到 2026-11-14。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。Tavero
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
Keep the UI your agent writes consistent.
taveroui.com · Docs · Demo
Tavero scans your running React app, finds drift in buttons, cards, colors and spacing, and gives your coding agent each fix with the file, the line and the token to use. It runs on your machine, as a CLI, an MCP server for Claude Code, Cursor, Codex and other agents, and a local panel where you decide what is intended.
A real finding from the Acme demo in this repository (demo/acme): six pages scanned at three widths.
## How it works
1. Scan. Tavero opens your dev server in Chromium at mobile, tablet and desktop widths, with your login if the app needs one. If the project styles a dark theme, it adds one dark pass.
2. Attribute. Every visible element is mapped to the React component and the source line that rendered it, from React's own dev-mode data. Nothing is added to your project.
3. Find. Four rules compare what renders with your tokens and with itself: buttons, cards, colors and scales.
4. Fix. Each finding is a task: what, where (file:line), the current value, and the token or component expected. Your agent fixes it, rescans one route in seconds, and checks that the finding is resolved.
## Quick start
Node 20 or later, a Vite or Next app on React 19 that runs in dev mode.
bash
npm i -D tavero
npx playwright install chromium # once per machine
npx tavero login --url http://localhost:5173/login # once, if the app has a login
npx tavero scan --url http://localhost:5173
npx tavero findings
id sev rule decision title evidence
fc75ac3d6a2 high buttons 7 text button styles 7
f36cb934b5e high scales 13 distinct padding values, 1 declared 12
f94269275c1 medium buttons Two text button styles differ only in radius, paddingY, pa… 2
f057122e1f9 medium buttons 4 place(s) write directly in page or section mark… 4
… 30 more, use --page 2
bash
npx tavero finding fff30adc07c # evidence: file:line, current value, expected token, crops
npx tavero context # a ~1,500-token brief of the design system for an agent
npx tavero report # a self-contained HTML report
Tavero writes only to /.tavero/. Every read command takes --json, and text output is capped at 20 rows so it fits an agent's context.
## Use it from your agent
tavero mcp is an MCP server on stdio with nine tools. Print the config for your client and paste it where it says:
bash
npx tavero mcp --print-config claude # Claude Code: .mcp.json
npx tavero mcp --print-config cursor # .cursor/mcp.json
npx tavero mcp --print-config codex # .codex/config.toml
npx tavero mcp --print-config gemini # .gemini/settings.json
npx tavero mcp --print-config antigravity # .agents/mcpconfig.json
npx tavero mcp --print-config vscode # .vscode/mcp.json (GitHub Copilot)
npx tavero mcp --print-config windsurf # ~/.codeium/windsurf/mcpconfig.json
Then paste docs/AGENTS.snippet.md into AGENTS.md, CLAUDE.md or GEMINI.md, so the agent reads the design context before writing UI. SKILL.md is an Agent Skill with the full workflow.
A recorded run of Claude Code on the Acme demo, with no shell, 29 seconds:
› taverocontext
Action button is Button from src/components/Button.tsx (props: variant)
› taverofindings rule=colors
fff30adc07c Color #4263eb is not a project token
taveroui.com · Docs · Demo
Tavero scans your running React app, finds drift in buttons, cards, colors and spacing, and gives your coding agent each fix with the file, the line and the token to use. It runs on your machine, as a CLI, an MCP server for Claude Code, Cursor, Codex and other agents, and a local panel where you decide what is intended.
A real finding from the Acme demo in this repository (demo/acme): six pages scanned at three widths.
## How it works
1. Scan. Tavero opens your dev server in Chromium at mobile, tablet and desktop widths, with your login if the app needs one. If the project styles a dark theme, it adds one dark pass.
2. Attribute. Every visible element is mapped to the React component and the source line that rendered it, from React's own dev-mode data. Nothing is added to your project.
3. Find. Four rules compare what renders with your tokens and with itself: buttons, cards, colors and scales.
4. Fix. Each finding is a task: what, where (file:line), the current value, and the token or component expected. Your agent fixes it, rescans one route in seconds, and checks that the finding is resolved.
## Quick start
Node 20 or later, a Vite or Next app on React 19 that runs in dev mode.
bash
npm i -D tavero
npx playwright install chromium # once per machine
npx tavero login --url http://localhost:5173/login # once, if the app has a login
npx tavero scan --url http://localhost:5173
npx tavero findings
id sev rule decision title evidence
fc75ac3d6a2 high buttons 7 text button styles 7
f36cb934b5e high scales 13 distinct padding values, 1 declared 12
f94269275c1 medium buttons Two text button styles differ only in radius, paddingY, pa… 2
f057122e1f9 medium buttons 4 place(s) write directly in page or section mark… 4
… 30 more, use --page 2
bash
npx tavero finding fff30adc07c # evidence: file:line, current value, expected token, crops
npx tavero context # a ~1,500-token brief of the design system for an agent
npx tavero report # a self-contained HTML report
Tavero writes only to /.tavero/. Every read command takes --json, and text output is capped at 20 rows so it fits an agent's context.
## Use it from your agent
tavero mcp is an MCP server on stdio with nine tools. Print the config for your client and paste it where it says:
bash
npx tavero mcp --print-config claude # Claude Code: .mcp.json
npx tavero mcp --print-config cursor # .cursor/mcp.json
npx tavero mcp --print-config codex # .codex/config.toml
npx tavero mcp --print-config gemini # .gemini/settings.json
npx tavero mcp --print-config antigravity # .agents/mcpconfig.json
npx tavero mcp --print-config vscode # .vscode/mcp.json (GitHub Copilot)
npx tavero mcp --print-config windsurf # ~/.codeium/windsurf/mcpconfig.json
Then paste docs/AGENTS.snippet.md into AGENTS.md, CLAUDE.md or GEMINI.md, so the agent reads the design context before writing UI. SKILL.md is an Agent Skill with the full workflow.
A recorded run of Claude Code on the Acme demo, with no shell, 29 seconds:
› taverocontext
Action button is Button from src/components/Button.tsx (props: variant)
› taverofindings rule=colors
fff30adc07c Color #4263eb is not a project token
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/baccaraaa-tavero/)
- 来源
- github · https://github.com/baccaraaa/tavero
- 按领域浏览
- 开源项目
- Traction
- 3 ★
- 收录来源
- 3 个独立来源
- 收录于
- 今天
- 安全策略
- 我们没在该仓库根目录找到
SECURITY.md（这不代表不安全）
同类推荐
所属领域与标签
每个标签都能点进去看同类的全部条目。数字是当前库里的真实条数。