google-design-md

Name: google-design-md
Availability: InStock
Author: viably-labs

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Updated Mar 10, 2026

Search Tags:#linting #ui-design #design-system #design-guidelines #design-doc #frontend-implementation #token-export

Ready to run

npx skills add https://github.com/viably-labs/vibegent --skill google-design-md-viably-labs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: google-design-md
Source: https://github.com/viably-labs/vibegent/tree/main/.agents/skills/google-design-md
Command: npx skills add https://github.com/viably-labs/vibegent --skill google-design-md-viably-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Align Vibegent UI with a single design-system source of truth by reading, linting, and exporting tokens from DESIGN.md to ensure visual consistency across surfaces.

Core Features & Use Cases

Read DESIGN.md to extract design tokens (colors, typography, spacing) and guide UI implementation.
Lint DESIGN.md to enforce naming, structure, and usage of tokens for consistent visuals across pages and components.
Export tokens to CSS variables or framework formats (e.g., Tailwind) to integrate with frontend workflows.
Use Case: When updating the landing page or component library, rely on DESIGN.md as the definitive reference to ensure alignment with the documented identity.

Quick Start

Lint DESIGN.md and export tokens to align frontend implementation with the documented visual identity.

Frequently Asked Questions about google-design-md

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

FAQPage Schema

How do I lint a design doc to enforce UI token structure?▼

Lint a design doc by validating DESIGN.md to enforce naming, structure, and usage of design tokens. This ensures consistent visual identity across landing pages and component libraries by maintaining a single source of truth for design guidelines.

What is a design-system source of truth for frontend implementation?▼

A design-system source of truth is a documented reference, like DESIGN.md, that defines colors, typography, and spacing. It guides UI implementation by providing a single, authoritative file for visual identity and token extraction.

How do I export design tokens to CSS variables or Tailwind?▼

Export design tokens to CSS variables or framework formats by extracting them from DESIGN.md. This integrates the documented visual identity directly into frontend workflows, bridging the gap between design guidelines and frontend implementation.

Can I use a single DESIGN.md file for both landing pages and component libraries?▼

Yes, you can use a single DESIGN.md file for both landing pages and component libraries. It serves as the definitive reference for token extraction and style conformance, ensuring visual consistency across all surfaces.

Why does my UI design drift from the documented design guidelines?▼

UI design drifts from documented design guidelines when there is no automated linting to enforce token usage. Reading and linting DESIGN.md aligns frontend implementation with the documented identity to prevent visual inconsistencies.