Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Introduction to Design Systems/Interface Inventory & Eliminating UI Debt/
Exercise #6

Automating UI Debt Prevention with Linters

Consolidating components is only half the battle. How do you prevent developers from immediately introducing new UI debt by typing color: #0052cc next week?

High-performing teams automate discipline using ESLint and Stylelint rules:

  1. Ban Raw Hex Values: A Stylelint rule flags any raw hex code (#3B82F6) or raw pixel margin (margin: 17px), prompting the developer with an auto-fix to the corresponding design token.
  2. Restricted Imports: An ESLint rule blocks direct imports of raw HTML elements (like native <button> or <select>), requiring squads to import <Button> and <Select> from @system/react.
  3. CI Check Enforcement: If a PR introduces banned styles, the automated CI pipeline fails the build before code can be merged.

Topics

What Is an Interface Inventory?
Quantifying UI Debt: The Power of Embarrassing Numbers
Categorizing Discrepancies: Visual vs Functional
The Consolidation Workshop: Building Cross-Team Consensus
Migration Strategies: The Strangler Fig Pattern
Automating UI Debt Prevention with Linters
Design Linting in Figma: Stopping Debt at the Source
Tracking System Adoption Over Time
Challenge: Formulating an Interface Inventory Action Plan
design

From lesson

1

Interface Inventory & Eliminating UI Debt

Level 5 · Auditing & Multi-Brand Theming

Top contributors

Community contribution details will appear here once real learner activity is available.

Share