Harness Design System

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

18|11|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/Intense-Visions/harness-engineering --skill harness-design-system
Or copy as Structured Prompt for Agent
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.