Skills and MCP tagged “design-tokens”

figma heygen-com skill Imports assets, brand tokens and components from Figma into a HyperFrames project, then turns storyboard frames into motion. Useful when a design has to move, not sit still. Claude Code CX Codex Cursor +1 329,500installs design-system claudekit skill This skill builds design tokens, component specs, and presentation slides. Use it when an interface and its slides need to follow one visual system. Claude Code CX Codex Cursor +1 42,200installs brand claudekit skill Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables. Claude Code CX Codex Cursor +1 39,500installs slides claudekit skill Builds strategic HTML presentations using Chart.js and design tokens. Useful for generating pitch decks and marketing slides directly from the agent. Claude Code CX Codex Cursor +1 38,400installs tailwind-design-system Seth Hobson skill Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs bmad-ux bmad-code-org skill Captures UX vision into DESIGN.md and EXPERIENCE.md documents. It structures visual identity and interaction logic without imposing arbitrary choices. Claude Code CX Codex Cursor +1 11,400installs stitch::extract-design-md official google-labs-code skill Extracts a complete DESIGN.md design system directly from frontend source files without building or rendering the project. Useful for styling audits and Stitch exports. Claude Code CX Codex Cursor +1 10,500installs design-system affaan-m skill Builds a design system out of the styles already in your repo, or audits them: tokens, a ten-point UI score, and a check for generic AI styling. Claude Code CX Codex Cursor +1 4,900installs better-colors jakubkrehel skill Audits color systems, generates ramps, and maps semantic tokens to roles. Use it when hardcoded hex values pile up or text contrast needs verifiable measurement. Claude Code CX Codex Cursor +1 32,200installs extract-design-system arvindrk skill This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. Claude Code CX Codex Cursor +1 130,600installs design-system-patterns Seth Hobson skill Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project. Claude Code CX Codex Cursor 15,953installs visual-design-foundations Seth Hobson skill This skill helps define typography, color, spacing, and icon rules for a project. Use it when setting up design tokens or bringing an interface into visual consistency. Claude Code CX Codex Cursor 13,566installs design-brief nexu-io skill Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs ui-design-system Alireza Rezvani skill This skill builds design tokens, component structures, and responsive calculations. Use it when a project needs a consistent UI system or a developer handoff. Claude Code 1,076installs figma-generate-library official Figma skill Skill to build a professional design system in Figma from your codebase. Creates variables, components with variants, typography styles and theming in the correct order — from tokens to finished components. CX Codex GP ChatGPT 32installs