extract_design_tokens

MCP tool from Miromiro MCP by SoraiaBarroso

Full token system with usage counts; format: css or tailwind for paste-ready output, dtcg for a W3C Design Tokens file (Style Dictionary / Figma variables)

How to use it

extract_design_tokens is exposed by the Miromiro MCP MCP server. Add the server to your MCP client (Claude Desktop, Cursor, Windsurf and others), and the extract_design_tokens tool becomes available to the model automatically. See the full listing for setup details and every tool this server provides.

FULL MIROMIRO MCP LISTING

Other tools in Miromiro MCP (9)

extract_assets

Every image URL on a page, tagged by source, with alt text

extract_audio

Audio files, og:audio, and podcast enclosures, tagged by source

extract_brand

Named color roles (primary/accent/background/text), palette, fonts split by role, logo, social profiles, a 0-1 confidence score, and signals explaining where the colors came from (declared tokens vs inferred)

extract_code

A section of a live page as a paste-ready component (Tailwind, HTML+CSS, JSX or Vue) plus the tokens it uses - start here to rebuild real UI

extract_fonts

Every font file and family the site loads, with weights, formats, and file URLs

extract_lottie

Lottie animation JSON files declared in the page

extract_svgs

Inline SVG code (sanitized, paste-ready) plus external SVG file URLs

extract_videos

Video files, og:video, and player embeds (YouTube, Vimeo, Wistia, Loom), tagged by source

limit

(up to 200) - raise the item cap: "give me 80 SVGs, not 20"