skills.rest
XyHalcyon
XyHalcyonCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Author, validate, and export Google DESIGN.md files to Tailwind or W3C DTCG JSON.

Updated Sep 28, 2021
Search Tags:#ui#accessibility#tokens#design-system#design.md
One-click install
npx skills add https://github.com/XyHalcyon/config-files --skill design-md-xyhalcyon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/XyHalcyon/config-files/tree/main/hermes/skills/creative/design-md
Command: npx skills add https://github.com/XyHalcyon/config-files --skill design-md-xyhalcyon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-labs-code, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the creation, validation, and export of Google's DESIGN.md files, streamlining the process of designing a visual identity for coding agents.

Core Features & Use Cases

  • Author & Validate: Create and validate DESIGN.md files, ensuring they meet Google's standards.
  • Export: Convert DESIGN.md files to Tailwind or W3C DTCG JSON formats for easy implementation.
  • Use Case: Ideal for designers or developers looking to standardize UI/brand elements across multiple projects using Google's DESIGN.md specification.

Quick Start

Use the 'design-md' skill to validate the structure and WCAG compliance of your existing 'DESIGN.md' file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I validate a DESIGN.md file for WCAG compliance and token integrity?▼

To validate a DESIGN.md file, this skill checks the structure against Google's specification, verifying token integrity and ensuring WCAG compliance for your visual identity definitions. It flags formatting errors and accessibility issues within your design system tokens.

Can I export design tokens from DESIGN.md to Tailwind or W3C DTCG JSON formats?▼

Yes, you can export design tokens from DESIGN.md to Tailwind or W3C DTCG JSON formats. This conversion provides structured JSON output for coding agents, enabling easy implementation of UI design systems across multiple projects.

What is Google's DESIGN.md specification used for in UI design systems?▼

Google's DESIGN.md specification is used to author structured visual identity definitions for coding agents. It standardizes UI and brand elements, ensuring correct format and token integrity for consistent design system implementation.

Do I need to know JSON export formats to author a DESIGN.md file?▼

Yes, authoring and exporting DESIGN.md files requires knowledge of design tokens and JSON export formats. Understanding these concepts is necessary to correctly structure the visual identity definitions and validate them for coding agents.

Does the design-md skill work with existing design system token files?▼

Yes, the skill validates the structure and WCAG compliance of existing DESIGN.md files. It processes your current token definitions to ensure they meet Google's standards before exporting them to Tailwind or W3C DTCG JSON.

Related Skills

Explore More Design & Creative Skills→
AlbertLin821AlbertLin821
2

caveman-compress

Compress natural language markdown memory files into concise caveman-speak format.

Community
Intermediate
shuff57shuff57

design-md

Create, validate, and export Google DESIGN.md files to Tailwind CSS and W3C DTCG JSON.

Community
Intermediate
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced
lxt070409lxt070409
1

design-md

Author, validate, and export Google DESIGN.md files to Tailwind or W3C DTCG JSON.

Community
Intermediate