Make every screen look professional.
AI builds every screen its own way: a color here, a different button there, a menu that vanishes on mobile. Faundr writes your design guide with you and checks every screen on mobile and desktop. Your AI then fixes whatever’s off.
Every design issue in your app, in one list. Fix them all with one command.
Text almost nobody can read, an input that makes iPhone zoom, a slightly-off gray on one screen. These slip right past you. Faundr catches every one. Run /faundr:design-fix and your AI works through them until they’re all gone. Faundr keeps watching every session as you build, and anything that’s gone by the next check closes on its own.
- D-31Menu overflows the screen on mobile resolvedHigh
Checkout · 375 px
- D-28Low-contrast gray text (2.1 : 1) resolvedHigh
src/components/Price.tsx:14
- D-27Search input triggers iPhone zoom resolvedHigh
src/components/Search.tsx:9
- D-24Icon-only button has no screen reader label resolvedMedium
src/components/Cart.tsx:52
- D-22A gray that isn’t in the palette resolvedMedium
src/routes/account.tsx:31
- D-19Same button rebuilt in 4 files resolvedMedium
src/routes/
What makes an app look amateur. And you rarely spot it yourself.
Every screen looks different.
AI builds each screen on a different day. A rounded button here, a square one there, a new shade of gray on every page. Customers can’t say what’s wrong, but it feels amateur.
Faundr checks
- Colors that aren’t in your palette
- Mixed grays and icon sets
- The same button rebuilt across files
It breaks on phones.
Looks perfect on a laptop. On a phone, the menu runs off the screen, the page scrolls sideways and the button is too small to tap.
Faundr checks
- Every screen tested at 375, 768, 1024 and 1440 px
- Tap targets under 44 px
- Inputs that trigger iPhone zoom
Some people can’t use it.
Light gray text that’s unreadable in sunlight. Buttons screen readers can’t announce. A focus ring that disappears for keyboard users.
Faundr checks
- Text contrast of at least 4.5:1
- Icon-only buttons without a label
- Removed focus outlines
First, Faundr learns your app’s look. Then it writes the guide with you.
/faundr:design reads the colors, fonts and components your app already uses, then asks you a few questions. Your answers become the design guide. From then on, every screen gets checked against it, and your AI follows it whenever it builds a new one.
Question 2 of 4 · Colors
Your app uses black #151515, white and neutral grays. Is that your palette?
- Black #151515 and whiterecommended
- Black and white with one accentyou pick the color
- Something elseyou describe it
The first option always comes from what your app already uses. Nothing gets written until you approve it.
Every screen on phone, tablet and desktop. With a real number for every problem.
During a full audit, your agent opens every screen at four widths and measures the problems you only catch on a real device. Light and dark theme? It measures both: the main one at every width, the other on phone and desktop. Drag the slider to see what changes.
No issues at this width.
Checked at every width
- Horizontal scrolland anything overflowing the edge
- Too small to tapunder 44 px on phones
- Clipped textwithout an ellipsis
- Real contrastagainst the actual background
- Text too smallunder 12 px
- Slow animationover 300 ms after a click
- Text hugging the edgeon phones
- Both themesa logo or border that vanishes in dark mode
- Menus and keyboardclipped dropdowns, disappearing focus
0
automated rules across nine groups. Along with 7 in-browser measurements, in both themes, and an AI review of every screen.
- Mobile11disabled zoom, grids with no mobile layout, 100vh
- Accessibility13removed focus, unlabeled buttons, images without alt text
- Motion10slow animations, bounce easing, transition-all
- App identity9no favicon, “Vite + React” title, no meta description
- Off-brand13off-palette colors, mixed grays, colors that skip the dark theme
- Content4“Lorem ipsum”, “John Doe”, “Click here”
- Best practices3dead links, buttons that skip the component
- Repetition1the same styles copy-pasted everywhere
- Visual bug1menus that can open clipped
A quality floor.Minimums every screen has to hit: contrast, tap size, text size, animation.
Web, React Native and Flutter.React, Vue, Angular, Svelte, Astro, PHP and plain HTML, with Tailwind, CSS or Sass. Some rules are written just for phone apps.
Your call wins.If your guide says otherwise, the rule backs off. You can also switch any rule off.
Every component in your app, on one canvas. Side by side, in one place.
The Showcase renders the buttons, inputs, filters and cards your app uses side by side, with their real styles. Spot what matches and what drifted at a glance. Below is Faundr’s own Showcase. Click a component to see its specs.
Palette
- ink
- ink-raised
- ink-line
- ink-line-strong
- neutral-400
- white
Components
Primary button
.f-btn
- height
- 32 px · 44 on mobile
- background
- white
- text
- ink · 14 px · weight 500
- corner
- 8 px cut corner, like the logo
Colors appear under their names from the guide. Edit a component’s file and the Showcase flags it as stale.
AI makes beautiful screens, one at a time. Faundr makes them all match.
In a session, your AI nails the screen you asked for. It just doesn’t remember how it built the others, never opens the app on a phone and doesn’t measure contrast. Faundr hands it the guide and checks the result.
Supported languages
The rules read your screens in each of these, with nothing to install. Back-end-only languages like Go or Rust have no screens to check.
- JavaScript & TypeScript
- React Native
- Vue
- Angular
- Svelte & Astro
- Flutter & Dart
- PHP
- Kotlin (AI review only)
- HTML
- CSS
- Tailwind
- Kotlin · AI review only (your AI agent audits it by reading the screens (/faundr:design))
Four layers. From automated rules to a full browser audit.
The rules run locally and use no AI. Your agent only steps in on the screens it touched and when you ask for a full audit.
Session start
Checks, no AI.
The 65 rules run locally in seconds and use zero tokens.
End of every reply
Changed screens.
The AI reviews only the screens it touched, against your guide and the quality floor.
On demand
Full audit.
Every screen measured in the browser at four widths, with menus open and keyboard navigation.
Fixing
/faundr:design-fix.
From blockers to polish. Nothing’s marked resolved until the app builds.
FAQ
I don’t know anything about design. Is this for me?
Yes. Faundr asks simple questions, and the first option always comes from what your app already uses. You just pick one.
Will it change my app’s design without asking?
No. Checks only flag issues. Fixes happen when you ask for them, and your AI never touches URLs, navigation, form fields, your logo or legal copy without checking with you first.
Does it use my tokens?
The 65 rules run locally, with no AI. Reviewing changed screens, full audits, the Showcase and fixes use tokens from your own AI plan.
What if it’s like that on purpose?
Archive the issue as a design decision, a false positive or “doesn’t apply”, for that one instance or the whole rule. Or add faundr-ignore in the code with a reason. To skip whole folders, like third-party code, list them in .faundrignore.
Will it work with my stack?
Screens in React, Vue, Angular, Svelte, Astro, React Native, Flutter, PHP or plain HTML, with Tailwind, CSS or Sass, with nothing to install. Android screens in Kotlin get your AI’s review instead of the automatic rules. Browser measurements are for web apps and need your app running locally.