Can I use this skill with my existing brand assets?

Yes, you can upload logos, screenshots, or mood boards, and the Builder mode will extract colors and patterns to help form your digital brand guide.

What is the difference between Builder and Enforcer mode?

Builder mode helps you create a new brand identity through an interactive interview, while Enforcer mode reads an existing guide to strictly apply those styles to any code you write.

How does it interact with the frontend-design skill?

It works in tandem: the frontend-design skill handles the creative layout and implementation, while the brand-guide skill provides the visual constraints and guardrails.

Does it work with existing CSS frameworks?

The skill generates CSS custom properties and variables that can be integrated into any framework to ensure tokens are used consistently.

Brand Guide & Design System Enforcer

Name: Brand Guide & Design System Enforcer
Author: bmorri13

bybmorri13

0•

デザインツール

Creates and enforces structured brand identity systems to ensure total visual consistency across frontend development projects.

The Brand Guide skill provides a dual-mode framework for maintaining visual integrity in frontend development. In Builder mode, it conducts an interactive interview to define brand tokens—including color palettes, typography scales, and component styles—while generating real-time visual previews. In Enforcer mode, the skill parses a brand-guide.json file to strictly govern all CSS generation, ensuring that every margin, font-family, and hex code adheres to the established design system. It acts as a bridge between creative design and technical implementation, preventing style drift and manual errors.

主な機能

01Automated brand-guide.json generation and schema validation

02Strict token-based CSS enforcement for colors, spacing, and typography

03Real-time HTML visual previews of the brand system as it is built

04Audit mode to identify and fix brand deviations in existing codebases

05Guided brand discovery interview to define identity and design tokens

060 GitHub stars

ユースケース

01Ensuring multiple developers or agents maintain consistent styling across a large project

02Building a comprehensive design system from scratch with guided AI assistance

03Extracting brand identities from existing logos and screenshots to standardize UI output

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bmorri13/bmosan-skills brand-guide

For use in Claude.ai and ChatGPT

Download Skill