Toolverse
All skills
UX / Design

figma-implement-design

by openai

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
openai
Category
UX / Design
Views
48
GitHub repo

About this skill

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

How to use

  1. Upewnij się, że masz skonfigurowany serwer Figma MCP. Jeśli jeszcze go nie dodałeś, uruchom codex mcp add figma --url https://mcp.figma.com/mcp, następnie włącz klienta zdalnego ustawiając [features].rmcp_client = true w pliku konfiguracyjnym lub poleceniem codex --enable rmcp_client. Na koniec zaloguj się przez OAuth: codex mcp login figma i zrestartuj codex.

  2. Przygotuj URL projektu Figmy w formacie https://figma.com/design/:fileKey/:fileName?node-id=1-2, gdzie :fileKey to klucz pliku, a 1-2 to ID węzła komponentu, który chcesz zaimplementować. Alternatywnie, jeśli używasz figma-desktop MCP, możesz wybrać węzeł bezpośrednio w aplikacji Figmy bez potrzeby URL.

  3. Podaj URL lub ID węzła skillowi — może to być bezpośrednio w wiadomości lub jako odpowiedź na pytanie o lokalizację projektu.

  4. Skill automatycznie pobierze kontekst projektu, zrzuty ekranu, zasoby i tokeny projektowe z Figmy.

  5. Kod zostanie wygenerowany z uwzględnieniem Twojego systemu projektowego i konwencji kodowania, z gwarancją zgodności wizualnej 1:1 z projektem.

  6. Przejrzyj wygenerowany kod, dostosuj go jeśli potrzeba, i zintegruj z Twoim projektem.

Related skills

cold-email

by alirezarezvani

When the user wants to write, improve, or build a sequence of B2B cold outreach emails to prospects who haven't asked to hear from them. Use when the user mentions 'cold email,' 'cold outreach,' 'prospecting emails,' 'SDR emails,' 'sales emails,' 'first touch email,' 'follow-up

UX / Design
2359

penpot-uiux-design

by github

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms,

UX / Design
1788

content-trend-researcher

by alirezarezvani

Advanced content and topic research skill that analyzes trends across Google Analytics, Google Trends, Substack, Medium, Reddit, LinkedIn, X, blogs, podcasts, and YouTube to generate data-driven article outlines based on user intent analysis

UX / Design
20116

scroll-experience

by davila7

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not

UX / Design
75117

3d-graphics

by samhvw8

3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build,

UX / Design
2595

ux-writing

by content-designer

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or

UX / Design
24114