태그: design-tokens

Reads any website's design system in a headless browser and exports DTCG design tokens, Tailwind config, Figma variables and a brand guide in one command, scoring contrast and cross-page consistency. Also an MCP server or Claude Code plugin. Needs Node.js and Chromium or Chrome.

Applies the concrete rules from Refactoring UI to design and fix interfaces: pick spacing, type, color and shadow values from fixed scales, build hierarchy with weight and color rather than size, and create depth with emulated light. Useful when a UI looks amateur, cluttered or off.

Design token CLI (formerly Cobalt UI): reads W3C DTCG tokens for color, type, spacing and more, validates them and generates CSS, Sass, JS/TS, Swift, Tailwind and other code via plugins. Runs in CI so design specs flow into code automatically. Needs a Node.js project.

Exports Figma components (such as a full icon set) to SVG in bulk and styles like colors, text and shadows to Sass/SCSS variables or Style Dictionary tokens, keeping site icons and styles in sync with designs. Needs Node.js, a Figma token (FIGMA_TOKEN) and the matching output plugins.

Syncs design tokens between code and Figma variables: normalizes both sides, reports drift by value, alias, mode and scope in a dry run, then stops for explicit approval before writing, archives rather than deletes, and saves JSON reports. Requires the Figma MCP server; invoked manually.