figma-to-code

仓库创建 2025年12月9日最近提交 10 天前SkillHot 收录 21 天前

▸ 精选理由

面向交付级别的像素精确组件生成，能大幅加速前端实现流程。

▸ 风险提示

通常需访问 Figma 外部 URL 或 API，可能涉及设计文件隐私与外部请求。

这个 Skill 做什么

将 Figma 设计抽取为可生产部署的 React/Next.js + TypeScript + Tailwind 组件。

把 Figma 设计一键抽成可直接上线的 React/Next.js 组件，生成 TypeScript + Tailwind 的像素级还原代码。给前端交付设计稿、需要把视觉稿转成生产代码或有 Figma 链接时会用到。特别强调保留设计细节不裁剪，生成的类名和样式要完整且可生产部署。

▸ 展开 SKILL.md 英文原文

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.

开发编程Figma转码ReactTailwind通用

240

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

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

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/majiayu000/spellbook/main/skills/figma-to-code/SKILL.md"

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

# Figma to Code - Production-Ready Component Generator

## 🎯 Purpose

Extract **complete, lossless** design information from Figma and generate production-ready React/Next.js components with TypeScript and Tailwind CSS.

---

## 🚨 CRITICAL RULES - Read First!

### **Rule 1: NEVER Truncate Code**

Use **100% of Figma MCP output**. Every className, every property matters.

```tsx
// ✅ CORRECT: Keep ALL className from Figma MCP
<div className="absolute font-source-serif h-[108px] leading-[1.8] left-[100px] not-italic text-[20px] text-[rgba(29,38,45,0.8)] text-justify top-[210px] w-[1096px] whitespace-pre-wrap">

// ❌ WRONG: Removing any className
<div className="absolute left-[100px] top-[210

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