Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →rampstackco/design-standards
Apply production-grade design standards when building or reviewing pages, components, or UI.
Passed 16 of 22 test cases with the skill, and 14 of 22 without it.
2 fixed14 passed either way6 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Specify the minimum required color token categories that must be established before building web components.
| Checked | Without skill | With skill |
|---|---|---|
| Include primary brand color and primary hover variants. | Passed | Passed |
| Include text scale tokens covering heading, body, muted, and on-dark text. | Missed | Passed |
The instructions your model reads when the skill loads.
Production design standards for any web project. Stack-agnostic. Tool-agnostic. Covers tokens, contrast, hierarchy, spacing, mobile rules, and the pre-ship checklist.
This skill complements brand-identity (which defines the visual system) and brand-style-guide (which documents it). This skill is for the day-to-day work of applying those standards in real components and pages.
brand-identity)brand-style-guide)design-system)frontend-component-build)accessibility-audit)If brand tokens are undefined, define a working set first using the template in references/design-tokens-template.md.
Six standards apply to every piece of UI. Hold the line on these and most design problems disappear.
test cases passed, vs 14 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.