Generate a tonal color scale (steps 50–950) from a hex or RGB input and push it as COLOR variables to a Figma file. No code tokens, no showcase, no external config files needed — just color input and a Figma destination. Triggers: "create color scale", "generate color scale", "add color to Figma", "create palette in Figma", "push color variables to Figma", "create color variables".
Generate a full tonal scale (steps 50–950) for one or more color families and write them as COLOR variables directly into a Figma file. Self-contained — no schema files, no code output, no retro.
Before asking any questions, scan the user's opening message for:
figma.com URL → extract the fileKey from it now."Primitives", "color/base") → note it."color") → note it.Any fields already present skip their corresponding ask below.
Ask the user (for any fields not already provided):
red, brand, neutral. Multiple families can be submitted in one run.#rrggbbrgb(r,g,b)#FAFAFA at 50: that exact hex is locked to that step.#DDDDDD only: the agent places it at the best-fit step by lightness.50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Step 50 is always lightest, step 950 always darkest.Early placement notice for unpinned values
After the user provides color input, and before generating the scale, for every unpinned value:
"
{hex}will be placed at approximately step {N} (L≈{L}%) by lightness fit. Pin it to a different step, or proceed with best-fit?"
If the Figma URL or collection name were not in the opening message, ask now — before generating the scale so any destination issues are caught early:
figma.com/design/... or figma.com/file/... link. The fileKey is the segment after /design/ or /file/.Primitives.color → variables are named color/red/500. Default: none → variables are named red/500.For each color family:
3a — Build the initial scale using pinned anchors
3b — Place unpinned values
For each unpinned value, find the step in the generated scale whose hex is closest by lightness proximity. Treat that step as a pinned anchor, regenerate the affected segment, and annotate it with ← best fit in the preview.
If two unpinned values resolve to the same step, flag the conflict and ask the user which one to keep (or whether to shift one to an adjacent step).
Output the full scale as a hex table before writing anything:
red-50: #fafafa ← pinned
red-100: #f0f0f0
...
red-400: #dddddd ← best fit
...
red-700: #777777 ← best fit
...
red-950: #111111 ← pinned
Ask: "Does this scale look right? Proceed to push to Figma?"
Do not continue until the user confirms.
figma-use skill at /Users/jiawei.wu/.codex/skills/figma-use/SKILL.md.fileKey from the provided Figma URL.COLOR variable in the named collection:
{group}/{family}/{step} if a group prefix was given, else {family}/{step} (e.g. red/500 or color/red/500).COLORuse_figma.Before finishing, confirm:
#ffffff) or pure black (#000000) unless explicitly approved.If any item fails, fix it before finishing. If a fix is not possible (e.g. Figma MCP unavailable), report it clearly to the user.