Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.

Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.

Design Token Automations

Figma plugin to reference styles

Сборка иконочного шрифта из библиотеки Sketch

Claude Code plugin for Pencil (.pen) design-quality: analyze, design, audit, and transpile to code against a universal 4px-grid scale — framework-agnostic.

Visual design diffs in GitHub PRs. Before/after screenshots for every .pen design change. Free, open-source GitHub Action.

CivicActions' Design, Content, and Research Practice Area

Open-source Figma plugins for design system teams. Trace token impact across your system, extend color tokens into print, and stress-test layouts under text scaling.

Plugin for Figma that simplifies content collaboration. Export/import string variables to and from any spreadsheet tool!

Open-source starter template for organizing brand assets. Maintained by Brandhorse as the companion to our brand asset creation guide.

basic directory structure, dependencies and example tasks for gulp.js projects

Sympli Handoff Sketch Plugin 🔸

Portable brand design system starter with tokens, foundations, components, and AI-assisted front-end handoff.

FrameOps helps teams turn scattered proposal work into a repeatable, reviewable workflow.

Marq Figma Plugin simplifies organization in Figma by allowing you to effortlessly add descriptive tags, emojis, and colors to your selections. Streamline your design workflow and keep your projects well-organized with this intuitive and user-friendly Figma plugin.

Design system ROI calculator for stakeholder-ready business cases