skills.rest
firefly-events
firefly-eventsOFFICIAL
Explore all skills by this author →
GitHub

design-system

Converts brand-system YAML to W3C token JSON and HTML previews for frontend design workflows.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert a brand-system YAML into implementation-ready W3C Design Token JSON and a visual HTML preview that shows how tokens appear in UI.

Core Features & Use Cases

  • Convert a brand-system.yaml into a complete W3C design-token JSON file that can be consumed by design tools and front-end systems.
  • Generate a self-contained HTML preview (.pHive/brand/tokens-preview.html) showing color swatches, typography scales, spacing blocks, and border radii for quick visual verification.
  • Gate on the presence of .pHive/brand/brand-system.yaml and provide a deterministic workflow that can be spawned by an agent for token generation and validation.

Quick Start

Provide the brand-system.yaml at .pHive/brand/brand-system.yaml and run the token-generation workflow to output tokens.json and render the HTML preview.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I convert a brand-system YAML into W3C design tokens?▼

To convert a brand-system YAML into W3C design tokens, provide your brand-system.yaml file and run the token-generation workflow to output a structured tokens.json file containing color, typography, spacing, and border-radius values.

How do I generate a visual HTML preview for design tokens?▼

You can generate a visual HTML preview for design tokens by running the token-generation workflow, which renders a self-contained tokens-preview.html file showing color swatches, typography scales, spacing blocks, and border radii for quick visual verification.

What is a W3C design token JSON file used for in frontend workflows?▼

A W3C design token JSON file is used for design-to-development handoff, enabling consistent token generation across platforms and themes by providing a standardized format that can be consumed by design tools and front-end systems.

Do I need a specific file structure to generate design tokens from YAML?▼

Yes, you need a specific file structure to generate design tokens from YAML. The workflow gates on the presence of a brand-system.yaml file located at the .pHive/brand/ directory path to execute the deterministic token generation process.

Can I use this design token generation workflow with an agent?▼

Yes, you can use this design token generation workflow with an agent. The workflow provides a deterministic process that can be spawned by an agent to automate token generation and validation from the brand-system YAML input.

What design token categories are included in the generated tokens.json?▼

The generated tokens.json includes color, typography, spacing, and border-radius tokens. These categories are extracted from the brand-system.yaml and structured according to the W3C design token format for cross-platform consumption.

Related Skills

Explore More Design & Creative Skills→
firefly-eventsfirefly-events

brand-system

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

Official
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced
MaVoid-TeamMaVoid-Team

brand-identity

Provide brand guidelines for design, coding, and messaging consistency.

Official
Basic
Asymmetric-alAsymmetric-al
417

design-system-patterns

Implement design tokens, theming infrastructure, and component architecture patterns.

Official
Advanced