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.