# Tools

> Every listed resource, editors’ picks first. The filters below can be combined.

- Search: append `?q=<keywords>` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README.
- Filter by type: append `?type=<cli|skill|plugin|mcp>` to the URL.
- Filter by profession: append `?profession=<profession id>` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions
- Filter by tag: append `?tag=<tag>` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags

Tagged `design-tokens`: 5 items.

- [designlang](https://hebbmind.com/ko/cli/design-extract.md): [CLI] 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.
- [Refactoring UI](https://hebbmind.com/ko/skill/refactoring-ui.md): [Skill] 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.
- [Terrazzo](https://hebbmind.com/ko/cli/terrazzo.md): [CLI] 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.
- [figma-export](https://hebbmind.com/ko/cli/figma-export.md): [CLI] 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.
- [Sync Figma Token](https://hebbmind.com/ko/skill/sync-figma-token.md): [Skill] 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.