What is the design-standards skill?
The design-standards skill is a stack-agnostic SKILL.md in the rampstackco skills library. It makes an AI coding agent apply six standards when building or reviewing UI: design tokens, WCAG AA contrast, visual hierarchy, spacing, mobile rules and component consistency. It ends with a pre-ship checklist and review notes with specific fixes.
It is one of 103 skills in the rampstackco library, written to be stack-agnostic and tool-agnostic. The skill covers tokens, contrast, hierarchy, spacing, mobile rules and a pre-ship checklist for any web project.
The skill says it complements brand-identity and brand-style-guide from the same library. Those define and document the visual system, while this one applies it day to day in real components and pages.
The six standards
- Design tokens: color, spacing, type and radius values defined once and referenced everywhere.
- WCAG AA contrast: treated as a baseline, not a preference.
- Visual hierarchy: size, weight, color, spacing and position set the scan order.
- Spacing and rhythm: a consistent scale, with proximity grouping related elements.
- Mobile rules: a 375 to 390 pixel viewport check and 44 by 44 pixel touch targets.
- Component consistency: one primary, one secondary and one ghost button, not five.
Numbers the skill enforces
| Rule | Requirement |
|---|---|
| Normal body text contrast | 4.5:1 |
| Large text contrast (18pt regular or 14pt bold) | 3:1 |
| UI components and graphical elements | 3:1 |
| Section breathing room | 64px desktop, 48px mobile |
| Card padding | 24px desktop, 16px mobile |
| Touch targets | 44 by 44 pixels |
| Form input text size | 16px or more, to avoid iOS auto-zoom |
How a session runs
- Confirm tokens, or define a working set from the bundled template.
- Sketch the hierarchy: primary action, secondary actions and supporting content.
- Build mobile-first and apply tokens instead of hardcoded values.
- Check contrast, then test at 375, 768, 1024 and 1440 pixels.
- Run the pre-ship checklist and return pass or fail notes.
Who the design-standards skill is for
Best for
- Building or reviewing a page, section or component where contrast and spacing matter.
- Starting a project with no tokens defined yet.
- A last design pass before shipping, using the pre-ship checklist.
Not for
- Defining a brand identity from scratch, or documenting a finished brand system. The library points to separate skills for both.
- A formal component library. For that, read design-system-patterns.
- A WCAG-only audit with remediation. A dedicated skill such as accessibility-audit goes deeper.
Use it with UiChemy
Run the six standards on a page your agent built, then bring it into WordPress with UiChemy AI to WordPress, or start from a Figma file with Figma to WordPress. Click Get Started on uichemy.com, and recheck contrast and touch targets on the final page.
How to install Design Standards Skill: Six Rules for Production UI
/plugin marketplace add rampstackco/claude-skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add rampstackco/claude-skills, the install route the README leads with.Install the full catalog
Run
/plugin install rampstack-skills@rampstackfor the full catalog. The README also lists rampstack-starter, rampstack-seo and rampstack-pm as smaller subsets, but does not say which one includes design-standards.Or fetch only this skill
Run
git clone https://github.com/rampstackco/claude-skills.gitand copydist/codex/.agents/skills/design-standardsinto the folder where your agent loads skills.Ask for a design pass
Use a trigger from the skill description, such as build a page, review the UI, fix the layout or check design quality.
Check that it loaded
Ask the agent to review one component. It should check tokens, WCAG AA contrast, hierarchy, spacing, mobile behavior and consistency, then return notes with specific fixes.
Key features
- Tokens before UIThe skill asks for color, spacing, type and radius tokens to exist before any UI is built, and calls hardcoded values technical debt.
- Token templateWhen a project has no tokens, the agent defines a working set from the bundled design-tokens-template.md reference instead of inventing values on the fly.
- WCAG AA contrastBody text needs 4.5:1, large text and UI components need 3:1. The skill names failures such as light gray body text on white and brand colors used as text.
- Hierarchy leversSize, weight, color, spacing and position decide what is noticed first. Several elements styled as the primary call to action count as a failure.
- Spacing scaleSpacing comes from a scale such as 4, 8, 12, 16, 24, 32, 48, 64 and 96, with minimums for sections, cards and form fields.
- Mobile checksBody text is never under 14 pixels, tap targets get 8 pixels of spacing, modals scroll while the body locks, and sticky bottom bars need matching page padding.
- Component consistencyOne base card pattern with variants, one icon stroke weight, one avatar shape rule and one set of input states used everywhere.
- Named failure patternsDesigning without tokens, skipping contrast checks, desktop-only design, rounded-everything, hierarchy mush, touch target violations and component drift.
- Review outputReviews come back as markdown notes scored against the six standards with specific fixes, plus pass or fail results from the pre-ship checklist.
- Optional Tailwind patternsA tailwind-patterns.md reference covers hero, card, button and data row patterns for projects on that stack, while the main SKILL.md stays stack-agnostic.
Frequently asked questions
What is the design-standards skill?
It is a skill in the rampstackco/claude-skills library that makes an AI coding agent apply six production design standards to pages and components. They cover tokens, WCAG AA contrast, visual hierarchy, spacing, mobile rules and component consistency. It is stack-agnostic and finishes with a pre-ship checklist.
How do I install the design-standards skill?
In Claude Code, add the marketplace with /plugin marketplace add rampstackco/claude-skills, then install the full catalog with /plugin install rampstack-skills@rampstack. Alternatively, clone the repository and copy the design-standards skill folder into the place your agent loads skills from.
What contrast ratios does the skill require?
It requires 4.5:1 for normal body text, 3:1 for large text defined as 18pt regular or 14pt bold, and 3:1 for UI components and graphical elements. It calls WCAG AA contrast non-negotiable and points to a separate brand-identity reference for the math and brand color strategies.
What mobile rules does it enforce?
Test on a 375 to 390 pixel viewport, keep interactive elements at least 44 by 44 pixels, space tap targets at least 8 pixels apart, keep body text at 14 pixels or more, and set form inputs to 16 pixels or more to prevent iOS auto-zoom. See web-design-guidelines for a code-level review.
Does the skill require Tailwind or a specific framework?
No. The SKILL.md describes itself as stack-agnostic and tool-agnostic. Stack-specific patterns live in reference files, and the Tailwind patterns file is marked optional for projects on that stack. Tokens can be defined in any format, with the template as a starting point.
Which AI coding agents can use the design-standards skill?
The README says skills work across Claude.ai, Claude Code and the Anthropic API. It documents plugin installs for Claude Code only. The repository also keeps a copy under dist/codex/.agents/skills, but the README does not say which other agents that targets, so test it in yours.
How is design-standards different from a design system skill?
The skill says it applies standards in day-to-day pages and components, while building a formal component library belongs to a separate design-system skill in the same library. For token naming and structure, design-token covers that ground in more depth.
What license does the repository use?
The README shows an MIT license badge, and GitHub lists the repository license as MIT. That covers the skills collection. If you plan to redistribute the skill folder inside a product, confirm the license file in the repository first.