dsh-design

AI-generated pages 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 — these are the tells of a page that was improvised rather than designed. Generators produce output and stop. Prompt-only skills hand the model a rule list with nothing verifying compliance. Static CSS analyzers parse source files and cannot see what the browser actually painted: alpha composited over a real backdrop, utility classes after they resolve, a runtime theme switch, or the tap-target box as laid out.

dsh-design renders the page and measures it. Nine rules cover the gaps that matter: contrast (WCAG AA computed after compositing text alpha over the resolved backdrop), type scale (how many distinct sizes actually rendered), spacing grid (padding, margin, gap values that miss the scale), palette (distinct non-neutral colors, with neutrals excluded by chroma rather than saturation), tap target (interactive elements below the 44 px floor, read as laid-out boxes), line length, default-font fallback, purple gradient (detected by hue angle so Tailwind violet-500 at 258 degrees is caught, not just a 260-degree band), and emoji standing in for icons inside controls. Every finding names the element and the number: p.muted at 1.62:1, needs 4.5:1 — actionable, not "improve contrast."

The bundled design-system skill is the other half of the loop. It front-loads constraints before the agent writes a single component: commit to one direction, lock the palette and type scale first, space on a grid, lead with hierarchy, then run a mandatory design_audit before declaring the work done. Measuring catches drift; the skill is how the agent decides on a system. Thresholds were calibrated against a professionally designed product UI, and three rules were corrected along the way: hairlines (1 px, 2 px) are borders and focus rings, not rhythm; 44 px is a touch guideline, not the WCAG AA bar for desktop icon buttons; and a neutral is a low-chroma color, not a low-saturation one, because saturation collapses at the extremes of lightness.

It is built for developers and small teams who ship landing pages, marketing sites, or product UIs through AI agents and do not want a design reviewer on every pull request. Instead of a subjective "it looks good," the browser opens, reads the computed pixels, and reports which element crossed which threshold at what value — numbers you can argue with, regression-test across runs, and close out.