gsp-brand-guidelines

Generate .yml presets, STYLE.md, and guidelines.html from brand identity data.

49|4|Updated Feb 20, 2026
One-click install
npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-brand-guidelines
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsp-brand-guidelines
Source: https://github.com/jubscodes/get-shit-pretty/tree/main/gsp/skills/gsp-brand-guidelines
Command: npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-brand-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building a cohesive design system—tokens, STYLE.md contracts, and visual guidelines—is time‑consuming and error‑prone. This Skill automates the translation of brand identity into ready‑to‑use artifacts, eliminating manual stitching and ensuring consistency across designers and developers.

Core Features & Use Cases

  • Token Generation: Produces a single source‑of‑truth .yml preset containing colors, typography, spacing, and effects derived from brand identity.
  • STYLE.md Contract: Creates an agent‑readable style guide that documents intensity, philosophy, patterns, constraints, and bold bets.
  • Guidelines.html: Generates a self‑rendering HTML brand guide that visualizes the brand’s tokens, typography, and components for instant review.

Quick Start

Use the gsp-brand-guidelines skill to generate a brand’s .yml preset, STYLE.md, and guidelines.html in the brand directory.

Frequently Asked Questions about gsp-brand-guidelines

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

FAQPage Schema
How do I automate brand design token generation from identity files?

The Skill automates brand design token generation by processing brand identity data and config.json to output a single source-of-truth .yml preset containing colors, typography, spacing, and effects.

What is a STYLE.md contract and how does it work for design systems?

A STYLE.md contract is an agent-readable style guide documenting design intensity, philosophy, patterns, constraints, and bold bets. This Skill generates it automatically from brand identity data to ensure consistency.

Can I generate an HTML brand guide from a .yml preset?

Yes, you can generate an HTML brand guide from a .yml preset. The Skill produces a self-rendering guidelines.html file that visualizes the brand's tokens, typography, and components for instant review.

Do I need config.json and brand files to create a style guide?

Yes, you need config.json and brand files to create a style guide. These inputs are required to apply branding phases and generate the .yml presets, STYLE.md, and guidelines.html artifacts.

What is the best way to build a cohesive design system without manual stitching?

The best way to build a cohesive design system without manual stitching is to automate brand identity translation into ready-to-use artifacts. This Skill directly outputs the .yml preset, STYLE.md, and guidelines.html.