skills.rest
clovernguyen1010-ship-it
clovernguyen1010-ship-itCOMMUNITY
Explore all skills by this author →
GitHub

ba-brand-demo-gen

Convert Brand Guideline Markdown into standalone HTML demos with inline CSS.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill reads Brand Guideline Markdown files and automatically designs a standalone, browser-ready HTML Demo that visually simulates a complete Design System for quick demos.

Core Features & Use Cases

  • Tokens to CSS: Extract design tokens (colors, typography, spacing) from the guideline and convert them into CSS variables.
  • UI Component Preview: Render color swatches, typographic scale (H1–H6), buttons, forms, and breadcrumbs to demonstrate the brand system.
  • Standalone Demos: Generate a self-contained HTML file next to the source or in a default folder (docs-BA/Prototype/Brand Guideline/) that can be opened directly in a browser.

Quick Start

Convert the current Brand Guideline Markdown into a standalone, browser-ready HTML demo following the HTML Demo Guidelines.

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 brand guidelines markdown into an HTML design system preview?▼

To convert brand guidelines markdown into an HTML design system preview, this Skill extracts design tokens like colors and typography, transforming them into CSS variables to render a self-contained, browser-ready HTML demo file.

What is token extraction from brand guidelines and how does it apply to CSS variables?▼

Token extraction from brand guidelines involves parsing markdown to identify colors, typography, and spacing, then converting these design tokens into CSS variables for a self-contained HTML demo with an accessible structure and responsive layout.

How do I generate a standalone HTML demo from multiple brand guideline files?▼

You generate a standalone HTML demo from multiple brand guideline files by processing each source file individually, creating dedicated HTML demos placed alongside each source or in the default docs-BA/Prototype/Brand Guideline/ folder.

Does the generated HTML demo include responsive design and accessibility features?▼

Yes, the generated HTML demo includes responsive design and accessibility features by applying inline CSS within a self-contained file, ensuring an accessible structure and responsive layout for visual brand system simulation.

What UI components are rendered in an auto-generated brand design system preview?▼

An auto-generated brand design system preview renders UI components including color swatches, typographic scales from H1 to H6, buttons, forms, and breadcrumbs to demonstrate the extracted brand system visually.

Do I need external dependencies to render a browser-ready HTML demo from markdown?▼

No external dependencies are needed to render a browser-ready HTML demo from markdown; the Skill generates a self-contained HTML file with inline CSS that can be opened directly in any browser.

Related Skills

Explore More Design & Creative Skills→
Yukine5377Yukine5377

ba-brand-demo-gen

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

Community
Advanced
cynthiateeterscynthiateeters

Demo builder

Generate standardized HTML, CSS, and JavaScript patterns for HAP Learning Lab demos.

Community
Basic
efekrbasefekrbas
41

tailwind-design-system

Design Tailwind CSS design systems with semantic tokens and accessible variants.

Community
Advanced
rp1-runrp1-run
38

markdown-preview

Convert Markdown, plain text, and Mermaid diagrams into self-contained HTML previews.

Official
Intermediate