skills.rest
ethan-rio
ethan-rioCOMMUNITY
Explore all skills by this author →
GitHub

html-design-tokens

Generate self-contained interactive HTML pages for visual design tokens.

Updated May 5, 2026
Search Tags:#html generation#color palette#design tokens#css variables#type scale#accessibility checks#design system documentation
One-click install
npx skills add https://github.com/ethan-rio/skills --skill html-design-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-design-tokens
Source: https://github.com/ethan-rio/skills/tree/main/skills/html/html-design-tokens
Command: npx skills add https://github.com/ethan-rio/skills --skill html-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Markdown cannot accurately render visual design values like colors, spacing, and shadows, leading to unreadable documentation that relies on hacky workarounds like Unicode block characters. This skill solves that by generating self-contained interactive HTML pages that display design tokens exactly as they appear in a real product.

Core Features & Use Cases

  • Visual Token Rendering: Displays actual color swatches, type samples, spacing blocks, radius shapes, shadow cards, and motion animations instead of markdown approximations.
  • Developer-Friendly Exports: Includes click-to-copy functionality for both CSS variable names (e.g., --color-accent-500) and raw values (e.g., #B8602A), plus a bulk export button for all tokens as CSS.
  • Accessibility & Usability: Automatically calculates and displays WCAG contrast ratios for color tokens, and builds responsive, print-friendly pages that work on mobile devices.
  • Use Case: A design system team can use this skill to document their full token library, share it with developers, and ensure all color combinations meet accessibility standards without switching between multiple tools.

Quick Start

Ask the AI to generate an interactive HTML design token showcase for your brand's color palette, type scale, and spacing system with copyable CSS variables and contrast ratio checks.

Frequently Asked Questions about html-design-tokens

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

FAQPage Schema
How do I document design tokens in HTML instead of markdown?▼

To document design tokens in HTML, you can generate self-contained interactive pages that render visual color swatches, type samples, and spacing blocks. This approach eliminates unreadable markdown workarounds by displaying exact visual values for developer handoff.

Can I generate a color palette with WCAG contrast ratio checks?▼

Yes, you can generate a color palette HTML page that automatically calculates and displays WCAG contrast ratios. This ensures your color tokens meet accessibility standards while allowing stakeholders to visually verify compliance directly in the browser.

What is the best way to share CSS variables for a design system?▼

The best way to share CSS variables is generating an interactive HTML showcase with click-to-copy functionality. It provides bulk export of raw values and variable names like --color-accent-500, streamlining developer handoff without external build steps.

Does design system documentation work without external runtime dependencies?▼

Yes, design system documentation can be generated as a self-contained HTML page requiring no external runtime dependencies or build steps. The output is a responsive, print-friendly file that works offline and displays visual tokens accurately on mobile devices.

How do I render a visual type scale and spacing system for developer handoff?▼

You can render a visual type scale and spacing system by generating an HTML page that displays actual typography samples and spacing blocks. This replaces markdown approximations with accurate visual representations, enabling developers to copy exact CSS values.

Why do my markdown design tokens show up as unreadable block characters?▼

Markdown shows unreadable block characters because it cannot accurately render visual design values like colors and shadows. Generating a self-contained HTML page solves this by displaying interactive token swatches exactly as they appear in the product.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

graphic-design-executor

Transform design-planner specifications into SVG and HTML assets.

Official
Advanced
kentojekentoje
2

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

Community
Basic
VivekSinghRathore7VivekSinghRathore7

playground

Generate interactive HTML playgrounds for visual exploration of user interfaces.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate