Harness Design System

Organize design tokens, typography, and spacing into a centralized DTCG-compliant system.

18|11|Updated Mar 16, 2026

Search Tags:#typography #validation #design-system #spacing #design-tokens #palette

Ready to run

npx skills add https://github.com/Intense-Visions/harness-engineering --skill harness-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Harness Design System
Source: https://github.com/Intense-Visions/harness-engineering/tree/main/agents/skills/claude-code/harness-design-system
Command: npx skills add https://github.com/Intense-Visions/harness-engineering --skill harness-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to create and maintain consistent tokens, palettes, typography, and spacing across products, leading to drift and inconsistent experiences.

Core Features & Use Cases

Token generation and governance for colors, typography, and spacing
Palette and typography definitions with automated DESIGN.md generation
Real-world use case: standardizing a new feature's UI across multiple components to ensure consistency.

Quick Start

Initialize tokens, palettes, and typography by running the Harness Design System skill to scaffold a reusable design system.

Frequently Asked Questions about Harness Design System

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage design tokens to prevent UI inconsistency across components?▼

You can manage design tokens by retrieving and organizing typography, spacing, and palettes into a centralized token system. This approach establishes scalable UI governance to prevent drift and maintain consistency across new features and refactoring.

What is a token-first design system and when do I need one?▼

A token-first design system prioritizes generating and governing colors, typography, and spacing before building interfaces. You need this approach when standardizing UI across multiple components or modernizing a design system to eliminate visual drift.

Does the generated design system support DTCG token formats and color contrast validation?▼

Yes, the generated design system satisfies DTCG token formats and includes automated rails for color contrast. It also provides typographic fallbacks and integrates an automated validation flow with a knowledge graph to ensure token integrity.

How do I scaffold a reusable design system with automated documentation?▼

You can scaffold a reusable design system by initializing tokens, palettes, and typography. This process automatically generates a DESIGN.md file, establishing standardized definitions for colors and typography to ensure consistent product experiences.