Design Systems

Map Figma components to code snippets with Code Connect template files

Create new Figma design, FigJam or Slides files through the Figma MCP tool

Translate an app page or multi-section layout into an editable Figma design

Build a Figma design system from code with variables, components and theming

Author and update reusable generative Figma plugins through the Figma MCP tools

Run safe write and read actions in Figma files with the use_figma tool

Style slides, docs and pages with 10 preset themes or a custom one

Build three-layer design tokens, CSS variables and component specs

Propose a complete design system with aesthetic, typography, color and motion choices

Pull a complete brand kit of colors, fonts and logo from a live website

Build color palettes with OKLCH, contrast checks and pigment-aware mixing

Build a complete design system from scratch with realistic product mockups

Extract color, type, spacing tokens from code, screenshots or Figma exports

Create DESIGN.md files that hold colors, type and layout rules in one place

Link Figma components to code components with Code Connect so updates sync

Write project rules for Figma-to-code work covering tokens, naming and lint

Create a blank Figma or FigJam file as the first step in a design workflow

Pull a Figma file node tree, design tokens and assets into a local snapshot

Build or update Figma screens from app code using design system components

Turn a codebase into a Figma component library that tracks shipped components

Run Figma Plugin API scripts to write to the canvas, read variables and inspect nodes

Search your asset library and drop matching images or logos into the current page

Move a Figma design into a design system by extracting tokens and mapping them

Turn screenshots, URLs and taste notes into a DESIGN.md with an implementation handoff

Write DESIGN.md files that enforce strict typography and calibrated color

Apply ten preset font and color themes to slides, docs, reports and landing pages

Map extracted color and type tokens onto an active design system deterministically

Apply WordPress design tokens, typography and component patterns to themes and sites

Build Material UI themes with design tokens, palettes and light and dark modes

Map a Figma file's pages, components and design tokens into a knowledge graph

Generate an animated console color theme preset for the Ruflo dashboard

Pull Zeplin design specs, styles and assets through Composio Rube MCP

Apply light and dark color tokens, type stacks and card layout to lesson pages

Generate accessible OKLCH color ramps for design tokens and wide gamut displays

Build Tailwind CSS v4 design systems with tokens and component libraries

Create and apply portable visual-style.md design systems from sites or PDFs

Build design tokens, theme switching and component libraries that scale

Keep a repo-local DESIGN.md as the source of truth for UI and frontend decisions

Apply design system patterns, design tokens and component library conventions

Add and manage shadcn/ui components with usage patterns for design systems

Build Tailwind CSS design systems with tokens, component variants and accessibility

Set brand colors, Google Fonts and style once, then check contrast across outputs

Generate design tokens, component docs and developer handoff specs for a UI system

Map Figma components to code components with Code Connect mappings

Generate design system rules for your codebase to guide Figma-to-code work

Apply design fundamentals and named font and color themes to slides, docs or charts

Build Figma components, auto-layout and design systems for developer handoff

Apply Scalar design tokens, themes and components so UI output matches its style

Style a page after 54 well-known brand design systems with ready HTML and CSS