Menu
Site navigation and actions.
Site navigation and actions.
A designer's eye on every state you changed: polish, design tokens, responsive layouts, themes and visual regressions.
Third card sits 12px lower than its siblings
The cards in the feature row are not aligned, and the last one uses square corners where the others are rounded.
Button colour is not a design token
The checkout button uses #6d8bf2 instead of --primary, and is not in your palette.
A designer's eye on every state of the UI you changed.
A card layout with the problem areas boxed and annotated, plus the viewport it was found at.
Hydrofoil screenshots each state the run visits and a vision model reviews them against good-design principles.
Every state of the UI you changed.
One per state.
A vision model checks good-design principles.
Findings appear in the Hydrofoil dashboard and in your GitHub check, with a severity (blocker, major, minor or nit) and a confidence level. Low-confidence findings are marked Needs reviewand don't fail the check.
What each finding includes.
Turn this review on or off for each repository in repository settings.[TBD: add any check-specific options.]
Checks that the UI actually uses your design tokens and components.
The expected token next to the colour the browser actually computed.
Hydrofoil reads your tokens from CSS variables and the Tailwind config, compares them to computed styles in the browser, and uses AI to spot hand-rolled lookalikes.
From CSS variables and the Tailwind config.
Check what the browser renders.
AI finds hand-rolled components.
Findings appear in the Hydrofoil dashboard and in your GitHub check, with a severity (blocker, major, minor or nit) and a confidence level. Low-confidence findings are marked Needs reviewand don't fail the check.
What each finding includes.
Turn this review on or off for each repository in repository settings.[TBD: add any check-specific options.]
Reviews your UI at phone, tablet, desktop and wide-screen sizes.
The same page at three widths. The narrow one shows a clipped field.
The browser re-renders each state at several viewport sizes. Checks look for overflow and tap-target size; AI reviews the screenshots.
Re-render each state at several widths.
Look for overflow and tap-target size.
AI looks for what the checks can't.
Findings appear in the Hydrofoil dashboard and in your GitHub check, with a severity (blocker, major, minor or nit) and a confidence level. Low-confidence findings are marked Needs reviewand don't fail the check.
What each finding includes.
Turn this review on or off for each repository in repository settings.[TBD: add any check-specific options.]
Checks dark mode and any other themes you ship.
Light and dark versions of the same card, with the missing icon boxed in dark.
The run switches themes and reviews the same states in each.
In the default theme.
Then visit the same states again.
Review each state in every theme.
Findings appear in the Hydrofoil dashboard and in your GitHub check, with a severity (blocker, major, minor or nit) and a confidence level. Low-confidence findings are marked Needs reviewand don't fail the check.
What each finding includes.
Turn this review on or off for each repository in repository settings.[TBD: add any check-specific options.]
Compares your PR's preview with your base version and says which changes are intended.
Drag between base and PR. Differences are highlighted and each is classified.
Hydrofoil screenshots the same states on the base deployment (production or main preview) and on the PR, computes pixel differences, then AI classifies each as intended (explained by the PR or criteria) or unintended regression.
The same states on base and on the PR.
Find every visual difference.
Intended, or an unintended regression.
Findings appear in the Hydrofoil dashboard and in your GitHub check, with a severity (blocker, major, minor or nit) and a confidence level. Low-confidence findings are marked Needs reviewand don't fail the check.
What each finding includes.
Turn this review on or off for each repository in repository settings.[TBD: add any check-specific options.]
Compares the built UI with the Figma frames linked from your ticket or PR.
Design fidelity will compare what you built with the Figma frames linked from your ticket or PR, and mark where they differ.
A mock of what a finding could look like: the Figma frame beside the built UI, with differences marked.
[TBD: confirm you want this]
Hydrofoil opens each preview in a real browser and posts what it finds to GitHub.