Design checks

Three checks hold the interface your agents write to your design. Each finding names its rule, why it matters and a fix.

• Your DESIGN.md. Add a DESIGN.md with colors, rounded, typography and spacing tokens. An added line that leaves them is flagged: a color outside the palette, a corner or gap off the scale, a type size or typeface the file does not name. The tokens are what is checked; a DESIGN.md with no token block is read as guidance and checks nothing. A file under a folder follows the DESIGN.md nearest above it.
• UI tells. Added interface code is checked against the patterns that make a page read as generated and the accessibility floors those pages miss: placeholder copy and images, emoji icons, vague links, images with no size, development CDNs and more.
• Rendered layout. rendered-layout.js, installed beside the gates, opens each page in Chromium at phone, tablet, laptop and desktop widths. It reports sideways scrolling, text at the screen edge, overlapping or clipped text, long headlines and uneven margins. It needs playwright-core and a Chromium; without them it reports a skip.

Gates lists every UI & UX gate.