Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@slashclone

Palette export

@slashclone/palette-export

Turn your design tokens into a downloadable color palette: a swatch sheet (SVG), JSON, CSS variables, and a GIMP palette that Krita and Inkscape also open. Handy for briefing designers or image models with your exact colors. Reads one colors file and writes only to an out folder.

SkillContentv0.1.0 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it

What it makes

Real output from this kit

How this works

  1. It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
  2. While it works, it reads and changes files in the places it lists, nowhere else.
  3. It runs these commands on your computer: node scripts/export-palette.mjs.
  4. Nothing runs until you choose to use it, and you can remove it any time.

SKILL.md

Palette export

Goal: the project's real colors, in files people can open anywhere, without retyping a single hex.

Steps

  1. Find the source of truth. Look for the design tokens (a tokens.ts, theme.ts, Tailwind config, or CSS variables). Use the values the product actually ships, never colors guessed from screenshots.
  2. Write data/colors.json. Group the colors the way the team talks about them (neutrals, brand, accents, status), with a short note on what each group is for. Format: see examples/colors.json. A flat { "name": "#RRGGBB" } map works too.
  3. Run it: node scripts/export-palette.mjs --in data/colors.json --name "Brand" --out out It writes out/palette.json, palette.css, palette.gpl, and palette.svg.
  4. Need a PNG? Convert the SVG with whatever the machine has (on macOS, qlmanage -t -s 2400 out/palette.svg; elsewhere rsvg-convert or a browser screenshot). Say which tool you used.
  5. Hand it over. Point to the files and name the few colors that set the look, with a note on proportions if the brand has one (for example, how much of a frame the accent should cover).

Rules

  • Every hex comes from the project's own tokens. If two sources disagree, say so and ask which wins.
  • Keep text and non-text colors labeled: a brand green that is only for marks must not be handed over as a text color.
  • Do not commit the exports unless the person asks; they are generated files.

Files

  • SKILL.md
  • examples/colors.json
  • kit.json
  • scripts/export-palette.mjs

Did it work?

0worked for them0did not work

Sign in to say whether it worked for you.

Nobody has said yet. Tried it? Tell the next person.