Rams (rams.ai) is an automated design reviewer for UI code. It scores each change from 0 to 100 against 313 public rules in 9 categories and posts most fixes as one-click GitHub suggestions, through a GitHub App, an MCP server, a CI Action or a free agent skill. Design Bug Bot is 21st's GitHub App for UI review: it checks changed React code against the components, tokens, spacing and type scale your repository already uses, and attempts a render so findings can include screenshots.
Use Rams for one design score across agents, pull requests and CI, a merge gate on critical findings, or code beyond React such as SwiftUI and Vue. Add Design Bug Bot when the question on a React pull request is whether it fits the system you already built, with rendered evidence next to the fix.
Disclosure: This comparison is published by 21st, which makes Design Bug Bot, and is based on each product's official documentation checked on September 14, 2026. It is not a head-to-head benchmark and reports no test results for either product.
Rams.ai vs Design Bug Bot at a glance
| Area | Rams | Design Bug Bot |
|---|---|---|
| Review job | A score and findings against 313 rules in 9 categories. Rules | Changed UI against your components, tokens, spacing and type scale, plus layout risks. |
| Surfaces | GitHub App, MCP server, agent skill, GitHub Action. Rams | GitHub App, with the full review also in 21st. |
| Code covered | React, Next.js, Vue, Svelte, Angular, React Native, SwiftUI. FAQ, rules | React (Next.js, Vite and similar) with Tailwind or plain CSS. |
| Triggers | Set per repository, no config file: every PR and push, once per PR, a "rams" label, an "@rams review" comment, or off. GitHub App | Pull requests, plus default-branch changes manually, after a set number of commits, or on a schedule. |
| Rendered UI | The pages differ; see below. | Attempted render, with desktop and mobile screenshots when it succeeds. |
| Your design system | Read before judging; Gate encodes your tokens as rules; Enterprise lists custom rules. Pricing | Your repository's own components and tokens are the reference. |
| Blocking | Team and Gate fail the PR check on critical findings. Pricing | Advisory. |
| Pricing model | Tiers by monthly review quota. | 5 successful reviews free, then AI credits. Details |
What Rams does well
A published rubric behind the score. The rules page names nine categories: Accessibility, Color, Typography, Spacing, Components, UX, Motion, Craft (AI-generated UI patterns) and Native (SwiftUI conventions such as Dynamic Type and VoiceOver). UX (64 rules), Motion (54) and Typography (42) are the largest counts on the GitHub App page. Criticals cap the score at 59, 49 or 39 for one, two, or three or more, so 60 and above means no criticals. The engine is versioned, and its public changelog says a first set of checks has been measured deterministically since August 26, 2026.
One engine, four entry points. The free skill runs inside your AI tool and sends nothing to Rams. The MCP server lets Claude Code, Cursor, Codex, Windsurf, Zed and GitHub Copilot score their own work before committing. The GitHub App needs no CI setup, and the Action fails on criticals, a score threshold, or never, writing findings as JSON plus git-applyable patches.
What Rams' pages say about rendered UI
The pages describe rendering differently. As of September 14, 2026:
- The rules page methodology says scoring reads code without running the app or taking screenshots. Its August 20, 2026 changelog entry says changed components are now rendered, with before-and-after renders in reviews.
- The FAQ describes visual reviews that keep before-and-after screenshots for 30 days and read up to six imported theme or token files so renders use real design values.
- The pricing section lists before-and-after renders under Gate, an early-access tier.
Blocking varies too. Pricing lists it under Team and Gate, the GitHub App page says its reviews do not block merges, and the FAQ places the CI Action in Team and Enterprise while the Action page offers a free API key. Ask Rams which tier includes what you need.
Where Design Bug Bot differs
Picture a Next.js pull request where every value is a design token, yet it adds a second modal wrapper beside the one in your component folder, with its own padding and a footer that hides the primary action on a phone.
Design Bug Bot is built around that problem. It reviews changed UI against the components, tokens, spacing and type scale already in your repository, and checks for horizontal overflow, fixed widths and actions hidden on mobile. Outside Gate, Rams applies its shared rulebook on every review; turning your own tokens and patterns into enforceable rules is part of Gate, which its pricing describes as hand-built with your team.
It attempts a render. Changed pages and components are picked from the diff and rendered in a React harness in a disposable sandbox, so a review can include screenshots at desktop and mobile widths. When rendering fails, findings still come with suggested fix code, labeled as code-backed recommendations.
It also reviews default-branch changes manually, after a chosen number of commits, or on a schedule, and it can push a branch to open a fix pull request. Rams says it makes no changes to your code; its Action leaves patches for your agent to apply.
The trade-offs run both ways. Design Bug Bot is advisory, React-focused and GitHub-only, and it is not a general code reviewer. A hard gate, non-React code and in-agent review before a commit are Rams strengths.
Choosing or running both
- Mixed stack. For a SwiftUI app or a Vue admin next to a React site, Rams covers those files. Add Design Bug Bot where React component fit keeps coming up.
- You need a gate. Let Rams Team or the Action hold the merge bar on criticals, with Design Bug Bot beside it explaining component and layout issues with screenshots.
- Agents write most of the UI. The Rams MCP scores agent output before commit. Design Bug Bot then checks what reaches the pull request, and its fix code can go back to the agent.
When both comment on one pull request, give each a job. Rams' label and mention modes let you aim it at specific pull requests.
Rams pricing
Listed on Rams pricing on September 14, 2026, per month billed yearly: Free, $0 for one public repository and 30 reviews; Solo, $33 for one private repository and 50 reviews a month; Studio, $149 for unlimited repositories and 300 reviews; Team, $399 for 500 reviews then $0.90 each, with blocking and a 14-day trial; Gate, from $999 base, early access; Enterprise, custom. A Review Pack is $24 for 25 reviews. The FAQ lists monthly billing at $39, $179 and $499 for Solo, Studio and Team.
Design Bug Bot gives new accounts 5 successful reviews free, then uses AI credits on a plan that includes AI (billing details).
How to compare them on one repository
- Match the setup. Install both on one React repository. Rams' free tier reviews once per PR by default, so pick the mode you would run in production.
- Seed known problems. Open a pull request with a hardcoded hex where a token exists, a duplicate of an existing component, and a container that overflows at phone width, plus a clean one. Write down the expected findings first.
- Read the evidence. Check whether each fix uses a component or token that exists, and which findings came with a screenshot.
- Push a fix. Rams re-reviews on push on paid plans; Design Bug Bot updates its comment and posts a new check. Time how long each finding takes your team to decide.
For a wider shortlist, see the AI UI design review tools guide, or define what counts as established with a design system consistency audit.
Frequently asked
- How does Rams.ai score a pull request?
- Rams scores UI changes from 0 to 100 against 313 rules in 9 categories, deducting by severity. Critical findings cap the score at 59, 49 or 39 for one, two, or three or more, so a score of 60 or higher means no criticals.
- Can Rams block a merge?
- Its pricing lists failing the PR check on critical findings for Team and Gate, and its GitHub Action can fail on criticals or a score threshold. The GitHub App page says its own reviews do not block merges. Design Bug Bot is advisory only.
- Does Rams review SwiftUI, Vue or Svelte code?
- Yes. Rams' FAQ lists Next.js, React, Angular, Vue, Svelte, SvelteKit, React Native and vanilla HTML and CSS, and its rules page adds SwiftUI through a Native category. Design Bug Bot focuses on React codebases such as Next.js and Vite.
- What does Rams cost compared with Design Bug Bot?
- On September 14, 2026, Rams listed Free for one public repo, then Solo at $33, Studio at $149 and Team at $399 a month billed yearly, with Gate from $999. Design Bug Bot gives 5 successful reviews free, then uses AI credits.