skills.rest
guccang
guccangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Create and validate DESIGN.md design system specification files with YAML tokens.

3|1|Updated Apr 19, 2024
Search Tags:#ui#design system#design tokens#wcag#tailwind#design.md#dtcg
One-click install
npx skills add https://github.com/guccang/blogclaw --skill design-md-guccang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/guccang/blogclaw/tree/main/cmd/hermes-agent/vendor/hermes_runtime/skills/creative/design-md
Command: npx skills add https://github.com/guccang/blogclaw --skill design-md-guccang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create consistent, machine-readable design system specifications and avoid fragmented visual guidelines across projects.

Core Features & Use Cases

  • DESIGN.md Authoring: Create structured design token files that combine YAML tokens with human-readable design rationale.
  • Validation and Export Guidance: Check token structure, accessibility considerations, component definitions, and prepare exports for design workflows.
  • Use Case: A product team can use this Skill to convert a brand style guide into a formal design specification that coding agents can reliably apply.

Quick Start

Use the design-md skill to create a DESIGN.md specification for my application's visual identity with appropriate tokens and guidelines.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I create a machine-readable design system specification for coding agents?▼

To create a machine-readable design system specification, you need a structured DESIGN.md file combining YAML front matter for visual tokens with human-readable design rationale. This format ensures coding agents can reliably parse and apply your UI guidelines.

Can I use Tailwind and design tokens together in a single design specification file?▼

Yes, a design specification file can integrate Tailwind and design tokens by structuring them into YAML front matter. This allows you to define canonical visual tokens and usage guidance that are export-compatible for frontend development workflows.

What is a DESIGN.md file and when do I need one for UI design workflows?▼

A DESIGN.md file is a structured specification containing visual tokens, component definitions, and accessibility considerations for UI design workflows. You need one to prevent fragmented visual guidelines and ensure consistent brand systems across projects.

How do I validate design tokens and WCAG accessibility considerations in a design system?▼

You validate design tokens and WCAG accessibility considerations by checking the token structure and usage guidance within your design specification. This process ensures your visual tokens meet accessibility requirements and are structured for export.

Does this design specification approach work for converting a brand style guide into agent-assisted frontend development rules?▼

Yes, this specification approach works for converting a brand style guide into agent-assisted frontend development rules. It transforms visual identity guidelines into a formal, structured specification with YAML tokens that coding agents can reliably apply.

Are there limitations when using DTCG formatted design tokens in a markdown-based design system?▼

When using DTCG formatted design tokens in a markdown-based design system, you must ensure the tokens are structured within YAML front matter. Limitations arise if token validation fails or if the canonical markdown sections lack proper export-compatible structures.

Related Skills

Explore More Design & Creative Skills→
masermediagroup-stackmasermediagroup-stack
1

ckm:brand

Consolidate brand guidelines into a machine-readable reference with tokens and prompts.

Community
Advanced
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
MithrilManMithrilMan

neomithril-component-authoring

Classify UI component work in neomithril-ui to enforce design-system compliance.

Community
Advanced
zm2231zm2231

style-guide-generator

Generate markdown style guides with token documentation and component catalogs.

Community
Advanced