ux-skill-foundations

ux-skill foundations in Figma

ux-skill builds a design system from a brand color and a brief (or reads one a team already has) and checks it before handing it over: every pairing is measured for contrast in light, dark and high contrast, and the build refuses to write a system that fails. This skill brings that system into a Figma file as variables with their modes, and builds components from ux-skill's contracts with every visual property bound to a variable. The code and the file then hold one system.

Prerequisites. The figma-use skill MUST be loaded for every use_figma call. ux-skill runs locally (pip install uxskill, Python 3.10 or newer); it never calls a model and needs no network.

1. Get the system

Pick one source, in this order:

1. The team's own tokens. A DTCG tokens.json, a CSS file of custom properties, a Tailwind 4 theme, Markdown rule files or a Figma variables export. Read it as it is, never rebuilt: uxskill system import --from <file> reports what it read and lists every entry it did not read with how to write it. An existing system is fixed input; extend it beside its source with uxskill system extend --from <file> --add <foundation> --out <folder>, never rewrite it.
2. A brand color and a brief. uxskill system build --brand '#3366FF' --brief .ux/system-brief.json --out design-system. The look follows the brand and the brief's axes as continuous values, never a preset by industry. Read design-system/system-report.md before going on: it says what was built and what the engine moved to pass contrast.

Stop and tell the user when the build reports a failure: nothing was written, and the message names the token and the change to make.

2. Variables

Export the variables and the script that applies them: uxskill system export --from design-system/tokens.json --to figma --out figma-export.

• figma-variables.json holds one collection per foundation (color, type, space, layout, radius, border, elevation, motion, imagery), each with the modes it changes in: light and dark, standard and high contrast, comfortable and compact, left to right and right to left, full and reduced motion.
• figma-variables.js creates or updates them in the open file. Run its text through use_figma. It matches by name, so a second run updates in place; it never deletes a variable or renames a mode it did not make.
• Primitives are hidden and unscoped; roles alias them and carry the scope that binds them (fills, text, strokes, gaps, radii) and their web code syntax (var(--color-action-primary)).
• What Figma variables cannot hold is listed in the export's notes, for example a font family keeps its first face and the fallbacks stay in tokens.json.