AI product Open source
ai-design-check is a zero-dependency design-rule checker and agent skill for interfaces built with AI coding agents. It reads web projects including React, Vue, Svelte, Laravel Blade, and HTML, as well as SwiftUI, Jetpack Compose, Flutter, and React Native code, and reports findings with the file and line where a rule is broken. Its rules cover accessibility, responsive layouts, type and spacing scales, component reuse, writing and localization, visual language, motion, and data presentation. The checker can apply mechanical fixes without an agent, while its installed skills can measure a screen, write a design brief, and have an agent repair the remaining issues on a new branch. Additional commands scan a running page in Chrome, inventory component variations, test narrow layouts and long-language content, generate a design system, and create before-and-after videos. It runs through the npm package on Node 20+, supports CI output and pull-request annotations, and is licensed under MIT.
1 use taken from transcripts — each links to the moment in the video.
A set of 74 design rules plus a checker for interfaces built by AI coding agents. Run it on your React, Svelte, or HTML files and it points to the exact line where a rule breaks, like a font size off your scale or an icon button with no label.
1 in the library.