Loading...
Loading...
Found 21 Skills
Use this skill when translating Figma designs to code, interpreting design specs, matching visual fidelity, or bridging designer-developer handoff. Triggers on Figma implementation, design-to-code, pixel-perfect, design handoff, auto layout to flexbox, Figma tokens, component variants to props, and any task requiring faithful implementation of design mockups.
Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code.
Design token management with W3C Design Token Community Group specification, three-tier token hierarchy (global/alias/component), OKLCH color spaces, Style Dictionary transformation, and dark mode theming. Use when creating design token files, implementing theme systems, managing token versioning, or building design-to-code pipelines.
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, and generates a design-tokens.json file. Run this once per project before using /figma-to-design-build.
Iterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI.
Guidelines for integrating Figma designs with development workflows using MCP servers and best practices
Translate designs and UI requirements into robust, extensible implementations. Apply when converting designs to code, implementing components, fixing broken UI, or handling responsive layouts.
Comprehensive guide to Miro as a visual collaboration platform. Covers canvas features, content types, AI capabilities, and enterprise use cases. For MCP tool documentation, see the miro plugin's skill (miro-mcp).
Automate Figma UI design. Use this skill when users need to create design drafts, generate components, export resources, or automate design workflows.