Design Standards
Apply production-grade design standards when building or reviewing pages, components...
Install
npx skills add rampstackco/claude-skills --skill design-standards -g -a claude-code -y- Repository
- rampstackco/claude-skills1k
- Category
- Design
- Updated
- 9d ago
- License
- MIT
- Context cost
- Mediumabout 2,218 tokens
- Runs scripts
- No, instructions only
What it does
Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design decision where contrast, accessibility, spacing, or visual hierarchy matters.
Design Standards
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.
When to use
- Building a new page, section, or component
- Reviewing UI for quality, accessibility, or consistency
- Setting up design tokens for a new project
- Fixing layout, contrast, or hierarchy issues
- Establishing a button or form standard
- Pre-ship design review
When NOT to use
- Defining a brand identity from scratch (use
brand-identity) - Documenting a finished brand system (use
brand-style-guide) - Building a formal component library (use
design-system) - Frontend code architecture (use
frontend-component-build) - Accessibility-only audits with WCAG remediation (use
accessibility-audit)
Required inputs
- The page or component being built or reviewed
- The brand's design tokens (colors, type, spacing) - or willingness to define them
- The target devices and viewports
If brand tokens are undefined, define a working set first using the template in references/design-tokens-template.md.
The framework: 6 standards
Six standards apply to every piece of UI. Hold the line on these and most design problems disappear.
1. Design tokens
Every project needs tokens defined before any UI gets built. Tokens are the source of truth.
Color tokens (minimum):
- Primary brand color
- Primary hover (typically 15 to 25 percent darker)
- Background variants (surface, alt-section, hero/dark, footer)
- Text scale (heading, body, muted, on-dark)
- Semantic (success, warning, error, info)
