figma-to-code

仓库创建 2026年7月25日最近提交 1 天前SkillHot 收录 1 天前

▸ 精选理由

直接将视觉稿映射为组件与变体，显著加速实现流程。

▸ 风险提示

可能需使用 Figma API/访问令牌并访问外部资源

这个 Skill 做什么

根据 Figma 设计生成可生产环境的 React/Next.js 代码。

把 Figma 设计直接生成可生产的 React/Next.js 代码，自动把组件、变体和复用策略落地为可运行代码。碰到有人给 Figma 链接或要从 Figma 实现/重做界面就用，能省去手工拆解设计的时间。特别会指导 Figma MCP 的正确用法并处理 variant 映射，避免实现时出错或重复造轮子。

开发编程Figma 转码React/Next组件映射通用

Stars

Forks

仓库内 Skill

积累中

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/figma-to-code/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/figma-to-code/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

---
name: figma-to-code
description: Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.
distributed_by: DesignSkill (https://designskill.dev)
asset: skills/figma-to-code
license: MIT
---

# Figma to Code Generator

## Purpose

Generate production-ready React/Next.js code from Figma designs. Provides systematic workflows for using Figma MCP tools, enforces component reuse, maps Figma variants to code

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有