dsh-design

Pages generated by AI agents are rarely ugly; they are "right but off" — eleven type sizes with no scale, spacing values that belong to no grid, an unprompted violet gradient, emoji standing in for icons. Generators stop after producing output, prompt-only skills hand the model a rule list with nothing verifying compliance, and static CSS analyzers cannot see what the browser actually painted: alpha composited over the real backdrop, utility classes after resolution, a runtime theme switch, or the tap-target box as laid out. dsh-design renders the page and measures it. Nine rules — contrast (WCAG AA with real-backdrop compositing), type scale, spacing grid, palette (chroma-based neutral exclusion), tap target, line length, default-font fallback, purple gradient (detected by hue angle, not string match), and emoji-in-controls — each finding names the element and the number: p.muted at 1.62:1 (needs 4.5:1), not "improve contrast."

The other half is the bundled design-system skill, which front-loads constraints before the agent writes a single component: commit to one direction, lock the palette and type scale, space on a grid, lead with hierarchy — then run a mandatory design_audit before claiming the work is done. Measuring only catches drift; the skill is how the agent decides on a system in the first place. Together they form a constrain-generate-audit-correct loop. Thresholds were calibrated against a professionally designed product UI, correcting edge cases around hairlines, desktop icon buttons, and low-chroma neutrals so a consistent project is not asked to abandon its own system.

Built for developers and small teams shipping landing pages, marketing sites, or product UIs through AI agents. You do not need a design reviewer on every PR; you need a tool that opens the browser, reads the computed pixels, and reports which element at which coordinate crossed which threshold — so "it looks good" becomes a set of numbers you can argue with, regression-test, and close out.