FTShare-Lab Figma 设计系统技能
本技能指导 AI 智能体通过 Figma MCP 接口解析设计稿。
适用场景
- 给定 Figma File Key 或 Node ID，提取设计图层结构、AutoLayout 参数与排版样式。
- 提取项目 Color Variables、Typography 与 Shadow 等设计系统 Token。
- 将 Figma 组件精准还原为 Vue 3 / React + Tailwind CSS 代码。
Figma Tokens by FTShare-Lab · ef80d0d
npx skillmds@latest add ftshare-lab/figma-tokens File contents
---name: figma-tokensdescription: Figma 设计稿解析、颜色/排版 Token 提取与高保真组件还原指南。---# Figma 设计系统技能本技能指导 AI 智能体通过 Figma MCP 接口解析设计稿。## 适用场景1. 给定 Figma File Key 或 Node ID，提取设计图层结构、AutoLayout 参数与排版样式。2. 提取项目 Color Variables、Typography 与 Shadow 等设计系统 Token。3. 将 Figma 组件精准还原为 Vue 3 / React + Tailwind CSS 代码。
ftshare-lab/ftai-desktop-plugins-official/tree/main/plugins/figma/skills/figma-tokens commit ef80d0de75
Frequently asked questions
Run npx skillmds@latest add ftshare-lab/figma-tokens in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Figma 设计稿解析、颜色/排版 Token 提取与高保真组件还原指南。 It is listed under Design & Media on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
FTShare-Lab (@ftshare-lab) published this skill. Their other Agent Skills are listed on their SkillMD profile.