skills.rest
Yukine5377
Yukine5377COMMUNITY
Explore all skills by this author →
GitHub

ba-brand-demo-gen

Convert Markdown brand guidelines into standalone HTML demos with inline CSS.

Updated Apr 12, 2026
Search Tags:#markdown#accessibility#design-system#css-variables#token-extraction#brand-guideline#html-demo
One-click install
npx skills add https://github.com/Yukine5377/common --skill ba-brand-demo-gen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ba-brand-demo-gen
Source: https://github.com/Yukine5377/common/tree/main/.cursor/skills/ba-brand-demo-gen
Command: npx skills add https://github.com/Yukine5377/common --skill ba-brand-demo-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates turning a brand guideline in Markdown into a standalone HTML demo that can run directly in a browser, enabling quick visual previews of the design system.

Core Features & Use Cases

  • Extract design tokens and metadata from the Markdown brand guideline.
  • Generate a self-contained HTML demo with CSS variables and inline styles, including fonts from Google Fonts, accessible and responsive.
  • Support multiple brand guidelines in a project by producing separate HTML demos saved alongside the source files.

Quick Start

Use the skill to convert the brand guideline markdown file into a standalone HTML demo that runs in a browser.

Frequently Asked Questions about ba-brand-demo-gen

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

FAQPage Schema
How do I convert a Markdown brand guideline into an HTML demo?▼

To convert a Markdown brand guideline into an HTML demo, this Skill extracts design tokens and metadata from the Markdown source and outputs a self-contained HTML file. The resulting file includes inline CSS, CSS variables, and Google Fonts for direct browser previews.

What is the best way to generate a visual preview of a design system from Markdown?▼

Generating a visual preview of a design system from Markdown is best handled by transforming the document into a standalone HTML demo. This approach automatically extracts design tokens and applies inline CSS to create an accessible, responsive preview running directly in a browser.

Can I generate separate HTML demos for multiple brand guidelines in a single project?▼

Yes, you can generate separate HTML demos for multiple brand guidelines in a single project. The Skill processes each Markdown file individually, extracting its specific design tokens and saving the resulting self-contained HTML demo alongside the original source file.

Do I need external CSS files to run the generated brand guideline HTML demo?▼

No, you do not need external CSS files to run the generated brand guideline HTML demo. The output is a completely self-contained HTML file with inline CSS and CSS variables, requiring only a web browser to render the design system preview directly.

Does the generated HTML demo include accessible and responsive design tokens?▼

Yes, the generated HTML demo includes accessible and responsive design tokens. The Skill extracts token specifications from the Markdown brand guideline and applies them via CSS variables within a standalone HTML file, ensuring the visual preview meets accessibility standards.

Related Skills

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

ckm:brand

Manage brand voice, visual identity, and asset compliance through scripts and reference frameworks.

Community
Intermediate
LeckyHuangLeckyHuang

cloud-design

Create standalone HTML/CSS/JS visual deliverables without a build step.

Community
Advanced
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate
Victory-HugoVictory-Hugo
1

markitdown

Convert PDF, DOCX, PPTX, XLSX, and other documents to Markdown.

Community
Advanced