ba-brand-demo-gen
CommunityTurn brand guidelines into a standalone HTML demo.
Design & Creative#markdown#accessibility#design-system#css-variables#token-extraction#brand-guideline#html-demo
AuthorYukine5377
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ba-brand-demo-gen Download link: https://github.com/Yukine5377/common/archive/main.zip#ba-brand-demo-gen Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.