skills.rest
fikriaf
fikriafCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Validate DESIGN.md files against Google's spec and check WCAG contrast.

Updated Apr 29, 2026
Search Tags:#accessibility#design system#UI development#tokens#DESIGN.md
One-click install
npx skills add https://github.com/fikriaf/agentos --skill design-md-fikriaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/fikriaf/agentos/tree/main/src/agentos/skills/creative/design-md
Command: npx skills add https://github.com/fikriaf/agentos --skill design-md-fikriaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables users to create, validate, and manage Google's DESIGN.md files, which are essential for consistent design systems and brand standards.

Core Features & Use Cases

  • Authoring & Validation: Generate or modify DESIGN.md files for a design system.
  • Diffs & Accessibility Checks: Compare different versions and ensure WCAG compliance.
  • Exporting: Convert DESIGN.md files to Tailwind or W3C DTCG JSON formats for further use.
  • Use Case: When creating a new design system, this skill helps define tokens and principles, ensuring consistency across all design elements.

Quick Start

Write a new DESIGN.md file with essential design tokens and rationale.

Frequently Asked Questions about design-md

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

FAQPage Schema
What is a DESIGN.md file and when do I need one for my design system?▼

DESIGN.md files document design tokens and brand standards to ensure consistency across UI elements. You need one when creating a design system intended for automated use by coding agents.

How do I validate a DESIGN.md file against the Google specification?▼

You validate a DESIGN.md file by running it through the validation tool, which checks its structure against Google's spec to ensure tokens are correctly formatted for automated parsing.

Can I check WCAG color contrast compliance for my design tokens?▼

Yes, you can check WCAG contrast compliance for design tokens. The skill provides accessibility checking tools to ensure your UI development colors meet required WCAG standards.

How do I convert a DESIGN.md file to Tailwind or W3C DTCG JSON format?▼

You convert a DESIGN.md file by using the export feature, which outputs your design tokens into Tailwind or W3C DTCG JSON formats for direct integration into UI development environments.

What is the best way to compare different versions of a design system?▼

The best way to compare design system versions is using the diff tool. It processes different versions of DESIGN.md files to highlight changes in design tokens and accessibility rules.

Does this skill work without external dependencies for UI development?▼

Yes, the skill works without external dependencies. It includes built-in scripts, references, and assets to independently author, validate, and export DESIGN.md files for your design system.

Related Skills

Explore More Design & Creative Skills→
binfen1binfen1

design-style

Apply brand design systems to UI projects by reading DESIGN.md guidelines.

Community
Intermediate
matthew-johnsonmatthew-johnson

design-md

Validate DESIGN.md token files for type correctness and export readiness.

Community
Intermediate
robertbr123robertbr123

design-md

Generate and validate Google DESIGN.md files, exporting tokens to Tailwind and W3C DTCG formats.

Community
Intermediate
jubscodesjubscodes
49

gsp-accessibility

Check inline WCAG contrast and audit brand tokens for accessibility compliance.

Community
Advanced