ui-color-palette-generate-code

Export PaletteData JSON into CSS, Tailwind, SwiftUI, and Android design tokens.

1|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/a-ng-d/claude-ui-color-palette --skill ui-color-palette-generate-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-color-palette-generate-code
Source: https://github.com/a-ng-d/claude-ui-color-palette/tree/main/skills/ui-color-palette-generate-code
Command: npx skills add https://github.com/a-ng-d/claude-ui-color-palette --skill ui-color-palette-generate-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables exporting a PaletteData object into code or design tokens across multiple formats for downstream development and design systems.

Core Features & Use Cases

  • Exports PaletteData to CSS, SCSS, Less, Tailwind (v3/v4), SwiftUI, UIKit, Android resources, DTCG, Style Dictionary, CSV, and more.
  • Works with the generate_code tool to transform a PaletteData JSON into the requested output format.
  • Use Case: A designer or developer wants a single source palette available as CSS variables, SwiftUI colors, and Android color resources.

Quick Start

Request the export of the current PaletteData using the generate_code tool in the desired format.

Frequently Asked Questions about ui-color-palette-generate-code

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

FAQPage Schema
How do I export a color palette as CSS variables or SwiftUI colors?▼

Export a PaletteData JSON object as CSS variables, SwiftUI colors, or other code formats by passing it to the generate_code tool. This transforms your palette data into the specific output format required for your development ecosystem.

Can I generate Tailwind design tokens from a palette JSON?▼

Yes, you can generate Tailwind design tokens from a palette JSON. The generate_code tool supports exporting PaletteData to Tailwind v3 and v4 formats, allowing direct integration of your color palette into your Tailwind configuration.

What formats are supported for exporting design tokens?▼

Supported export formats for design tokens include CSS, SCSS, Less, Tailwind, SwiftUI, UIKit, Android resources, DTCG, Style Dictionary, and CSV. You can request any of these when using the generate_code tool with your PaletteData.

Do I need a specific JSON structure to generate style dictionaries?▼

Yes, you need the PaletteData JSON structure obtained from the get_full_palette function. This specific JSON format is required as input for the generate_code tool to properly create style dictionaries or code tokens for your chosen platform.

What's the best way to share a single color palette across Android and web platforms?▼

The best way to share a single color palette across Android and web platforms is to use a central PaletteData JSON and export it to multiple formats like Android resources and CSS variables. This ensures a single source of truth for your design system.