design-md

Name: design-md
Availability: InStock
Author: shakhovskiya-create

Creates a DESIGN.md with machine-readable frontmatter and exports tokens to Tailwind or CSS variables.

Updated May 5, 2026

Search Tags:#design #frontend #tokens #lint #design-system #design-md

Ready to run

npx skills add https://github.com/shakhovskiya-create/shakhoff-claude-marketplace --skill design-md-shakhovskiya-create

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/shakhovskiya-create/shakhoff-claude-marketplace/tree/main/plugins/solo-sdlc/skills/design-md
Command: npx skills add https://github.com/shakhovskiya-create/shakhoff-claude-marketplace --skill design-md-shakhovskiya-create

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DESIGN.md provides a canonical, machine-readable contract for a project's visual identity, ensuring consistent tokens, colors, and typography across teams and sessions.

Core Features & Use Cases

Machine-readable frontmatter at project root that defines the design contract and enables automated validation.
Design-token workflow integration: linting, exporting tokens to Tailwind, CSS variables, or other frameworks.
Persistent contract: binds frontend agents to consistent visual choices and supports cross-project design-system collaboration.

Quick Start

Create a DESIGN.md at your project root describing your visual identity and run the Google Design.md lint tool to validate it.

Frequently Asked Questions about design-md

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

FAQPage Schema

How do I maintain UI consistency across frontend agents using design tokens?▼

Maintain UI consistency by codifying your project's visual identity into a single DESIGN.md file. This canonical source of truth binds frontend agents to consistent visual choices and token definitions across sessions.

Can I export design tokens to Tailwind and CSS variables from a Markdown file?▼

Yes, you can export design tokens to Tailwind, CSS variables, or other design formats. The DESIGN.md workflow validates the Markdown body and extracts tokens for direct integration into frontend frameworks.

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

A DESIGN.md file is a machine-readable contract that defines a project's visual identity at the root level. You need it when a project has a design system, shared component libraries, or requires automated design token validation.

How do I validate YAML frontmatter for a project's visual identity contract?▼

Validate YAML frontmatter by running the DESIGN.md lint tool at your project root. This validates the machine-readable frontmatter structure and ensures the design contract is correctly formatted for automated processing.

Does the design token workflow support extracting tokens from mockups?▼

Yes, the design token workflow supports token extraction from mocks. This allows you to define the visual contract and export extracted tokens directly to Tailwind, CSS variables, or other design formats.

What's the best way to bind frontend agents to consistent visual choices across sessions?▼

The best way to bind frontend agents to consistent visual choices is creating a persistent DESIGN.md contract. This ensures cross-project design-system collaboration and maintains consistent tokens, colors, and typography across teams and sessions.