Does this replace standard CSS frameworks?

No, it works alongside them. It provides the logic and decision-making rules that dictate how to use your CSS variables and utility classes consistently.

How does this skill improve frontend development?

It moves beyond basic layout by applying systematic rules for colors, spacing, and typography, ensuring that every component feels like part of a cohesive whole rather than a random assembly.

What is the '70-90-10' color rule mentioned in the skill?

It is a heuristic for proportional dominance: 70-90% neutral base, 10-25% supporting colors, and 1-8% accent colors to ensure clear visual hierarchy and focus.

Can I use this for brand-specific designs?

Yes. It uses 'Constraint-First Brand Framing' to define what a design is NOT (e.g., 'not corporate'), which helps filter and steer the AI toward the desired brand identity.

Frontend Design Systems

Name: Frontend Design Systems
Author: jimeh

byjimeh

•

Design Tools

Implements systematic visual rules and design heuristics to ensure consistency, hierarchy, and scalability across frontend user interfaces.

The Frontend Design Systems skill provides a rigorous framework for building scalable UI by applying deterministic visual rules instead of stylistic improvisation. It augments existing layout logic with professional graphic design heuristics, including proportional color distribution, typography superfamilies, and unified geometry tokens. By evaluating designs at both macro and micro scales and enforcing strict brand constraints, this skill ensures that AI-generated interfaces are cohesive, intentional, and optimized for rapid user comprehension.

Key Features

01Unified Typography Superfamily Strategy for semantic hierarchy

02Dual-Scale Validation (Macro flow and Micro precision)

03Proportional Color Ratio System (70-90% neutral, 10-25% support, 1-8% accent)

04Standardized Geometry Tokens for consistent radii, spacing, and elevation

05Constraint-First Brand Framing to filter stylistic decisions

061 GitHub stars

Use Cases

01Building a comprehensive design system from scratch with repeatable rules

02Establishing high-speed visual hierarchy for data-heavy web applications

03Normalizing inconsistent UI components into a unified visual language

Key Features

01Unified Typography Superfamily Strategy for semantic hierarchy

02Dual-Scale Validation (Macro flow and Micro precision)

03Proportional Color Ratio System (70-90% neutral, 10-25% support, 1-8% accent)

04Standardized Geometry Tokens for consistent radii, spacing, and elevation

05Constraint-First Brand Framing to filter stylistic decisions

061 GitHub stars

Use Cases

01Building a comprehensive design system from scratch with repeatable rules

02Establishing high-speed visual hierarchy for data-heavy web applications

03Normalizing inconsistent UI components into a unified visual language