skills.rest
shakhovskiya-create
shakhovskiya-createCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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
One-click install
npx skills add https://github.com/shakhovskiya-create/shakhoff-claude-marketplace --skill design-md-shakhovskiya-create
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
DengNaichenDengNaichen
34

speckit-plan

Execute a structured implementation planning workflow to generate design artifacts and technical specifications.

Community
Advanced
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced