brand-system

Generate a brand system YAML and HTML guide for visual consistency.

1|Updated Apr 10, 2026
One-click install
npx skills add https://github.com/firefly-events/plugin-hive --skill brand-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: brand-system
Source: https://github.com/firefly-events/plugin-hive/tree/main/skills/brand-system
Command: npx skills add https://github.com/firefly-events/plugin-hive --skill brand-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes brand identity across projects by generating a consistent brand system and a visual HTML guide.

Core Features & Use Cases

  • Establish a global brand system including colors, typography, spacing, and logo concepts.
  • Produce a machine-readable YAML brand-system.yaml and a self-contained HTML brand guide for quick visual review.
  • Serve as a reusable brand foundation for product design, marketing pages, and developer handoffs.

Quick Start

Craft a complete brand system for the project by spawning the ui-designer persona and instructing it to generate brand-system.yaml and brand-guide.html in the .pHive/brand directory.

Frequently Asked Questions about brand-system

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

FAQPage Schema
How do I create a consistent brand system for product design and frontend implementation?

To create a consistent brand system, this Skill automates the generation of typography, color, and logo concepts, outputting a machine-readable brand-system.yaml and a visual HTML guide to enforce identity across product design and frontend implementation.

What is the best way to generate a visual brand identity guide for developer handoffs?

The best way to generate a visual brand identity guide is using this Skill to produce a self-contained HTML brand-guide.html file, which provides quick visual review and serves as a reusable foundation for developer handoffs and marketing pages.

Can I use this brand design workflow to enforce a global color palette and typography spacing?

Yes, you can use this brand design workflow to establish a global brand system that standardizes color palettes, typography, and spacing. It ensures deterministic alignment across all projects by generating a centralized brand-system.yaml configuration.

Does this brand identity generator require external dependencies to produce YAML and HTML assets?

No, this brand identity generator requires no external dependencies to produce YAML and HTML assets. It operates independently to spawn a ui-designer persona that outputs the brand-system.yaml and brand-guide.html files directly into your project.

When do I need a machine-readable brand-system.yaml file for my marketing pages?

You need a machine-readable brand-system.yaml file when you want to programmatically enforce a cohesive visual identity across marketing pages and product designs. It ensures deterministic brand alignment by providing a centralized configuration for colors and typography.