skills.rest
liumeixin
liumeixinCOMMUNITY
Explore all skills by this author →
GitHub

design-md-preview-generator

Generate HTML previews from DESIGN.md files and capture screenshots with Playwright.

4|Updated May 14, 2026
Search Tags:#design system#Playwright#screenshot capture#DESIGN.md#preview generation
One-click install
npx skills add https://github.com/liumeixin/hermes-skills --skill design-md-preview-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md-preview-generator
Source: https://github.com/liumeixin/hermes-skills/tree/main/design-md-preview-generator
Command: npx skills add https://github.com/liumeixin/hermes-skills --skill design-md-preview-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pyyaml, jinja2, playwright, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the need for generating visual previews from DESIGN.md files, streamlining the design process and eliminating the need for manual preview creation.

Core Features & Use Cases

  • Preview Generation: Automatically generates HTML preview pages from DESIGN.md files.
  • Screenshot Capture: Captures screenshots of the generated previews using Playwright.
  • Use Case: Ideal for designers who need to quickly view and share design mockups without manually generating preview pages.

Quick Start

Run the design-md-preview-generator skill to create a preview of your DESIGN.md file.

Frequently Asked Questions about design-md-preview-generator

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

FAQPage Schema
How do I generate an HTML preview from a DESIGN.md file?▼

To generate an HTML preview from a DESIGN.md file, use a tool that parses YAML frontmatter and converts the markdown into a visual HTML page. This Skill automates that process specifically for design system documentation.

Can I capture screenshots of my design system documentation automatically?▼

Yes, you can capture screenshots of design system documentation automatically using Playwright. This Skill triggers Playwright to take screenshots of the generated HTML previews from your DESIGN.md files.

Do I need Playwright and Jinja2 to automate DESIGN.md preview generation?▼

Yes, you need Playwright, Jinja2, and PyYAML installed to automate DESIGN.md preview generation. These dependencies handle browser automation for screenshots, HTML templating, and parsing YAML frontmatter respectively.

What's the best way to share design mockups without manually creating preview pages?▼

The best way to share design mockups without manual preview pages is to automate HTML generation and screenshot capture directly from DESIGN.md files. This approach streamlines the design workflow and produces shareable visual outputs.

Does this DESIGN.md preview generator work with markdown files containing YAML frontmatter?▼

Yes, this DESIGN.md preview generator works with markdown files containing YAML frontmatter. It parses the YAML metadata using PyYAML to structure the generated HTML preview pages correctly.

Why use Playwright for capturing screenshots of generated HTML previews?▼

Playwright is used for capturing screenshots of generated HTML previews because it provides reliable browser automation. This ensures accurate visual capture of the design system documentation rendered from DESIGN.md files.

Related Skills

Explore More Design & Creative Skills→
MegaSuperKittyMegaSuperKitty
367

report-html-windows

Convert Markdown to HTML reports using a Jinja2 template in Python.

Community
Intermediate
GrassHopper42GrassHopper42

design-consultation

Generate design system proposals, HTML previews, and DESIGN.md documentation.

Community
Advanced
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate
whichguywhichguy

html-artifact

Generate self-contained HTML files from Markdown content.

Community
Intermediate