skills.rest
Young-Z
Young-ZCOMMUNITY
Explore all skills by this author →
GitHub

x-ipe-tool-brand-theme-creator

Generate X-IPE theme packages with tokens and visual previews from brand inputs.

8|2|Updated Jan 22, 2026
Search Tags:#typography#visualization#theme#design-system#color-palette#json-ld#token-derivation
One-click install
npx skills add https://github.com/Young-Z/X-IPE --skill x-ipe-tool-brand-theme-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: x-ipe-tool-brand-theme-creator
Source: https://github.com/Young-Z/X-IPE/tree/main/.github/skills/x-ipe-tool-brand-theme-creator
Command: npx skills add https://github.com/Young-Z/X-IPE --skill x-ipe-tool-brand-theme-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of complete X-IPE theme packages by deriving tokens and a visual preview from brand inputs.

Core Features & Use Cases

  • Generate design-system.md with comprehensive tokens for colors, typography, spacing, radius, and shadows.
  • Generate component-visualization.html containing a live CSS-variable preview and a JSON-LD block for AI parsing.
  • Output both files under x-ipe-docs/themes/theme-{name}/ and provide a ready-to-use design system and visualization.

Quick Start

Provide the theme_name and a single accent color (or a source such as a web link, image, or text description). The agent will derive tokens, generate the two required files, and place them in the theme directory.

Frequently Asked Questions about x-ipe-tool-brand-theme-creator

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

FAQPage Schema
How do I generate a design system from brand colors and typography inputs?▼

To generate a design system from brand inputs, provide a theme name and a single accent color, image, or text description. The tool derives color palettes, typography, spacing, and radii tokens, outputting a complete design-system.md file.

What is a JSON-LD block used for in component visualization?▼

A JSON-LD block in component visualization provides structured metadata for AI parsing. It accompanies the live CSS-variable preview in the HTML file, enabling automated systems to read and extract design tokens accurately.

Can I create a full theme package using only a text description?▼

Yes, you can create a full theme package using only a text description. The derivation process accepts descriptive inputs alongside web links or images to generate comprehensive design tokens and visual previews.

How do I derive design tokens for spacing and radius from an accent color?▼

Deriving design tokens for spacing and radius from an accent color involves automated token derivation. The system calculates complementary color palettes, typography scales, spacing, and shadow variables based on the provided brand color.

Does the theme generation process output HTML files for visual preview?▼

Yes, the theme generation process outputs a component-visualization.html file. This file contains a live CSS-variable preview of the generated tokens, placed alongside the design-system.md in the theme directory.

Related Skills

Explore More Design & Creative Skills→
pinion05pinion05
3

brand-guidelines

Apply Anthropic brand colors, typography, and visual formatting to artifacts.

Community
Basic
JaylaelikeJaylaelike

premium-ui-systems

Codify design tokens for spacing, radii, color, and typography into reusable UI guidelines.

Community
Advanced
rungchan2rungchan2
2

design-system-generator

Generate design system documentation and color palettes from brand inputs.

Community
Intermediate
yonetim258852yonetim258852

algorithmic-color-palette

Derive brand-aligned UI color palettes from seed colors into design tokens and CSS variables.

Community
Advanced