figma-to-react

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

▸ 精选理由

便于前端团队快速把设计落地为可维护组件，减少手工拼装工作量。

▸ 风险提示

可能需要调用 Figma API/外部 URL，涉及设计数据访问与隐私。

这个 Skill 做什么

将 Figma 设计转换为生产就绪的 React/Next.js 组件并保持像素级一致性。

把 Figma 设计无损转成可直接上线的 React/Next.js 组件，包含 TypeScript 和 Tailwind，追求像素级一致与生产就绪代码。用在需要把设计交付给前端工程化实现、保持样式和结构完全一致的时候，禁止删减关键属性以免出差错。亮点是保留全部设计细节、生成可复用组件并强调代码完整性。

▸ 展开 SKILL.md 英文原文

Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

开发编程Figma转ReactTypeScript像素还原通用

240

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

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

或 curl 直取 SKILL.md

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

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

# Figma to React - 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-[21

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