maintain-design-md

Audit DESIGN.md files for drift against runtime CSS custom properties.

4|Updated May 4, 2026

Search Tags:#design-system #design-tokens #visual-identity #design-documentation #css-custom-properties #drift-audit #stitch-spec

One-click install

npx skills add https://github.com/lossless-group/lossless-agent-skills --skill maintain-design-md

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: maintain-design-md
Source: https://github.com/lossless-group/lossless-agent-skills/tree/main/maintain-design-md
Command: npx skills add https://github.com/lossless-group/lossless-agent-skills --skill maintain-design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the risk of visual drift between a project's runtime CSS and its documented design system, which causes inconsistent user experiences and forces AI agents to make uninformed stylistic decisions when no explicit rule exists.

Core Features & Use Cases

Stitch Spec Compliance: Enforces the Google Stitch open spec for DESIGN.md files, including canonical YAML frontmatter token groups (colors, typography, rounded, spacing, components) and eight ordered prose sections.
Drift Prevention & Reconciliation: Provides clear triggers for when to update DESIGN.md when runtime CSS changes, plus a step-by-step drift audit workflow to catch mismatches between documented tokens and actual CSS custom properties.
Lossless Extension Support: Safely accommodates project-specific off-spec extensions like imagery blocks for OG image generation, mode variants for light/dark themes, and iconography conventions without breaking spec-compliant consumer behavior.
Use Case: Use this Skill when bootstrapping a DESIGN.md for a new Lossless project (splash page, Astro site, plugin landing), auditing an existing DESIGN.md for drift after a visual update, or adding a new component token to the design doc.

Quick Start

Use the maintain-design-md skill to create a Stitch-compliant DESIGN.md for the current project by extracting design tokens from its runtime CSS file and filling the canonical scaffold.

Frequently Asked Questions about maintain-design-md

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

FAQPage Schema

How do I prevent visual drift between runtime CSS custom properties and design tokens?▼

A Stitch-compliant DESIGN.md file requires canonical YAML frontmatter token groups for colors, typography, rounded shapes, spacing, and components, followed by eight ordered prose sections documenting the visual system rules.

How do I bootstrap a DESIGN.md file for a new design system?▼

When runtime CSS changes, you should audit your design documentation for drift. This involves comparing the updated CSS custom properties against the existing documented tokens to catch and reconcile any mismatches.

Can I include custom imagery and dark mode blocks in a Stitch-compliant design doc?▼

Yes, you can safely accommodate project-specific off-spec extensions like imagery blocks for OG image generation, mode variants for light and dark themes, and iconography conventions without breaking spec-compliant consumer behavior.

What is the Google Stitch open spec for design documentation?▼

The Google Stitch open spec is a standard for design system documentation that enforces canonical YAML frontmatter token groups and eight ordered prose sections to maintain consistent visual identity across project runtime CSS.