figma2code：用分阶段工作流把 Figma / Mastergo 设计稿高保真还原成代码
figma2code 是 SkillHub 社区 Skill（@user_3141f90e/figma2code，v1.0.0），面向设计稿转代码时整页直译还原度低的问题。在已连接 Figma 或 Mastergo MCP 的前提下，按全局规划、组件树梳理、逐模块还原、整体拼接四步推进，产出 PLAN.md 与 COMPONENTS.md，支持 HTML/CSS、React、Vue、小程序、uni-app、Taro、Flutter、SwiftUI 等栈。安装需 skillhub CLI 并用 --dir 指向 Agent skills 目录。适合多模块、重复组件与响应式页面。
Read Morefigma转高保真html：用 Agent Skill 把 Figma 设计稿落成响应式 HTML
figma转高保真html（@user_24c316b5/figma-to-html，v1.0.0）是 SkillHub 社区 dev-programming 类 Skill，通过 Figma MCP 读取设计数据与图片，并结合参考截图生成高保真响应式 HTML。支持「figma 转 html」等关键词或 Figma 链接触发。安装可参考 skillhub.cn/install/skillhub.md，使用 skillhub install 并指定 Cursor 等客户端的 skills 目录。需预先配置 Figma MCP；元数据标注 requires_api_key=false。
Read Moredsh-figma-to-lottie: A Figma/SVG to Lottie Compiler in DSH
`dsh-figma-to-lottie` is a DeepSeek Harness plugin that fills the gap in compiling design data into animation assets. It provides two tools, `lottie_compile_shape` (parses SVG paths) and `lottie_compile` (generates complete Lottie JSON), supports paths, rectangles, images, and text layers, as well as keyframe animations and gradient fills. The plugin requires no build step and can directly generate Lottie files for iOS/Android/Web through natural-language instructions.
Read MoreIntegrate Figma Designs into AI Programming Workflows with OpenAI's Official Figma Skill
This article introduces the Figma Skill curated by OpenAI: how it cooperates with Figma MCP (mcp.figma.com) to obtain design context, screenshots, variables and resources, and converts design nodes into project code through a fixed workflow. It verifies the installation methods ($skill-installer / directory copy), the MCP configuration of Codex (FIGMA_OAUTH_TOKEN, RMCP client), the mandatory toolchain (get_design_context → get_metadata → get_screenshot), and the link-driven prompt writing method, which is suitable for developers who carry out design-to-code collaboration in Codex, Cursor and Claude Code.
Read More# figma-implement-design: Official OpenAI Skill that 1:1 restores Figma design drafts to production-grade code
**figma-implement-design** is an OpenAI-curated Agent Skill that works with the Figma MCP to translate design nodes into deliverable UI code within repositories. This article introduces its seven-step workflow, boundaries with other Skills such as figma-use, prerequisites for the MCP, as well as installation and typical usage in tools like Cursor (/add-plugin figma) and Codex ($skill-installer), helping developers shorten the Design-to-Code iteration cycle.
Read More